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

시맨틱 태그(Semantic tag)

사전적 정의로 시맨틱(Semantic)은 ‘의미 있는’이라는 뜻이다.

웹에서 쓰는 시맨틱 태그도 이와 비슷하게  "이 영역이 어떤 역할을 하는지"를 브라우저와 사람 모두에게 설명하는 태그를 말한다.

 

시멘틱 태그가 왜 중요할까?

• 접근성 개선: 스크린 리더가 페이지 구조를 더 잘 이해함
• 가독성 향상: 개발자가 HTML 구조를 보고도 빠르게 역할을 파악할 수 있음
• SEO에 도움: 검색 엔진이 콘텐츠를 더 잘 분석하고 평가할 수 있음

대표적인 시멘틱 태그

<header>	문서나 섹션의 머리말. 로고, 제목, 네비게이션 등이 들어간다.
<nav>	주요 탐색 링크 집합. 메뉴나 목차를 담는다.
<main>	페이지의 주요 콘텐츠. 한 페이지에 하나만 있어야 한다.
<section>	문서의 논리적인 구획. 주제를 가진 블록 단위로 나눌 때 사용.
<article>	독립적인 콘텐츠. 블로그 글, 뉴스 기사처럼 단독으로 의미 있는 내용.
<aside>	보조 정보. 사이드바, 광고, 관련 링크 등에 사용.
<footer>	문서나 섹션의 바닥글. 저작권, 연락처, 하단 링크 등을 담는다.
<figure>	이미지, 차트 등 독립적인 시각 콘텐츠를 담을 때 사용.
<figcaption>	<figure>의 설명 문구. 이미지 캡션 등에 사용.
<mark>	하이라이트 강조. 검색 결과 등에서 키워드 강조에 사용.
<time>	시간이나 날짜를 표현. 기계가 인식할 수 있는 시간 정보 제공.
<address>	연락처 정보. 이메일, 주소, 전화번호 등.
<details>	열고 닫을 수 있는 토글 박스. FAQ나 추가 정보에 유용.
<summary>	<details>의 제목 역할. 클릭하면 내용이 펼쳐진다.
<abbr>	약어를 설명. 툴팁처럼 전체 용어를 보여줄 수 있음.
<cite>	인용 출처. 책 제목, 작품명 등에 사용.
<code>	코드 조각을 표시. 개발 문서나 튜토리얼에 사용.
<kbd>	사용자 입력 키보드 명령어. 예: Ctrl + C

 

 

이미지로 보면 다음과 같다.

❌ div로만 작성한 코드

<div class="header"></div>
<div class="nav"></div>
<div class="content"></div>
<div class="footer"></div>

✅ 시맨틱 태그를 사용한 코드

<header></header>
<nav></nav>
<main></main>
<footer></footer> 

구조에 의미가 있다면 → 시맨틱 태그를 활용하자!