[html5] 시멘틱 태그란?

시멘틱 태그

시멘틱 태그는 html5 부터 문서의 구조와 의미를 표현하기 위해서 도입되었다. 

 

장점

이런 시멘틱 태그를 이용하여 웹문서를 만들면

 

1. 문서를 이해하기 쉬움

2. 유지보수하기 용이함

3. 문서의 구조와 의미를 브라우저, 개발자 모두가 명확하게 알 수 있음

4. 웹에서 유저가 검색을 했을때 웹 페이지의 해당 코드를 찾아서 그 정보를 기반으로 의미있는 내용이 출력되도록 도와줌

 

즉, 기존의 non-semantic 요소들(<div>, <span>..)이 자신의 컨텐츠에 대해 아무것도 설명해주지 않았다면,

semantic 요소들(<form>, <table>, <article>..)은 자신의 컨텐츠를 명확하게 정의해준다.

 

ex) 이전에 <div class="header"> 방식으로 아무 의미가 없었던 div에 임의로 이름을 붙여서 개발자끼리 암묵적으로 사용하던 룰을 <header> 로 사용하면서 브라우저와 개발자 모두 더 명확히 이해할 수 있게 되었다.

 

html5에 새롭게 추가된 시멘틱 태그들

 

• <header> : 헤더를 의미한다.
• <nav> : 네비게이션을 의미한다.
• <aside> : 사이드에 위치하는 공간을 의미한다.
• <section> : 본문의 여러 내용(artivle)을 포함하는 공간을 의미한다.
• <article> : 본문의 주 내용이 들어가는 공간을 의미한다.
• <footer> : 문서 또는 섹션의 바닥글을 지정한다.