시맨틱 태그(Semantic Tag)
HTML로 웹 페이지를 만들다 보면 다양한 태그를 사용하게 됩니다. 이때 단순히 div나 span 같은 태그만을 사용한다면, 브라우저는 구조를 렌더링할 수 있지만 그 구조가 어떤 의미를 가지는지는 알기 어렵습니다. 시맨틱 태그(Semantic Tag)는 웹 페이지의 구조와 의미를 명확하게 정의해 주며, 검색 엔진 최적화(SEO), 접근성, 유지보수 측면에서도 큰 장점을 제공합니다. 이번 글에서는 시맨틱 태그의 정의와, 필요성, 그리고 어떻게 활용하는지를 알아보겠습니다.
1. 시맨틱 태그란?
시맨틱(Semantic)이란 단어는 "의미 있는"이라는 뜻을 가집니다. 시맨틱 태그는 이름 그대로 태그 자체에 의미가 담겨 있는 HTML 태그를 말합니다.
예를 들어, <div>는 어떤 내용을 담는다는 의미 외에는 특별한 정보가 없지만, <article>, <header>, <nav> 같은 시맨틱 태그는 각각 "글", "머릿말", "내비게이션"처럼 콘텐츠의 목적과 역할을 드러냅니다.
비시맨틱 태그 vs 시맨틱 태그
| 비시맨틱 태그 | 의미 |
| <div> | 단순 구획 |
| <span> | 인라인 요소 |
| 시맨틱 태그 | 의미 |
| <section> | 문서의 구획 |
| <article> | 독립된 콘텐츠 |
| <header> | 머릿말 영역 |
| <footer> | 바닥글 영역 |
| <nav> | 내비게이션 링크 집합 |
| <main> | 주요 콘텐츠 |
2. 왜 시맨틱 태그를 써야 할까?
a. 웹 접근성 향상
스크린 리더(Screen Reader) 사용자나 보조 기기를 사용하는 사람들은 시맨틱 태그 덕분에 콘텐츠 구조를 더 잘 이해할 수 있습니다.
b. SEO(검색 엔진 최적화)에 유리
검색 엔진은 페이지의 내용을 이해하기 위해 HTML 구조를 분석합니다. 시맨틱 태그는 검색 엔진이 페이지의 의미를 더 잘 파악하도록 도와줍니다.
c. 유지보수 용이
협업 시 시맨틱 태그는 코드의 가독성과 유지보수성을 높여줍니다. <div class="footer">보다 <footer>는 훨씬 직관적입니다.
3. 자주 사용하는 시맨틱 태그 정리
| 태그 | 설명 |
| <header> | 페이지나 섹션의 머릿말 |
| <footer> | 페이지나 섹션의 바닥글 |
| <nav> | 주요 내비게이션 링크 모음 |
| <main> | 페이지의 주된 콘텐츠 |
| <article> | 독립적으로 구성된 콘텐츠 (예: 블로그 글, 뉴스 등) |
| <section> | 페이지의 논리적 구획 |
| <aside> | 부가적인 콘텐츠 (예: 사이드바 등) |
| <figure>, <figcaption> | 이미지나 도표, 그 설명(캡션) |
4. 실전 예제
<body>
<header>
<h1>개발 블로그</h1>
<nav>
<a href="/">홈</a>
<a href="/about">소개</a>
</nav>
</header>
<main>
<article>
<h2>시맨틱 태그에 대하여</h2>
<p>이 글은 시맨틱 태그의 중요성에 대해 설명합니다.</p>
</article>
</main>
<footer>
<p>© 2025 개발 블로그. 모든 권리 보유.</p>
</footer>
</body>
5. 마무리하며
시맨틱 태그는 HTML5 이후 등장한 강력한 도구이며 웹 문서의 의미를 더 풍부하게 만들어 줍니다. 앞으로 마크업을 할 때, 시맨틱 태그를 적절히 활용하면 사용자 경험, 검색 최적화, 접근성까지 모두 챙길 수 있습니다.
CSS로 디자인할 때도 시맨틱 태그를 적극적으로 활용하고, 필요하다면 class를 병행해 스타일링을 세분화합시다.
'언어 > HTML' 카테고리의 다른 글
| [Canvas 태그] 그래픽을 위한 HTML의 도화지 (0) | 2025.04.21 |
|---|