9. 시멘틱 태그(Semantic Tag)

1. 시멘틱 태그(Semantic Tag)

1️⃣ 시멘틱 태그란?

‘모양’이 아니라 ‘의미’를 설명하는 태그

<header><!-- 머리글 -->
<nav><!-- 내비게이션 -->
<main><!-- 핵심 콘텐츠 -->
<article><!-- 독립적인 콘텐츠 -->
<section><!-- 주제별 영역 -->
<footer><!-- 바닥글 -->

2️⃣ 시멘틱 태그의 필요성

1) 가독성

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

<header></header>
<nav></nav>

2) SEO (검색 엔진 최적화)

• 검색 엔진 → “여기가 본문”, “여기는 메뉴”, “이건 글이다”를 정확히 파악

• main, article, h1 조합이 특히 중요

3) 접근성 (웹 표준)

• 스크린 리더가 구조를 이해

• 시각장애인, 키보드 사용자에게 매우 중요

3️⃣ 대표적인 시멘틱 태그 정리

1) <header>

• 페이지 또는 섹션의 머리말

• 로고, 제목, 상단 메뉴 포함 가능

<header>
	<h1>My Blog</h1>
</header>

2) <nav>

• 내비게이션 전용

• 메뉴 링크 모음

<nav>
	<a href="/">Home</a>
	<a href="/about">About</a>
</nav>

3) <main>

• 페이지의 핵심 콘텐츠

• 한 페이지에 하나만

<main>
	<article>...</article>
</main>

4) <section>

• 주제별 묶음

• 보통 제목(h2~h6)이 있음

<section>
	<h2>공지사항</h2>
</section>

5) <article>

• 독립적으로 재사용 가능한 콘텐츠

• 글, 카드, 뉴스, 블로그 포스트

<article>
	<h2>게시글 제목</h2>
	<p>내용...</p>
</article>

6) <aside>

• 보조 콘텐츠

• 광고, 사이드바, 관련 글

<aside>
  관련 글 목록
</aside>

7) <footer>

• 바닥 정보

• 저작권, 작성자, 링크

<footer>
  © 2026 My Site
</footer>

4️⃣ section vs article 차이 (자주 헷갈림)

5️⃣ 시멘틱 태그 vs div

6️⃣ 올바른 페이지 구조 예시

<header>헤더</header>

<nav>메뉴</nav>

<main>
	<section>
		<article>글 1</article>
		<article>글 2</article>
	</section>
</main>

<aside>사이드바</aside>

<footer>푸터</footer>

7️⃣ 시멘틱 태그 사용 시 주의점

• ❌ 태그 이름 때문에 스타일이 바뀌지 않음
➡️ CSS는 직접 작성해야 함

• ❌ 무조건 시멘틱만 쓰는 게 정답은 아님
➡️ 의미 없으면 div 사용