💡 퀵 접속: htm.kr/semantics

HTML5 시맨틱 태그 사용법

1. 시맨틱 태그란?

시맨틱 태그는 HTML 문서의 구조와 의미를 명확하게 표현하는 태그입니다. header, footer, nav, main, article, section, aside 등의 태그를 사용하여 웹 페이지의 각 영역을 의미있게 구분합니다.

2. 기본 구조

기본 레이아웃 구조

<body>
    <header>
        <nav>
            <ul>
                <li><a href="/">홈</a></li>
                <li><a href="/about">소개</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <article>
            <h1>제목</h1>
            <section>
                <h2>섹션 제목</h2>
                <p>내용...</p>
            </section>
        </article>

        <aside>
            <h2>관련 링크</h2>
            <ul>
                <li><a href="#">링크 1</a></li>
                <li><a href="#">링크 2</a></li>
            </ul>
        </aside>
    </main>

    <footer>
        <p>© 2024 웹사이트. All rights reserved.</p>
    </footer>
</body>

3. 각 태그의 역할

태그	설명	사용 예시
header	페이지나 섹션의 머리말	<header>로고, 네비게이션</header>
footer	페이지나 섹션의 푸터	<footer>저작권 정보</footer>
nav	네비게이션 메뉴	<nav>메뉴 목록</nav>
main	주요 콘텐츠 영역	<main>본문 내용</main>
article	독립적인 콘텐츠	<article>블로그 포스트</article>
section	관련 콘텐츠 그룹	<section>관련 내용</section>
aside	부가적인 콘텐츠	<aside>사이드바</aside>

4. 실제 사용 예제

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>블로그</title>
</head>
<body>
    <header class="site-header">
        <div class="logo">
            <h1>블로그 제목</h1>
        </div>
        <nav class="main-nav">
            <ul>
                <li><a href="/">홈</a></li>
                <li><a href="/posts">글 목록</a></li>
                <li><a href="/about">소개</a></li>
            </ul>
        </nav>
    </header>

    <main class="content">
        <article class="post">
            <header class="post-header">
                <h2>포스트 제목</h2>
                <div class="post-meta">
                    <time datetime="2024-01-01">2024년 1월 1일</time>
                    <span class="author">작성자: 홍길동</span>
                </div>
            </header>

            <section class="post-content">
                <h3>첫 번째 섹션</h3>
                <p>포스트 내용...</p>
            </section>

            <section class="post-content">
                <h3>두 번째 섹션</h3>
                <p>추가 내용...</p>
            </section>

            <footer class="post-footer">
                <div class="tags">
                    <span class="tag">#태그1</span>
                    <span class="tag">#태그2</span>
                </div>
            </footer>
        </article>

        <aside class="sidebar">
            <section class="widget">
                <h3>최근 글</h3>
                <ul>
                    <li><a href="#">최근 글 1</a></li>
                    <li><a href="#">최근 글 2</a></li>
                </ul>
            </section>

            <section class="widget">
                <h3>카테고리</h3>
                <ul>
                    <li><a href="#">카테고리 1</a></li>
                    <li><a href="#">카테고리 2</a></li>
                </ul>
            </section>
        </aside>
    </main>

    <footer class="site-footer">
        <div class="footer-content">
            <p>© 2024 블로그. All rights reserved.</p>
            <nav class="footer-nav">
                <ul>
                    <li><a href="/privacy">개인정보처리방침</a></li>
                    <li><a href="/terms">이용약관</a></li>
                </ul>
            </nav>
        </div>
    </footer>
</body>
</html>

💡 주의사항

각 태그의 의미에 맞게 사용합니다.
불필요한 중첩을 피합니다.
접근성을 고려한 마크업을 사용합니다.
반응형 디자인을 고려합니다.
검색 엔진 최적화(SEO)를 고려합니다.

5. 스타일링 예제

<style>
    /* 기본 레이아웃 */
    body {
        margin: 0;
        padding: 0;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
    }

    /* 헤더 스타일 */
    .site-header {
        background: #fff;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        padding: 1rem;
    }

    .main-nav ul {
        display: flex;
        gap: 1rem;
        list-style: none;
        padding: 0;
    }

    /* 메인 콘텐츠 */
    .content {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 2rem;
        padding: 2rem;
        flex: 1;
    }

    /* 포스트 스타일 */
    .post {
        background: #fff;
        padding: 2rem;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .post-header {
        margin-bottom: 2rem;
    }

    .post-meta {
        color: #666;
        font-size: 0.9rem;
    }

    /* 사이드바 스타일 */
    .sidebar {
        background: #f5f5f5;
        padding: 1rem;
        border-radius: 8px;
    }

    .widget {
        margin-bottom: 2rem;
    }

    /* 푸터 스타일 */
    .site-footer {
        background: #333;
        color: #fff;
        padding: 2rem;
        margin-top: auto;
    }

    .footer-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .footer-nav ul {
        display: flex;
        gap: 1rem;
        list-style: none;
        padding: 0;
    }

    .footer-nav a {
        color: #fff;
        text-decoration: none;
    }

    /* 반응형 스타일 */
    @media (max-width: 768px) {
        .content {
            grid-template-columns: 1fr;
        }

        .main-nav ul {
            flex-direction: column;
        }

        .footer-content {
            flex-direction: column;
            text-align: center;
            gap: 1rem;
        }
    }
</style>

6. 성능 최적화 팁

불필요한 중첩을 피합니다.
적절한 시맨틱 태그를 선택합니다.
CSS로 스타일링을 처리합니다.
접근성을 고려한 마크업을 사용합니다.
반응형 디자인을 적용합니다.

7. 검증 및 테스트

시맨틱 태그가 올바르게 사용되었는지 확인하는 방법:

W3C 마크업 검증 서비스 사용
다양한 브라우저에서 테스트
접근성 검사 도구 사용
반응형 디자인 테스트
스크린 리더 테스트