[HTML/CSS]시멘틱 태그

 

 

 

 

 

1. 시멘틱 태그란?

• 기존 영역 분할을 위해 사용했던 div, span 태그는 영역을 나눈다는 것 이외의 의미를 파악할 수 없다. 따라서 id, class 속성을 필수적으로 추가해야하는 번거로움이 있다.
• 이러한 문제를 해결하고자 태그의 이름만으로 어느정도 역할을 하는지 알 수 있고 추가적으로 웹 접근성 향상에 도움이 되는 시멘틱 태그(Semantic Tag, 의미단위 태그)가 HTML5에 추가되었다.
• 웹 접근성이란 지능정보화기본법에 따라 장애인이나 고령자가 웹사이트를 비장애인과 동등하게 접근하고 이용할 수 있도록 보장하는 기준이다.

*SEO(Search Engine Optimization): 검색엔진 최적화 - 검색엔진은 페이지를 읽을 때 HTML 문서를 파악하는데 이 때 본문보다는 시멘틱 태그의 header를 주로 참고한다.  - 시멘틱 태그를 사용할 경우 검색 노출에 유리하다

 

 

 

 

2. 시멘틱 태그의 종류

• <main>: 현재 문서의 주된 콘텐츠를 작성하는 영역
• <header>: 문서의 제목, 머리말 영역
• <footer>:문서의 하단, 꼬리말, 웹페이지내의 회사정보, 저작권 정보, 연락처등을 제공한다.
• <nav>: 웹페이지의 나침판 역할로 다른페이지, 사이트 이동의 링크 작성 영역이다. 즉, a태그들이 나열되어있다.
• <aside>: 사이드바, 광고, 배너 등을 표시하는 양쪽 영역
• <section>: 구역을 구분하기 위한 영역
• <article>: 본문과 독립된 콘텐츠를 작성하는 영역