📝 HTML 시맨틱 태그: 의미 있는 HTML 작성하기

div만 쓰던 습관에서 벗어나야 할 때가 왔습니다.
시맨틱 태그를 사용하면 코드가 읽기 쉬워지고, 검색엔진과 스크린리더도 페이지를 더 잘 이해합니다!

---

1. 시맨틱 태그란? 💡

시맨틱(Semantic) 은 "의미 있는"이라는 뜻입니다.

시맨틱 태그는 태그 이름 자체가 그 안에 어떤 내용이 들어있는지 설명해주는 태그입니다.

<!-- 🔴 non-시맨틱: 이름만 봐서는 무슨 내용인지 모름 -->
<div>
  <div>로고</div>
  <div>메뉴</div>
</div>

<!-- 🟢 시맨틱: 이름만 봐도 역할이 명확함 -->
<header>
  <h1>로고</h1>
  <nav>메뉴</nav>
</header>

💡 비유로 이해하기 — 책에서 "제1장", "목차", "부록"처럼 구역 이름이 붙어 있는 것과 같습니다.
이름만 봐도 어떤 내용인지 바로 알 수 있죠!

---

2. non-시맨틱 vs 시맨틱 비교 ⚖️

🔴 non-시맨틱 방식 (div 투성이)

<div id="header">
  <div id="logo">My Site</div>
  <div id="nav">
    <div>홈</div>
    <div>소개</div>
  </div>
</div>

<div id="main">
  <div id="article">
    <div id="title">제목</div>
    <div id="content">본문 내용...</div>
  </div>
  <div id="sidebar">사이드바</div>
</div>

<div id="footer">푸터</div>

🟢 시맨틱 방식

<header>
  <h1>My Site</h1>
  <nav>
    <ul>
      <li><a href="#">홈</a></li>
      <li><a href="#">소개</a></li>
    </ul>
  </nav>
</header>

<main>
  <article>
    <h2>제목</h2>
    <p>본문 내용...</p>
  </article>
  <aside>사이드바</aside>
</main>

<footer>푸터</footer>

🍯 핵심 차이 — 두 코드는 화면에 똑같이 보이지만, 시맨틱 방식은 코드만 봐도 구조가 한눈에 파악됩니다!

---

3. 주요 시맨틱 태그 정리 🗂️

🏗️ 페이지 구조 태그

태그	역할	사용 예시
<header>	페이지 또는 섹션의 머리말	로고, 상단 메뉴, 타이틀
<nav>	네비게이션 링크 묶음	메뉴바, 사이드 메뉴, 목차
<main>	페이지의 핵심 콘텐츠	본문 영역 (페이지당 1개)
<footer>	페이지 또는 섹션의 꼬리말	저작권, 연락처, 하단 링크
<aside>	본문과 관련 있지만 부가적인 내용	사이드바, 광고, 관련 링크
<section>	주제별로 묶인 콘텐츠 구역	챕터, 탭 패널, 기능 구역
<article>	독립적으로 배포 가능한 콘텐츠	블로그 포스팅, 뉴스 기사, 댓글

📝 콘텐츠 태그

태그	역할	사용 예시
<h1> ~ <h6>	제목	페이지 제목, 섹션 제목
<p>	문단	본문 텍스트
<figure>	이미지 + 설명 묶음	사진, 다이어그램
<time>	날짜/시간	작성일, 이벤트 날짜
<address>	연락처 정보	이메일, 전화번호, 주소

---

4. 실습 예제: 페이지 레이아웃 잡기 🚀

가장 기본적인 웹 페이지 레이아웃입니다.

  <!-- 페이지 상단: 로고 + 메뉴 -->
  <header>
    <h1>My Blog</h1>
    <nav>
      <ul>
        <li><a href="#">홈</a></li>
        <li><a href="#">포스팅</a></li>
        <li><a href="#">소개</a></li>
      </ul>
    </nav>
  </header>

  <!-- 핵심 콘텐츠 영역 -->
  <main>

    <!-- 독립적인 글 하나 -->
    <article>
      <h2>첫 번째 포스팅</h2>
      <time datetime="2026-04-22">2026년 4월 22일</time>
      <p>본문 내용이 여기 들어갑니다.</p>
    </article>

    <!-- 관련 정보 / 사이드바 -->
    <aside>
      <h3>관련 포스팅</h3>
      <ul>
        <li><a href="#">관련글 1</a></li>
        <li><a href="#">관련글 2</a></li>
      </ul>
    </aside>

  </main>

  <!-- 페이지 하단: 저작권,연락처 -->
  <footer>
    <p>© 2026 My Blog.</p>
    <address>
      문의: <a href="mailto:hello@myblog.com">hello@myblog.com</a>
    </address>
  </footer>

</body>
</html>

🔍 레이아웃 구조 한눈에 보기

┌──────────────────────────────────────┐
│  <header>                         │
│    <h1>My Blog</h1>               │
│   <nav> 홈 · 포스팅 · 소개</nav>   │ 
└──────────────────────────────────────┘

┌──────────────────────────────────────┐
│  <main>                           │
│  ┌─────────────────┐ ┌────────────┐  │
│  │  <article>     │ │  <aside> │   │
│  │                │ │          │   │
│  │  <h2>제목</h2>  │ │  관련 글 │   │
│  │  <time>날짜     │ │  목록    │   │
│  │  <p>본문...</p> │ │          │  │
│  └─────────────────┘ └────────────┘  │
└──────────────────────────────────────┘

┌──────────────────────────────────────┐
│  <footer>                         │
│    © 2026 My Blog.                │
│    <address> hello@myblog.com     │
└──────────────────────────────────────┘

---

5. 시맨틱 태그를 써야 하는 이유 🔍

✅ 1. SEO (검색엔진 최적화)

검색엔진은 <header>, <main>, <article> 등을 보고
"이 페이지가 무엇에 관한 내용인지" 판단합니다.
div만 가득한 페이지보다 검색 순위가 높아집니다.

✅ 2. 접근성 (Accessibility)

시각 장애인이 사용하는 스크린리더는
<nav>를 만나면 "여기는 메뉴 영역입니다"라고 읽어줍니다.
div로 만들면 그냥 내용을 죽 읽어버립니다.

✅ 3. 코드 가독성

<!-- 어디가 어딘지 한눈에 보임 -->
<header> ... </header>
<main> ... </main>
<footer> ... </footer>

<!-- 어디가 어딘지 전혀 모름 -->
<div id="a"> ... </div>
<div id="b"> ... </div>
<div id="c"> ... </div>

⚠️ section vs article 헷갈린다면?

비교	section	article
의미	주제별 구역 묶음	독립적인 완결된 콘텐츠
단독 배포	❌ 불가	✅ 가능 (RSS, 공유 등)
예시	탭 패널, 기능 구역	블로그 글, 뉴스 기사, 댓글

💡 판단 기준 — 이 내용을 떼어내서 다른 곳에 단독으로 올릴 수 있다면 article, 그렇지 않으면 section!

---

6. 📖 핵심 요약

태그	역할
<header>	페이지/섹션 상단 머리말
<nav>	네비게이션 메뉴
<main>	페이지 핵심 콘텐츠 (1개만)
<article>	독립적인 완결 콘텐츠
<section>	주제별 구역 묶음
<aside>	부가적인 사이드 콘텐츠
<footer>	페이지/섹션 하단 꼬리말

시맨틱 태그를 쓰는 3가지 이유
1. 🔍 SEO — 검색엔진이 페이지 구조를 더 잘 파악
2. ♿ 접근성 — 스크린리더가 구역을 정확히 안내
3. 👀 가독성 — 코드만 봐도 레이아웃 구조 파악 가능