HTML5 시맨틱 태그 완벽 가이드

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>

태그별 용도

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 효과

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


• 메인 콘텐츠 식별


• 네비게이션 구조 파악