홈 태그연습장

6. 시맨틱 태그

6.1 시맨틱 태그란?

시맨틱 태그의 의미와 중요성

<!-- 시맨틱하지 않은 구조 -->
<div id="header">
    <div id="nav">
        <ul>
            <li><a href="#">홈</a></li>
            <li><a href="#">소개</a></li>
        </ul>
    </div>
</div>

<!-- 시맨틱한 구조 -->
<header>
    <nav>
        <ul>
            <li><a href="#">홈</a></li>
            <li><a href="#">소개</a></li>
        </ul>
    </nav>
</header>

시맨틱 태그의 장점:

  • 검색 엔진 최적화(SEO) 향상
  • 웹 접근성 개선
  • 코드의 가독성 향상
  • 유지보수 용이성 증가

6.2 주요 시맨틱 태그

기본적인 시맨틱 태그 구조

<!DOCTYPE html>
<html>
<head>
    <title>시맨틱 태그 예제</title>
</head>
<body>
    <header>
        <h1>웹사이트 제목</h1>
        <nav>
            <ul>
                <li><a href="#">메뉴1</a></li>
                <li><a href="#">메뉴2</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <article>
            <h2>주요 콘텐츠</h2>
            <p>본문 내용...</p>
        </article>

        <aside>
            <h3>사이드바</h3>
            <p>부가 정보...</p>
        </aside>
    </main>

    <footer>
        <p>저작권 정보</p>
    </footer>
</body>
</html>

주요 시맨틱 태그 설명:

  • <header>: 페이지나 섹션의 머리말
  • <nav>: 네비게이션 메뉴
  • <main>: 문서의 주요 콘텐츠
  • <article>: 독립적인 콘텐츠
  • <section>: 관련된 콘텐츠의 그룹
  • <aside>: 부가적인 콘텐츠
  • <footer>: 페이지나 섹션의 푸터

6.3 시맨틱 태그 활용 예제

블로그 포스트 구조

<article>
    <header>
        <h2>블로그 포스트 제목</h2>
        <div class="post-meta">
            <time datetime="2024-03-20">2024년 3월 20일</time>
            <span class="author">작성자: 홍길동</span>
        </div>
    </header>

    <section class="post-content">
        <p>포스트 내용...</p>
    </section>

    <footer>
        <div class="tags">
            <span>태그:</span>
            <a href="#">HTML</a>
            <a href="#">CSS</a>
        </div>
    </footer>
</article>

실제 브라우저에서 보여지는 모습:

블로그 포스트 제목

작성자: 홍길동

포스트 내용...

6.4 시맨틱 태그의 중첩

복잡한 구조의 시맨틱 태그

<main>
    <article>
        <header>
            <h1>기사 제목</h1>
        </header>

        <section>
            <h2>첫 번째 섹션</h2>
            <p>섹션 내용...</p>
        </section>

        <section>
            <h2>두 번째 섹션</h2>
            <p>섹션 내용...</p>
            <aside>
                <p>관련 정보...</p>
            </aside>
        </section>

        <footer>
            <p>기사 하단 정보</p>
        </footer>
    </article>
</main>

시맨틱 태그 중첩 규칙:

  • 각 섹션은 명확한 제목(h1~h6)을 가져야 함
  • article은 독립적인 콘텐츠를 포함
  • section은 관련된 콘텐츠를 그룹화
  • aside는 부가적인 정보를 포함

6.5 실습 과제

다음 요구사항을 만족하는 웹 페이지를 만들어보세요:

  1. 헤더에 로고와 네비게이션 메뉴 포함
  2. 메인 콘텐츠 영역에 여러 개의 article 포함
  3. 각 article에 header, section, footer 포함
  4. 사이드바에 관련 링크와 광고 포함
  5. 푸터에 저작권 정보와 소셜 미디어 링크 포함

예시 결과:

웹사이트 로고

첫 번째 기사

기사 내용...

작성자: 홍길동

© 2024 웹사이트. All rights reserved.

6.6 퀴즈

다음 문제를 풀어보세요:

  1. 시맨틱 태그를 사용하는 주요 이유는 무엇인가요?
  2. 웹사이트의 네비게이션 메뉴를 만들 때 사용하는 시맨틱 태그는 무엇인가요?
  3. 독립적인 콘텐츠를 포함할 때 사용하는 시맨틱 태그는 무엇인가요?
  4. 웹사이트의 주요 콘텐츠를 감싸는 시맨틱 태그는 무엇인가요?
  5. 부가적인 정보를 포함할 때 사용하는 시맨틱 태그는 무엇인가요?

정답:

  1. 검색 엔진 최적화, 웹 접근성, 코드 가독성 향상
  2. <nav> 태그
  3. <article> 태그
  4. <main> 태그
  5. <aside> 태그