Semantic Tag는 그 자체로 의미를 가진 태그를 말하며, 이들은 브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확히 설명하여 코드의 가독성을 높이고 유지보수를 쉽게한다.
<div>, <span>과 같이 콘텐츠의 의미를 전혀 알려주지 않는 non-semantic tag와 달리
<img>, <table>, <form> 등의 semantic tag들은 태그만 봐도 어떤 컨텐츠인지 바로 알아차릴 수 있다.
이는 사람이 아닌 컴퓨터에게도 적용되는데, 컴퓨터는 자연어를 이해하지 못하기 때문에 기존의 웹은 잡다한 데이터의 모임에 불과하였지만 시멘틱 태그가 있으면 이 데이터들을 의미와 역할에 맞게 구분하여 저장하고 사용할 수 있다.
즉, Semantic web은 웹에 존재하는 수많은 웹사이트들에 메타데이터를 부여하여, 웹페이지를 하나의 거대한 데이터베이스로 구축하고자 하는 발상이다.
시맨틱 태그와 논 시맨틱 태그를 이용하여 용도에 따라 같은 콘텐츠를 다른 의미로 사용할 수 있는데
예를 들어 웹페이지에 이미지를 추가하는 방법으로 <img>태그를 이용하여 html에 이미지를 삽입하는 방법과 <div>태그에 css를 이용해 background-img추가하는 방법이 있다.
첫 번째 방법은 <img>태그를 통해 검색엔진이 이 콘텐츠가 이미지임을 알 수 있어 검색엔진에 alt속성에 넣은 문자열을 통해 이미지가 노출되며 이미지가 로드되지 못했을 때에도 alt속성 속 문자열을 노출시켜 이미지가 존재함을 알려준다.
두 번째 방법은 아무 의미도 가지고 있지 않은 <div>태그의 속성으로 이미지가 들어간 것이므로 검색엔진에 노출되지 않고 이미지가 로드되지 않았을 경우에 이 이미지가 들어갈 자리에는 아무것도 남지 않게 된다.
따라서 첫 번째 방법은 컨텐츠에 관련 된(또는 컨텐츠를 이해하는데 필요한) 이미지일 경우에 사용하면 좋을것이고,
두 번째 방법은 컨텐츠와 관련이 없거나, 존재하지 않아도 크게 상관 없는 디자인적인 요소로만 활용되는 이미지일 경우에 사용하면 좋을것이다.
