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>⚠️ 모든 링크 묶음이 nav는 아님 (주요 이동만)
3) <main>
- 페이지의 핵심 콘텐츠
- 한 페이지에 하나만
<main>
<article>...</article>
</main>❌ header, footer, nav 포함 X
4) <section>
- 주제별 묶음
- 보통 제목(
h2~h6)이 있음
<section>
<h2>공지사항</h2>
</section>5) <article>
- 독립적으로 재사용 가능한 콘텐츠
- 글, 카드, 뉴스, 블로그 포스트
<article>
<h2>게시글 제목</h2>
<p>내용...</p>
</article>➡️ section 안에 article 가능
➡️ article 안에 section도 가능
6) <aside>
- 보조 콘텐츠
- 광고, 사이드바, 관련 글
<aside>
관련 글 목록
</aside>7) <footer>
- 바닥 정보
- 저작권, 작성자, 링크
<footer>
© 2026 My Site
</footer>4️⃣ section vs article 차이 (자주 헷갈림)
구분 | section | article |
독립성 | ❌ | ✅ |
재사용 | ❌ | ✅ |
목적 | 주제 구분 | 콘텐츠 단위 |
예 | 챕터, 파트 | 게시글, 카드 |
➡️ 혼자 떠도 말이 되면 article
5️⃣ 시멘틱 태그 vs div
div | 시멘틱 태그 |
의미 없음 | 의미 있음 |
스타일용 | 구조 + 의미 |
남용 쉬움 | 구조 명확 |
💡 스타일이 목적이면 div
💡 의미가 있으면 시멘틱
6️⃣ 올바른 페이지 구조 예시
<header>헤더</header>
<nav>메뉴</nav>
<main>
<section>
<article>글 1</article>
<article>글 2</article>
</section>
</main>
<aside>사이드바</aside>
<footer>푸터</footer>7️⃣ 시멘틱 태그 사용 시 주의점
- ❌ 태그 이름 때문에 스타일이 바뀌지 않음
➡️ CSS는 직접 작성해야 함
- ❌ 무조건 시멘틱만 쓰는 게 정답은 아님
➡️ 의미 없으면 div 사용
Share article