HTML5 시맨틱 태그(Semantic Tags)

Semantic Elements  A.K.A Semantic Tags

흔히 시맨틱 태그라고 불리는 시맨틱 엘리먼츠는 사전적으로는 '의미를 포함하고 있는 요소'라는 뜻이다

 

 

시맨틱 태그를 사용해야 하는 이유

 

 기존에는 div 나 span 에 id 와 class 를 부여하여 섹션을 나누고 다른 태그와 구분을 하는 방식을 많이 사용하였고,

지금도 오래된 웹페이지들은 div로 도배된 모습을 많이 볼 수 있다.

 훗날 수정할 부분이 생겼을때 수많은 div안에서 원하는 class 를 찾는 것은 쉽지 않다. 

 협업을 위해서나 유지보수를 대비하기 위해서도 시맨틱 태그를 사용하여 HTML을 작성하는 습관을 들여야 한다.

 

w3school.com 출처 HTML5의 새로운 시맨틱 태그

 

 

• article
• aslide
• detail
• pigcaption
• figure
• footer
• header
• main
• mark
• nav
• section
• summary
• time

header
nav
section	aside
article
footer

section 태그

섹션 태그는 주제를 가지고 있는 콘텐츠들의 집합이다. 웹페이지는 보통 크게 head, section, footer로 이루어지며
section 안에 여려 주제의 article 들이 들어가게 된다.

article 태그

article 태그는 자주적이고, 독립적인 내용을 담고 있다.
주로 section 안에 위치하며 문서의 내용은 blog 컨텐츠, 논설, 뉴스등이 있다.

header 태그

header 태그는 문서나 section 의 제목을 지정하며, 문서를 소개하는 역할로 사용된다.

footer 태그

footer 태그는 문서나 section 의 바닥글을 지정할때 사용된다.
바닥글은 일반적으로 문서의 작성자, 저작권 정보, 사용 약관 링크, 연락처 정보 등을 포함한다.

nav 태그

nav 태그는 찾고자 하는 정보를 연결해주는 네비게이션을 정의하고자 할때 쓰인다.

aside 태그

사이드바와 같은 본문 이외의 내용을 지정할때 사용된다.