[HTML] 시맨틱 태그(Semantic Tag)

📋 시맨틱 태그(Semantic Tag) 란?

semantic은 '의미론적인'이라는 뜻을 가진 형용사이다.
따라서 시맨틱 태그란 의미가 있는 태그를 말한다.

---

✔ 시맨틱 태그의 장점

1. 검색엔진최적화(SEO)
검색엔진은 태그를 기반으로 페이지 내 검색 키워드의 우선순위를 판단한다. 검색엔진이 태그의 목적에 부합하게 설계되어있는 구조의 사이트에서 효율적으로 정보를 파악할 수 있어 검색 결과의 노출에 유리할 수 있게 해준다.

2. 웹접근성
일반적인 브라우저에서는 차이가 없지만 시각장애인을 위한 웹서핑 프로그램 등과 같은 환경에서는 웹접근성을 향상시켜준다.

3. 유지보수
많은 div태그의 사용으로 관리가 어려워지는 문제점에서 벗어나 태그의 이름만 보고도 어떤 영역인지 바로 확인이 가능하며 특성에 맞는 작업을 구분하여 진행하기에 용이하다.

---

✔ 시맨틱 태그의 종류

• <header> : 머리글, 제목
• <nav> : 네비게이션, 목차, 리스트
• <aside> : 좌측과 우측 사이드 위치 공간
• <section> : 주제, 카테고리 별 섹션
• <article> : 기사, 블로그 등 첵스트 위주의 페이지 구성
• <footer> : 바닥글, 문서 하단
• <main> : 문서의 중심 주제, 주요 내용
• <figure> : 이미지, 다이어그램, 사진 등
• <figcaption> : <figure> 요소의 설명