반응형
HTML5부터 도입된 시맨틱(Semantic) 태그는 단순히 화면을 구성하는 것뿐 아니라,
의미 있는 구조를 가진 웹 문서를 만들기 위해 도입되었습니다.
이러한 태그를 활용하면 검색 엔진 최적화(SEO), 웹 접근성, 유지보수성까지 좋아집니다.
이번 포스팅에서는 HTML5의 주요 시맨틱 태그와 그 사용 예시를 자세히 살펴보겠습니다! ✅
🧠 1. 시맨틱 태그란?
- Semantic = 의미 있는
- 구조를 명확히 하여 사람이 보기에도, 기계(브라우저, 크롤러, 스크린리더)도 이해하기 좋게 만드는 태그입니다.
🏗️ 2. 주요 시맨틱 태그 설명
| 태그 | 역할 | 사용 위치 |
| <header> | 문서 또는 섹션의 헤더 | 페이지 최상단, 각 섹션 내 |
| <nav> | 네비게이션 메뉴 | 전체 레이아웃, 사이드바 |
| <main> | 문서의 주요 콘텐츠 | 페이지 1개당 1개만 |
| <section> | 독립적인 구역 | 컨텐츠 그룹핑 |
| <article> | 독립적으로 재사용 가능한 콘텐츠 | 블로그 글, 카드 등 |
| <aside> | 보조 콘텐츠 | 사이드바, 광고 영역 |
| <footer> | 문서 또는 섹션의 푸터 | 페이지 하단, 각 섹션 내 |
💡 3. 예제 코드
<body>
<header>
<h1>나의 블로그</h1>
<nav>
<ul>
<li><a href="#">홈</a></li>
<li><a href="#">카테고리</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>최신 게시물</h2>
<article>
<h3>HTML5 시맨틱 태그란?</h3>
<p>HTML5에서는 의미 있는 구조를...</p>
</article>
</section>
<aside>
<h3>광고</h3>
<p>광고 내용</p>
</aside>
</main>
<footer>
<p>© 2025 나의 블로그. All rights reserved.</p>
</footer>
</body>
✅ 4. 시맨틱 태그의 장점
| 장점 | 설명 |
| 🧭 접근성 | 시각장애인용 스크린리더가 내용을 더 잘 이해함 |
| 🔍 SEO | 검색 엔진이 더 정확히 페이지 구조를 분석 |
| 🔧 유지보수성 | 코드의 구조가 명확해져서 협업이나 유지 보수에 용이 |
| 🎨 스타일링 용이 | 의미 있는 영역별 CSS 구분이 쉬움 |
❗ 자주 하는 실수
- <div>만으로 전체 레이아웃을 구성
- <main> 태그를 여러 번 사용 (❌ 페이지당 1개만 허용!)
- <section>과 <article>을 구분 없이 사용
📝 마무리 정리
- 시맨틱 태그는 단지 보기 좋으라고 쓰는 게 아닙니다.
- SEO, 웹 접근성, 협업 모두를 고려한다면 필수입니다.
- HTML 구조 설계 시 항상 **“이 부분은 무슨 의미를 가지는가?”**를 생각해보세요.
반응형
'HTML, CSS' 카테고리의 다른 글
| 웹 접근성이란? A11y 기초 개념부터 실무 적용 팁까지 한눈에 정리! (0) | 2025.10.11 |
|---|---|
| SCSS @mixin 활용법 총정리! 실무에서 자주 쓰는 패턴까지 완벽 해설 (0) | 2025.10.06 |
| Flexbox & Grid 단축 속성 한눈에 보기! flex, grid, place-content까지 총정리 (0) | 2025.10.05 |
| Flexbox vs Grid 완전 정복! 언제 어떤 레이아웃을 써야 할까? (0) | 2025.10.04 |
| <label> 태그의 역할과 올바른 사용법 (0) | 2025.10.03 |