시맨틱 태그 사용하기
페이지 정보
본문
구조를 살리는 HTML 작성법
웹 개발에서 HTML은 단순히 화면에 콘텐츠를 표시하는 도구가 아닙니다. HTML을 올바르게 작성하면 검색 엔진 최적화(SEO)와 접근성 향상에도 도움이 됩니다. 그 핵심이 바로 시맨틱 태그(Semantic Tag) 의 활용입니다.
시맨틱 태그란?
시맨틱(Semantic)은 “의미 있는”이라는 뜻을 가지고 있습니다. 따라서 시맨틱 태그란 단순히 레이아웃을 꾸미는 용도가 아니라, 콘텐츠의 의미와 구조를 명확히 설명하는 HTML 태그를 말합니다.
예를 들어, div만 사용해서 웹페이지를 만들 수도 있지만, 이렇게 작성하면 구조를 파악하기 어렵습니다.
<div class="top"></div>
<div class="menu"></div>
<div class="content"></div>
<div class="bottom"></div>
하지만 시맨틱 태그를 사용하면 훨씬 명확해집니다.
<header></header>
<nav></nav>
<main></main>
<footer></footer>
검색 엔진과 보조기기도 이 구조를 이해하기 쉬워집니다.
주요 시맨틱 태그 정리
-
<header>: 페이지나 섹션의 머리글을 표현합니다. -
<nav>: 내비게이션 메뉴를 표시합니다. -
<main>: 문서의 주요 콘텐츠 영역입니다. -
<article>: 독립적인 콘텐츠 단위를 나타냅니다. 블로그 글, 뉴스 기사 등에 적합합니다. -
<section>: 주제별로 묶은 콘텐츠 블록입니다. -
<aside>: 본문과 직접적인 관련은 없지만 부가적인 정보를 제공할 때 사용합니다. -
<footer>: 페이지나 섹션의 바닥글을 표현합니다. 저작권, 연락처 등이 들어갑니다.
코드 예시
<!DOCTYPE html><html lang="ko"><head> <meta charset="UTF-8"> <title>시맨틱 태그 예시</title></head><body> <header> <h1>내 블로그</h1> </header> <nav> <ul> <li><a href="/">홈</a></li> <li><a href="/about">소개</a></li> <li><a href="/contact">연락하기</a></li> </ul> </nav> <main> <article> <h2>첫 번째 글</h2> <p>이것은 시맨틱 태그를 활용한 예시입니다.</p> </article> <aside> <p>관련 글: HTML 기본 구조</p> </aside> </main> <footer> <p>© 2025 내 블로그</p> </footer></body></html>이렇게 작성하면, 사람뿐만 아니라 검색 엔진 크롤러도 페이지의 구조를 더 잘 이해할 수 있습니다.
실무에서의 장점
-
SEO 향상: 검색 엔진은 시맨틱 태그를 분석하여 콘텐츠의 중요도를 판단합니다.
-
접근성 개선: 화면 읽기 프로그램(Screen Reader)이 태그의 의미를 기반으로 콘텐츠를 전달합니다.
-
유지보수 용이: 시맨틱 태그만 봐도 페이지의 구조를 직관적으로 이해할 수 있습니다.