시맨틱(semantic)이라는 '의미의', '의미론적인'라는 뜻을 가진 형용사입니다.
즉 시맨틱 태그는 의미를 부여한 태그라는 뜻이 됩니다.
시맨틱태그를 사용하는 이유
1. HTML 문서의 가독성과 유지보수가 쉽다. HTML 문서가 길어진다면 어디가 어느 부분인지, 어떤 영역인지 한눈에 파악하기가 힘들어진다. 하지만 시맨틱 태그를 활용하면 유지보수를 할 때나 다른 작업자가 코드를 파악하기가 보다 쉬워진다.
2. 웹 브라우저가 HTML만 보고도 상단(header), 본문(main), 하단(footer), 사이드(aside) 어느 영역인지 쉽게 알 수 있다. 이는 웹 접근성 시각에서 볼 때도 중요하게 사용 웹 접근성 시각으로는 시각장애인들이 사이트를 사용할 때 사용되는 화면의 텍스트를 읽어주는 스크린 리더기 등을 통해 활용될 수 있기 때문이다.
3. 검색엔진이 검색을 수행할 때 HTML내의 태그를 분석할 수 있다. 예를 들자면 검색엔진의 검색로봇에서는 <article> 태그가 사용된 콘텐츠를 재배포할 수 있는 콘텐츠로 인식한다. 반대로 <section> 태그로 묶은 콘텐츠는 재 배포를 금지하는 콘텐츠로 인식한다.
| 시맨틱 태그 | 설명 |
| header | 페이지의 머리글, 제목, 로고, 메뉴, 검색 관련, 유틸, 작성자의 이름 등으로 구성 - 하나 이상의 제목 요소(h1~h6)가 들어있어야 한다. - 굳이 페이지 상단에 오지않아도 된다. - section, footer 또 다른 header 요소는 들어갈 수 없다. |
| nav | 페이지의 내비게이션 영역. (사이트 내, 외부로 이동). 메뉴, 목차, 색인 등 |
| main | - 메인 컨텐츠 영역. - 문서 내에서 반드시 한 번만 사용 - 다른 header, footer, nav, article, section, aside의 하위로 작성할 수 없다. |
| section | 본문의 여러 내용(article)을 포함하는 부분을 의미 |
| article | 본문의 주 내용이 들어가는 부분을 의미 |
| aside | 간접 컨텐츠, 보조 컨텐츠를 의미하며, 대체적으로 옆에 위치하는 내용의 부분을 의미 |
| footer | - 하단 바닥글을 의미 - 주로 들어가는 정보는 회사정보, 저작권, 연락처 등이 있다. |