[html] 시맨틱 웹과 시맨틱 태그

 

시맨틱 웹과 시맨틱 태그??

시맨틱 태그..이게 뭘까?

 

웹 기술의 발전에 따라 많은 수 많은 정보들이 웹상에 쌓이게 되었는데,
컴퓨터가 그 정보들을 보다 쉽게, 의미있는 해석할 수 있도록하기 위해 
시맨틱 웹과 시맨틱 태그라는 웹 개념이 등장했다.
-위키백과

 

음.. 더 쉽게 알아보자.

 

예를들어, 헤더의 위치를 잡아주기 위해

<div>내가 헤더</div>

코드를 작성했으면

<div>태그 안에 '내가 헤더'라는 내용을 넣어주었기 때문에

'컴퓨터 사용자'는 이 자리가 내가 헤더임을 알 수 있지만,

'컴퓨터'는 <div>태그만으로 이 자리가 헤더임을 알 수가 없다.

 

 

물론, <div>태그 안에 id값을 header로 부여하여

<div id="header">내가 헤더</div>

 이렇게 나타낼 수도 있지만 id값을 부여하기위해서는 의미없는

 div태그를 무조건 사용해줘야 한다.

(div태그 남발은 좋은 습관이 아니다. 유지보수차원에서도,,

다른사람들이 봤을때 직관적으로 이해하도록 작성해야 좋은 코드)

 

 

 

이러한 문제를 개선하고자, HTML5에서는

시맨틱 웹의 개념과 시맨틱웹을 쉽게 구성할 수 있도록

만들어주는 시맨틱 태그가 등장했다.

(시맨틱 태그에는 header, img, nav, article, section, aside, footer, main 등 과

같은 태그들이 존재한다.)

 

 

따라서, 시맨틱 웹 환경이 구축된 HTML5를 사용하는 현재는

컴퓨터에게 헤더자리임을 알려주기위해서 header태그를 사용하여

<header>내가 헤더</header>라고 간단하게 적어주면 된다.

 

 

그럼 유용한 시맨틱 태그는 아무때나 사용해도 될까?

- 무조건 시맨틱 태그를 사용한다고 좋은건 아니며,

상황에 맞게 사용해 주면된다.

예시로 웹페이지에 배경이미지를 넣을때 

시맨틱태그를 사용하는 경우와, 그렇지 않은경우를 비교해보자.

 

 

img 시맨틱 태그를 사용하는 경우,

<img class="시맨틱태그" alt="이미지 속성" src="이미지 주소">

alt 속성에 해당 이미지에 대한 속성값을 넣을 수 있고

이는 검색엔진에서 인식된다.

따라서 이미지가 검색엔진에 노출되기 원하면 

img 시맨틱 태그를 사용해 주면 된다.

 

 

 

css파일에서 이미지 삽입하는 경우,
.배경태그 { background-image: url("이미지 주소"); }
위와 같이 css를 통해 배경이미지를 넣어주면 어떤 의미있는 값도

컴퓨터에서는 읽을 수 없기 때문에 그저 이미지 삽입에서 그치게된다.

하지만, 웹사이트에서 단순하게 보여주기를 위한 이미지라면

유지보수에 편리한 본 방법을 사용해 주면 된다.

 

 

 결론: 이미지가 어떠한 중요한 의미를 내포하고 있으면

html방식의 <img> 태그를 사용하고 중요한 의미가 없는

이미지라면 관리가 쉬운 css속성의 backgroung-image를 사용하면 된다.

그리고 html방식의 <img>태그는 시멘틱태그이기 때문에

로봇의 웹 크롤링에 도움을 줄 수있어, 검색엔진에 활용될 수 있다.

반면에, css속성의 background-image는 시멘틱 태그를 사용하지 

않기 때문에 검색엔진에 활용되지 않는다.