[HTML] 시맨틱 태그를 사용하면 좋은 점

시맨틱 태그란?

<div> 태그와 기능은 똑같지만, 의미가 담겨있는 태그들을 '시맨틱 태그'라고 한다. 이를 통해 사이트의 구조(레이아웃)를 설계하기 위해 존재하며 각 부분의 역할과 기능을 전달하는 데 도움을 주는 역할을 한다. 즉, 태그에 의미를 부여함으로써 웹사이트 구조를 파악하기 쉽도록 도와주기 위해 만들어졌다. 엄격한 사용법이 있는 건 아니지만, 작성하는 사람의 의도가 중요하다.

태그 이름	용도
<header>	영역 위쪽에서 로고나 제목, 메뉴 같은 걸 담고 있는 도입부
<main>	사이트의 본격적인 내용으로 페이지에서 딱 한 번만 사용 가능
<footer>	영역 아래쪽에서 여러 가지 연락처나 관련 정보를 담고 있음
<article>	하나의 완성된, 독립적인 내용을 나타내는 영역 (블로그 게시물, 뉴스 기사, 제품 리뷰 등)
<section>	어떤 것의 일부분을 나타내는 영역
<figure>	이미지와 이미지 설명을 담고 있는 영역
<nav>	웹사이트의 메뉴, 탭, 탐색경로 등 탐색 링크가 포함된 영역
<aside>	옆에 위치하는 콘텐츠를 담는 영역 (사이드바)
<details>	사용자가 보거나 숨길 수 있는 추가 세부 정보를 정의하는 영역으로 사용자와 상호작용 가능, 기본적으로 닫은 상태에 있고, 클릭하면 내용이 보이면서 확장되는 성질을 가짐 (<summary>태그는 <details>에서 보이는 부분을 담당하고 <details>태그의 첫 번째 하위 항목이어야 함)

표 1. 시맨틱 태그 종류 이름과 용도

---

그럼 <div> 태그와 똑같은 기능을 하는 시맨틱 태그를 굳이 왜 사용하는 걸까?

시맨틱 태그를 사용하면 좋은 점

1. 검색 엔진 최적화(SEO) 향상

google, naver과 같은 검색엔진에서 웹사이트의 내용을 읽어올 때, 시맨틱 태그를 통해 구조화된 데이터를 제공하고 관련 키워드와 내용을 읽어 들인다. 이를 통해 검색엔진 상에서 웹사이트의 노출 순위를 높이고 더 많은 트래픽을 유도할 수 있다.

2. 접근성(Accessibility) 향상

사용자들이 웹페이지와 상호작용하는데 도움이 되는 화면 판독기, 키보드, 음성명령 등에 사용될 유용한 정보를 제공한다. 즉, 표 1에서 나온 용도에 맞게 사용이 가능하도록 정보를 제공한다는 의미이다. 또한 스크린 리더를 사용하는 신체적, 인지적 장애가 있는 사람들이 웹사이트를 효율적으로 이용할 수 있도록 도와준다.

3. 가독성 향상

해당 html 코드를 확인하는 모든 사람들이 웹사이트의 구조와 내용을 쉽고 빠르게 이해할 수 있도록 도와준다.