HTML5 시맨틱 태그 완벽 가이드



시맨틱 태그를 사용하면 웹페이지의 구조를 명확하게 표현하여 접근성과 SEO를 개선할 수 있습니다.



언제 사용하나요?



  • 페이지 구조를 의미있게 표현할 때

  • SEO 최적화

  • 스크린 리더 접근성 향상

  • 유지보수성 향상



주요 시맨틱 태그


<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>시맨틱 웹</title>
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="/">홈</a></li>
                <li><a href="/about">소개</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <article>
            <h1>게시글 제목</h1>
            <section>
                <h2>섹션 1</h2>
                <p>내용...</p>
            </section>
            <aside>
                <p>관련 정보</p>
            </aside>
        </article>
    </main>

    <footer>
        <address>연락처: [email protected]</address>
        <p>© 2024 회사명</p>
    </footer>
</body>
</html>


태그별 용도













태그용도
<header>페이지/섹션 머리말
<nav>네비게이션 링크 그룹
<main>메인 콘텐츠 (페이지당 1개)
<article>독립적인 콘텐츠
<section>주제별 콘텐츠 그룹
<aside>부가 정보, 사이드바
<footer>페이지/섹션 꼬리말
<figure>이미지, 도표 + 설명
<time>날짜/시간 정보


figure와 figcaption


<figure>
    <img src="chart.png" alt="매출 그래프">
    <figcaption>2024년 월별 매출 추이</figcaption>
</figure>


time 태그


<time datetime="2024-01-15">2024년 1월 15일</time>
<time datetime="2024-01-15T14:30">오후 2:30</time>


article vs section



  • article: 독립적으로 배포/재사용 가능 (블로그 글, 뉴스 기사)

  • section: 주제별 그룹 (장, 절)



SEO 효과



  • 검색엔진이 페이지 구조 이해

  • 메인 콘텐츠 식별

  • 네비게이션 구조 파악