[HTML] Semantic(시멘틱) Tag(태그)와 Web(웹)

시멘틱 웹은 의미론적인 웹이란 뜻이다

 

시멘틱 웹 = 의미 있는 웹

시멘틱 태그 = 의미있는 태그

 

과거 또는 현제 div(디비전)이라 하는 태그를 이용하여 마크업의 영역들을 구분해 왔는데

최근에 들어 사용자가 사용하기에 검색엔진과 같은 찾는 수단의 정확도가 중요해지면서

시멘틱 태그를 사용하여 개발을 하는 경우가 많이 있다

 

시멘틱 태그 적용 전

<div class="main">
  <div class="title">중요한 제목 입니다</div>
  <div class="contents">중요한 내용 입니다</div>
</div>

 

시멘틱 태그 적용 후

<header>
  <h1 class="title">중요한 제목 입니다</h1>
  <p class="contents">중요한 내용 입니다</p>
</header>

 

영역이 가지고 있는 확실한 의미를 부여함으로써 개발환경에 있어 관리에 용이함은 물론

사용자에게 있어도 검색엔진 등 정확도를 올려줄 수 있다는 점이다

 

예를 들어 HTML의 img태그와 CSS의 background-image를 통해 이미지를 넣는다고 가정할 때

둘의 차이점을 보면

 

img태그라는 것은 정확히 img가 있다는 의미가 있고 속성이 정해져 있기에 img가 잘못되더라도

art 통한 일종의 메시지를 줄 수도 있어 용이하다

또한 HTML구문에서의 이미지를 처리하기 때문에 성능면에서 좋다

 

반면 CSS의 background-image를 통해 이미지를 부여할 경우

검색엔진에 노출되지 않다는 단점이 있다

(CSS를 통한 이미지 경우 개발자 도구를 통해 확인을 해야 함)

그래서 둘의 차이는

 

img태그는 정확이 이미지의 의미가 있고 검색 노출이 되어야 하는 경우 사용하면 좋고

CSS background-image의 경우 단순 이미지가 디자인적인 요소로만 이용이 될 때 사용하면 좋을 것이다

 

정답은 없지만 요즘은 img태그를 많이 사용하는 편이며

 

시멘틱 태그의 활용이 중요해 지고 있다는 점

 

 

시멘틱태그 활용