시맨택 태그

시맨틱 (Semantic) : 의미

• 기존 영역 분할에 주로 사용된던 div, span 등의 태그는 태그 이름만 봤을 때 나눈다는 것 이외의 의미를 파악할 수 없음
  ➡️ 태그만 봤을 때 태그의 목적을 알 수 없어 id 또는 class를 반드시 추가해야 했다.
  

⭐ 이런 문제점을 해결하고자
태그 이름만으로 어느정도 어떤 역할을 하는지 알 수 있고,
웹 접근성 (SEO)을 향상하는데 도움이 되는 시맨틱 태그가 추가됨.
(SEO = 검색 엔진 최적화)

            <header>
                <nav></nav>
                <h1>사이트이름<h1>
            <header>

            와

            <div>
                <nav></nav>
                <h1>사이트이름<h1>
            </div>

일 때 검색 속도가 다름 -> header일 때가 훨씬 빠르다

제공하는 태그

header: 문서의 제목, 머리말 영역
footer : 문서의 하단 부분, 꼬리말, 정보 작성 영역
nav : 나침반 역할(다른페이지, 사이트 이동)의 링크 작성 영역
main : 현재 문서의 주된 콘텐츠 작성 영역
section : 구역 구문을 위한 영역
- 자주사용 (div 대체용)
article : 본문과 독립된 콘텐츠를 작성하는 영역
aside : 사이드바(보통 양쪽), 광고 영역