Semantic

시맨틱(semantic) 태그로 들어가기 전에 시맨틱의 뜻부터 알고 가자. 사전적 의미론 "의미의, 의미론적인"이다. 뜻에서 보듯 의미에 초점이 맞춰져 있다고 볼 수 있다.

Semantic Tag

시맨틱 태그는 개발자, 브라우저에게 정확한 의미를 전달하는 태그이다.

시맨틱 태그가 아닌 div와 span 태그는 태그 자체만으로는 어떤 내용이 들어가는 지 알 수 없다. 하지만 img, table 등 시맨틱 태그는 해당 태그 내용이 어떤 내용이며 어떤 값을 가질지 알 수 있다.

img 태그를 사용하는게 div 태그에 css background-img 속성을 추가하는 것보다 의미를 바로 파악할 수 있다.

div 태그에 css를 사용하여 이미지를 추가할 경우는 이미지가 내용과 관련이 없어 굳이 언급하지 않아도 되거나 이미지의 부분만 사용하고 싶을 경우다. 이 외에도 여러가지 경우가 있을 수 있다.

SEO적 (검색엔진 최적화) 관점에서도 시맨틱 태그가 중요하다. 검색엔진은 HTML 태그를 기반으로 웹사이트를 이해하기 때문에 div, span 태그보다 구조적인 h1, img 태그를 사용하면 검색 엔진 페이지 (SERP) 상위에 랭크할 가능성도 높아진다.