시맨틱 태그(Semantic, 의미 -> 의미있는 태그)
- 기존 영역 분할에 주로 사용되던 div,span 등의 태그는
나눈다는 것 이외의 의미를 파악하기 어려움.
-> 태그만 봤을 때 태그ㅡ의 목적을 알 수 없어
id 또는 class 반드시 추가해야 한다.
이런 문제점을 해결하고자
1. 태그 이름만으로 어느정도 어떤 역할을 하는지 알 수 있고
2. 웹 접근성(SEO)에 향상에
도움이 되는 시맨틱 태그가 추가됨
[제공하는 태그]
header 태그 : 문서의 제목, 머리말 영역
footer 태그 : 문서의 하단 부분, 꼬리말, 정보 작성 영역
nav 태그 : 나침반 역할(다른 페이지, 사이트 이동)의 링크 작성 영역
main 태그 : 현재 문서의 주된 콘텐츠 작성 영역
section 태그 : 구역 구문을 위한 영역
article 태그 : 본문과 독립된 콘텐츠를 작성하는 영역(작은 토막)
aside 태그 : 사이드바(보통 양쪽), 광고영역
예시
<body>
<main>
<header>
<!-- 클릭시 메인 페이지로 이동하는 로고 -->
<section></section>
<!-- 검색 영역 -->
<section></section>
<!-- 공백 -->
<section></section>
<header>
<nav>
<ul>
<li><a href="" target="_blank">공지사항</a></li>
<li><a href="" target="_blank">자유 게시판</a></li>
<li><a href="" target="_blank">질문 게시판</a></li>
</ul>
</nav>
<!-- 콘텐츠 작성 영역 -->
<section class="content">
<section class="content-1"></section>
<section class="content-2"></section>
</main>
<footer>
<article>
<a href="#">이용약관</a>
</article>
</footer>
</body>
안녕하세요!