기술 정보 2025-01-10 읽는 시간: 6분

HTML5 시맨틱 태그 완벽 정리

시맨틱 태그란?

시맨틱(Semantic) 태그는 HTML5에서 도입된 의미론적 태그입니다. 단순히 스타일링을 위한 것이 아니라, 콘텐츠의 의미와 구조를 명확하게 표현하는 역할을 합니다.

주요 시맨틱 태그

<header>

페이지나 섹션의 머리말을 나타냅니다. 사이트 로고, 네비게이션, 검색 폼 등을 포함할 수 있습니다.

<header>
    <h1>사이트 제목</h1>
    <nav>네비게이션</nav>
</header>

<nav>

네비게이션 링크를 포함하는 섹션입니다. 메뉴, 목차, 인덱스 등을 표현합니다.

<main>

문서의 주요 콘텐츠를 나타냅니다. 한 페이지에 하나만 사용해야 하며, 문서의 고유한 콘텐츠를 포함합니다.

<article>

독립적으로 배포 가능한 콘텐츠를 나타냅니다. 블로그 포스트, 뉴스 기사, 댓글 등에 사용됩니다.

<section>

문서의 일반적인 섹션을 나타냅니다. 주제별로 콘텐츠를 그룹화할 때 사용합니다.

<aside>

주요 콘텐츠와 간접적으로 관련된 콘텐츠를 나타냅니다. 사이드바, 광고, 관련 링크 등에 사용됩니다.

<footer>

시맨틱 태그 사용의 장점

검색 엔진 최적화(SEO): 검색 엔진이 콘텐츠를 더 잘 이해할 수 있습니다
접근성 향상: 스크린 리더가 페이지 구조를 더 잘 파악할 수 있습니다
코드 가독성: 코드의 의미가 명확해져 유지보수가 쉬워집니다
유지보수성: 구조가 명확하여 수정이 용이합니다

실전 예제

<!DOCTYPE html>
<html lang="ko">
<head>
    <title>예제 페이지</title>
</head>
<body>
    <header>
        <h1>웹사이트 제목</h1>
        <nav>
            <ul>
                <li><a href="#">홈</a></li>
                <li><a href="#">소개</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <article>
            <h2>기사 제목</h2>
            <p>기사 내용...</p>
        </article>
    </main>
    
    <aside>
        <h3>관련 링크</h3>
        <ul>
            <li><a href="#">관련 기사 1</a></li>
        </ul>
    </aside>
    
    <footer>
        <p>© 2025 웹사이트</p>
    </footer>
</body>
</html>

마무리

HTML5 시맨틱 태그는 현대적인 웹 개발의 필수 요소입니다. 의미 있는 태그를 사용하여 더 나은 웹사이트를 만들어보세요.