시맨틱 태그란?
시맨틱(Semantic)은 "의미 있는"이라는 뜻입니다. HTML 시맨틱 태그는 콘텐츠의 의미를 브라우저와 검색엔진에 알려주는 태그입니다.
<div>와 <span>은 아무 의미가 없습니다. 단순한 박스일 뿐이죠. 반면 <header>, <nav>, <article>은 "여기가 헤더", "여기가 내비게이션", "여기가 글 본문"이라는 의미를 전달합니다.
왜 시맨틱 태그를 써야 할까?
1. SEO (검색엔진 최적화)
구글 크롤러는 시맨틱 태그를 통해 페이지 구조를 이해합니다. <article> 안의 텍스트를 메인 콘텐츠로, <nav>를 네비게이션으로 인식합니다. div만으로 만든 사이트는 구글이 구조를 파악하기 어렵습니다.
2. 접근성 (Accessibility)
스크린 리더(시각장애인용 보조 도구)는 시맨틱 태그를 기반으로 페이지를 탐색합니다. <nav>를 만나면 "네비게이션 영역"이라고 알려주고, <main>을 만나면 "메인 콘텐츠로 이동"할 수 있습니다.
3. 코드 가독성
개발자가 코드를 읽을 때도 <header>가 <div class="header">보다 훨씬 직관적입니다.
주요 시맨틱 태그
`<header>` — 머리말
페이지나 섹션의 도입부입니다. 보통 로고, 네비게이션, 검색바 등을 포함합니다.
<header>
<h1>Compit</h1>
<nav>...</nav>
</header>`<nav>` — 내비게이션
주요 링크 모음입니다. 모든 링크 그룹에 쓰는 게 아니라, 사이트의 주요 네비게이션에만 사용합니다.
<nav>
<ul>
<li><a href="/">홈</a></li>
<li><a href="/learn">학습</a></li>
<li><a href="/ranking">랭킹</a></li>
</ul>
</nav>`<main>` — 메인 콘텐츠
페이지의 핵심 콘텐츠입니다. 페이지당 하나만 사용합니다. 헤더, 푸터, 사이드바를 제외한 본문 영역입니다.
<body>
<header>...</header>
<main>
<!-- 이 페이지의 핵심 내용 -->
</main>
<footer>...</footer>
</body>`<article>` — 독립된 콘텐츠
그 자체로 완전한 하나의 콘텐츠입니다. 블로그 포스트, 뉴스 기사, 댓글 하나하나가 article이 될 수 있습니다.
판단 기준: "이 콘텐츠를 떼어내서 다른 곳에 놓아도 의미가 통하는가?"
<article>
<h2>CSS Flexbox 완전 정복</h2>
<time datetime="2026-03-20">2026년 3월 20일</time>
<p>Flexbox는 CSS에서 1차원 레이아웃을 만드는...</p>
</article>`<section>` — 주제별 그룹
관련된 콘텐츠를 묶는 영역입니다. 보통 제목(<h2>~<h6>)을 포함합니다.
<main>
<section>
<h2>입문 챌린지</h2>
<div class="card-grid">...</div>
</section>
<section>
<h2>중급 챌린지</h2>
<div class="card-grid">...</div>
</section>
</main>`<aside>` — 보조 콘텐츠
메인 콘텐츠와 간접적으로 관련된 내용입니다. 사이드바, 관련 글 링크, 광고 등에 사용합니다.
<main>
<article>...</article>
<aside>
<h3>관련 글</h3>
<ul>...</ul>
</aside>
</main>`<footer>` — 바닥글
페이지나 섹션의 마무리 영역입니다. 저작권, 연락처, 사이트맵 링크 등을 포함합니다.
<footer>
<p>© 2026 Compit. All rights reserved.</p>
<nav>
<a href="/terms">이용약관</a>
<a href="/privacy">개인정보처리방침</a>
</nav>
</footer>`<figure>` + `<figcaption>` — 이미지/도표 + 설명
<figure>
<img src="layout.png" alt="Grid 레이아웃 예시">
<figcaption>CSS Grid로 만든 3열 레이아웃</figcaption>
</figure>`<time>` — 날짜/시간
<time datetime="2026-03-20">2026년 3월 20일</time>검색엔진이 날짜를 정확히 이해할 수 있도록 datetime 속성을 함께 씁니다.
올바른 페이지 구조 예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Flexbox 완전 정복 — Compit Blog</title>
</head>
<body>
<header>
<nav>
<a href="/">Compit</a>
<ul>
<li><a href="/learn">학습</a></li>
<li><a href="/blog">블로그</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h1>CSS Flexbox 완전 정복</h1>
<time datetime="2026-03-20">2026년 3월 20일</time>
<section>
<h2>Flexbox란?</h2>
<p>...</p>
</section>
<section>
<h2>기본 속성</h2>
<p>...</p>
</section>
</article>
<aside>
<h2>관련 챌린지</h2>
<ul>...</ul>
</aside>
</main>
<footer>
<p>© 2026 Compit</p>
</footer>
</body>
</html>div를 쓰면 안 되는 건가요?
아닙니다. div는 여전히 유용합니다. 스타일링을 위한 래퍼(wrapper)나 시맨틱 의미가 없는 그룹에는 div가 적합합니다.
규칙: 의미가 있으면 시맨틱 태그, 의미가 없으면 div.
정리
| 태그 | 용도 |
|---|---|
<header> | 페이지/섹션 머리말 |
<nav> | 주요 네비게이션 |
<main> | 핵심 콘텐츠 (1개만) |
<article> | 독립된 콘텐츠 단위 |
<section> | 주제별 콘텐츠 그룹 |
<aside> | 보조 콘텐츠 |
<footer> | 바닥글 |
<figure> | 이미지/도표 + 설명 |
<time> | 날짜/시간 |
시맨틱 태그를 제대로 쓰면 SEO, 접근성, 코드 가독성이 모두 좋아집니다.