티스토리 뷰

Frontend/HTML

검색 엔진이 좋아하는 사이트의 비밀: 시맨틱 태그(<header>, <main>, <footer>) 제대로 쓰는 법

미니임 2026. 2. 9. 23:38

 

웹사이트를 만들 때 단순히 '예쁘게' 만드는 것에만 집중하고 계시지는 않나요? 구글이나 네이버 같은 검색 엔진이 우리 사이트의 내용을 정확히 파악하게 하려면, 코드 자체에 '의미'를 담아야 합니다. 이것이 바로 **시맨틱 태그(Semantic Tags)**를 써야 하는 이유입니다.

오늘은 가장 기본이 되면서도 중요한 3대장, <header>, <main>, <footer>를 제대로 사용하는 방법을 풍부한 예제와 함께 알아보겠습니다.

1. 왜 <div>만 쓰면 안 될까요?

과거에는 모든 레이아웃을 <div> 태그로만 만들었습니다. 하지만 검색 엔진 로봇(Crawler)의 입장에서는 모든 요소가 똑같은 <div>로 보이면 어디가 제목이고 어디가 핵심 내용인지 구분하기 어렵습니다.

  • 비시맨틱(Non-semantic): <div>, <span> (내용에 대한 정보가 없음)
  • 시맨틱(Semantic): <header>, <main>, <article> (태그만 봐도 내용의 역할을 알 수 있음)

시맨틱 태그를 잘 쓰면 SEO(검색 엔진 최적화) 점수가 올라갈 뿐만 아니라, 시각 장애인이 사용하는 스크린 리더가 사이트를 더 정확하게 읽어줄 수 있어 웹 접근성도 향상됩니다.

2. <header>: 사이트의 얼굴과 이정표

<header>는 주로 도입부나 탐색을 위한 그룹을 묶을 때 사용합니다.

주요 특징

  • 보통 사이트 최상단에 위치하며 로고, 검색창, 내비게이션(<nav>)을 포함합니다.
  • 주의: 한 페이지 내에서 꼭 한 번만 써야 하는 것은 아닙니다. <article>이나 <section> 내부에서도 해당 구역의 헤더로 사용할 수 있습니다.

[잘못된 예시 vs 올바른 예시]

<!-- 비추천: 의미 없는 div 사용 -->
<div class="top-area">
  <h1>내 블로그</h1>
  <ul>
    <li>메뉴1</li>
  </ul>
</div>

<!-- 추천: 시맨틱 태그 사용 -->
<header>
  <h1>내 블로그</h1>
  <nav>
    <ul>
      <li><a href="/">홈</a></li>
      <li><a href="/about">소개</a></li>
    </ul>
  </nav>
</header>

3. <main>: 페이지의 주인공

<main> 태그는 해당 문서의 독소적인(Unique) 핵심 본문을 담습니다.

주요 특징

  • 페이지당 단 한 번만 사용해야 합니다. (가장 중요한 규칙!)
  • 사이드바, 로고, 저작권 정보 등 모든 페이지에 공통으로 들어가는 내용은 포함하지 않습니다.

[실전 예제: 블로그 포스트 페이지]

<header>
  <!-- 사이트 공통 헤더 -->
</header>

<main>
  <article>
    <h2>시맨틱 태그 완벽 가이드</h2>
    <p>오늘의 본문 내용이 여기에 들어갑니다...</p>
  </article>
</main>

<footer>
  <!-- 사이트 공통 푸터 -->
</footer>

4. <footer>: 마무리와 책임 정보

<footer>는 문서나 섹션의 가장 아래쪽에 위치하며, 부가적인 정보를 담습니다.

포함되는 정보

  • 저작권(Copyright) 정보
  • 연락처(Contact) 정보
  • 사이트맵
  • 관련 문서 링크나 소셜 미디어 아이콘

[풍부한 구성 예제]

<footer>
  <section class="footer-info">
    <p>&copy; 2024 My Tech Blog. All rights reserved.</p>
    <address>
      이메일: <a href="mailto:admin@example.com">admin@example.com</a>
    </address>
  </section>
  <nav>
    <ul>
      <li><a href="/privacy">개인정보처리방침</a></li>
      <li><a href="/terms">이용약관</a></li>
    </ul>
  </nav>
</footer>

5. 한눈에 보는 종합 구조 예시

이제 배운 내용을 바탕으로 가장 이상적인 웹사이트 구조를 코드로 짜보겠습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <title>시맨틱 태그 예제</title>
</head>
<body>
    <!-- 1. 사이트 전체 헤더 -->
    <header>
        <h1>로고</h1>
        <nav>메인 메뉴</nav>
    </header>

    <!-- 2. 이 페이지만의 고유 본문 -->
    <main>
        <section>
            <h2>최신 뉴스</h2>
            <article>
                <!-- 각 기사 내부에도 작은 header를 쓸 수 있습니다 -->
                <header>
                    <h3>기사 제목 A</h3>
                </header>
                <p>기사 본문 내용...</p>
            </article>
        </section>
    </main>

    <!-- 3. 사이트 전체 푸터 -->
    <footer>
        <p>사업자 정보 및 저작권 표시</p>
    </footer>
</body>
</html>

요약: 이것만은 기억하세요!

  1. <header>: 페이지 상단뿐만 아니라 개별 섹션의 도입부에도 쓸 수 있다.
  2. <main>: 한 페이지에 딱 한 번만! 핵심 내용만 담는다.
  3. <footer>: 문서 하단에 저작권, 연락처 등 부가 정보를 담는다.

의미 있는 태그 사용은 검색 엔진에게 "내 사이트는 정돈된 양질의 정보를 담고 있다"라고 말하는 가장 쉬운 방법입니다. 지금 바로 여러분의 블로그나 사이트 코드를 점검해 보세요!

반응형

'Frontend > HTML' 카테고리의 다른 글

하이퍼링크 <a> 태그 활용 백서: 새 창 열기, 페이지 내 이동(앵커), 전화/메일 연결  (0) 2026.02.25
HTML 목록 태그 완벽 가이드: <ul>, <ol>, <li>와 중첩 리스트 활용법  (0) 2026.02.09
텍스트 태그 총정리: <h1>부터 <small>까지, 의미에 맞는 올바른 태그 선택 가이드  (0) 2026.02.09
구글 검색 노출을 결정하는 메타 태그(Meta Tag)와 오픈 그래프(OG) 최적화 가이드  (0) 2026.02.09
웹 개발의 첫걸음: HTML5 문서의 기본 구조와 필수 선언부(!DOCTYPE) 완벽 정리  (0) 2026.02.09
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2026/04   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30
글 보관함