시맨틱 태그

초창기에는 <시작 태그>콘텐츠</종료 태그> 형식을 사용한다 하더라도 태그 자체에 아무런 의미를 부여하지 않고 시각적인 효과(스타일)만 나타냈습니다. 대표적인 예로 <b></b> 태그는 글자를 굵게 표시하고, <i></i> 태그는 글자를 이탤릭체로 표시합니다.

HTML이 발전하면서 웹 페이지의 효과적인 유지·보수 및 코드의 확장성을 위해 콘텐츠와 시각적인 효과를 분리하는 쪽으로 눈을 돌렸습니다. 또한 콘텐츠를 보다 의미 있게 전달하고 문서의 구조를 효율적으로 구분하기 위해 더욱 의미론적인 태그의 필요성이 부각됐습니다. 이러한 점을 반영해 HTML의 다섯 번째 버전인 HTML5에는 시맨틱 태그(semantic tag)라는 개념을 담았습니다.

시맨틱 태그는 사람이 이해하기 쉽도록 이름만 보고 역할이나 위치를 알 수 있게 만든 태그입니다. 다음 그림처럼 시맨틱 태그를 이용하면 태그 이름을 통해 문서 내 요소의 위치와 역할을 알 수 있습니다.