[HTML] 시멘틱 구조 태그

일반적으로 HTML5 태그의 가장 큰 변화를 시맨틱 태그라고 말한다. 그리고 이 때문에 일반적으로 HTML5 웹 페이즈를 시멘틱 웹페이지라고 말한다. 일단 시멘틱은 '의미론적인'이라는 영어 단어이다.

 

웹 페이지는 글자로 입력한다. 스타일시트를 적용하고 사용자가 눈으로 볼 때 "이것은 제목이다. 이것은 본문이다." 라는 식으로 구분이 가능하다. 예를 들어 네이버를 살펴보면

 

보자마자 어떤 것이 제목이고, 어떤 부분을 클릭해야 움직이고를 알 수 있다.

하지만 컴퓨터는 우리처럼 눈으로 레이아웃을 확인할 수 없기때문에 빠르게 구분할 수 없다.

이를 해결하고자 특정한 태그에 의미를 부여해서 웹 페이지를 만드는 시도가 시작되었고, 이를 시멘틱 웹이라고 표현한다.

 

시멘틱 구조 태그

태그이름	설명
header	헤더를 의미
nav	내비게이션을 의미
aside	사이드에 위치하는 공간을 의미
section	여러 중심 내용을 감싸는 공간을 의미
acticle	글자가 많이 들어가는 부분을 의미
footer	푸터를 의미

시멘틱 태그는 모두 div 태그와 같은 기능을 수행하는 태그이다. 하지만 태그는 검색 엔진이나 그 이외의 기계적인 동작들이 웹 페이지를 쉡게 이해할 수 있게 하는데 의미가 있다.

 

 

 

출처

• 모던 웹을 위한 HTML5 + CSS3 바이블 (윤인선 지음)