시멘틱 태그(Sementic Tag)에서 Sementic의 사전적 의미는 "의미론적"이라는 뜻으로, HTML에서 시멘틱 태그란 **"의미를 가지는 태그"**를 말한다.
가령 제목과 같이 큰 글씨를 나타낼 때 <h1> 태그를 사용하여 나타낼 수 있다. <h1> 태그는 페이지 제목이라는 의미를 갖고 있다.
반면 <span> 태그에 style을 입혀 <h1> 태그와 동일한 스타일을 표시할 수 있다. 하지만 이것은 HTML 의미(Sementic)를 제대로 살리지 못한 것 이기 때문에 지양할 필요가 있다.
페이지 Layout을 만들거나 HTML 마크업을 할 때 최대한 의미있는 Sementic Tag를 사용하길 권장한다.
<header> : 페이지에 대한 정보를 담는 태그로, 페이지 상단에 위치합니다.<nav> : 다른 페이지나 같은 페이지 안에 다른 부분으로 이어주는 내비게이션 링크로 구성된 섹션을 표현합니다.<aside> : 페이지 전체 내용과는 어느정도 관련성이 있지만, 주요 내용과는 직접적인 연관성은 없는 분리된 내용을 담고 있습니다.<main> : 문서의 body 요소의 주 콘텐츠(main content)를 정의할 때 사용합니다.<section> : 문서나 응용프로그램의 일반적인 섹션을 표현합니다.<article> : article은 여러가지 아이템들을 묶어 재사용 가능하게 그룹화함<footer> : 주로 저작권 정보나 서비스 제공자 정보등을 나타내며 사이트 하단에 위치합니다.<details> : 추가적인 정보를 나타내거나 사용자가 요청하는 정보를 나타냅니다.<summary> : 부모요소인 details요소의 내용에 대한 요약이나 캡션등을 나타냅니다.<figcaption> : 부모요소인 figure요소의 내용들에 대한 캡션, 혹은 제목을 나타냅니다.<figure> : 일러스트, 다이어그램, 사진, 코드등에 주석을 다는 용도로 사용됩니다.<mark> : 하나의 문서 내에서 다른 문맥과의 관련성을 나타내기 위해서 참조 목적으로 마킹되거나 하이라이트된 텍스트를 표현합니다.