시맨틱 태그(Semantic Tag)란?
시맨틱(Semantic)이란 '의미의', '의미론적인' 이라는 뜻을 가지고 있습니다. 따라서 시맨틱 태그란 의미가 있는 태그를 말합니다. <div>와 기능은 똑같지만 영역을 의미있게 나눌 때 사용합니다.
시맨틱 태그의 종류
시맨틱 태그의 종류는 여러가지가 있는데 콘텐츠의 의미와 기능에 따라 적합한 태그를 선택해야 합니다.
대표적으로는 <header>, <main>, <nav>, <section>, <article>, <aside>, <footer>, <details>, <figure>가 있습니다.
<header>
- 페이지의 제목과 같은 소개 내용 포함되어 있어 탐색에 도움
- 로고 또는 아이콘, 저작권 정보, 검색 양식, 작성자 이름 등이 포함
<mian>
- <body>의 주요 콘텐츠, 사이트의 본격적인 내용
- 딱 한 번만 사용
<nav>
- 문서의 부분 중 현재 페이지 내 또는 다른 페이지로의 링크를 보여줌
- 메뉴, 목차 등에 사용
<section>
- 문서의 영역을 의미
- 기본 콘텐츠 내의 특정 주제 또는 부제목과 관련된 주제별 콘텐츠 그룹을 정의
<article>
- 블로그 게시물, 뉴스 기사, 제품 리뷰 등 독립적으로 배포하거나 재사용할 수 있는 글을 다루는 데 사용
<aside>
- 좌측과 우측 사이드 위치의 공간
- 주요 콘텐츠 이외의 참고가 될 수 있는 컨텐츠 표시
<footer>
- 문서 또는 섹션의 바닥글을 지정하며, 문서의 아래쪽에 위치
- 작성자에 대한 정보, 저작권 데이터 또는 관련 문서에 대한 링크 포함
<details>
- 사용자가 보거나 숨길 수 있는 추가 세부 정보를 정의하는 태그
- 사용자와 상호작용이 가능하다는 점이 특징이며, 사용자는 버튼을 통해 열고 닫기 가능
- 기본적으로 닫은 상태, 클릭하면 내용이 보이면서 확장되는 성질을 가짐
<figure>
- 이미지와 이미지 설명을 담고있는 영역
시맨틱 태그를 사용하는 이유
웹 접근성
사람들이 웹페이지를 탐색하고 페이지와 상호 작용하는 데 도움이 되는 화면 판독기, 키보드 또는 음성 명령과 같은 보조 기술에 대한 유용한 정보와 단서를 제공할 수 있어 웹 접근성에 용이합니다.
가독성
<div>가 많으면 많을수록 어디가 어디인지 찾기도 어렵기 때문에 시맨틱 태그를 사용해서 콘텐츠를 더 쉽고 빠르게 이해하고 소비할 수 있게 됩니다. 시맨틱 태그는 콘텐츠의 명확하고 일관된 흐름과 구조를 만드는데 도움이 되기 때문에 코드 가독성도 높이고 그에 따른 유지보수에도 용이합니다.
검색엔진 최적화
검색엔진이 시맨틱 태그를 통해 웹사이트의 정보를 빠르고 정확하게 파악하여 검색엔진 최적화(SEO)에 도움이 돼서 검색 결과 순위에 영향을 받습니다.
으라차차