📚 HTML5 시맨틱 태그 완전 정복

🧠 시맨틱 태그란?

시맨틱(Semantic)이란 "의미론적인"이라는 뜻이에요.
즉, 시맨틱 태그(Semantic Tag)는 "이 태그가 어떤 역할을 하는지 그 이름만 보고도 알 수 있도록 만든 HTML 태그"를 의미해요.

과거에는 <div>, <span> 같은 의미 없는 태그만 써서 모든 구조를 만들었지만,
HTML5부터는 구조를 더 명확하게 설명하기 위해 <header>, <main>, <section>, <article>, <nav>, <aside> 같은 시맨틱 태그가 도입되었어요.

---

🔍 왜 시맨틱 태그를 사용할까?

이유	설명
✅ 의미 전달	코드만 봐도 어떤 역할을 하는지 알 수 있어요
✅ SEO 향상	검색 엔진이 구조를 더 잘 이해할 수 있어요
✅ 접근성 향상	스크린 리더 등의 보조 기기가 의미를 파악할 수 있어요
✅ 유지보수 편리	개발자나 협업자들이 코드를 이해하기 쉬워요

---

이제 본격적으로 자주 사용하는 시맨틱 태그들을 하나씩 살펴볼게요!

---

✅ 1. <main>

✔ 정의

웹페이지의 주요 콘텐츠 영역을 나타내요.
페이지마다 하나만 존재해야 하며, 사이트 전체에서 공통으로 반복되는 헤더, 네비게이션, 푸터 등은 포함하지 않아요.

✔ 사용 예시

<main>
  <h1>HTML 시맨틱 태그란?</h1>
  <p>시맨틱 태그는 의미를 갖는 태그입니다...</p>
</main>

✔ 어디에 사용될까?

• 블로그 본문
• 기사 내용
• 제품 상세 정보
• 서비스 소개 페이지의 핵심 설명

---

✅ 2. <section>

✔ 정의

하나의 주제(topic) 또는 기능 단위를 묶는 구획이에요.
보통 제목(<h1>~<h6>)을 포함하며, 논리적으로 관련된 콘텐츠 덩어리에 사용해요.

✔ 사용 예시

<section>
  <h2>시맨틱 태그의 장점</h2>
  <p>접근성과 SEO에 유리합니다...</p>
</section>

✔ 어디에 사용될까?

• 블로그에서 "관련 글", "댓글", "작성자 소개" 구역
• 포트폴리오에서 "프로젝트 목록", "기술 스택" 구역
• 메인 페이지에서 각각의 배너나 섹션 단위

---

✅ 3. <article>

✔ 정의

독립적으로 구분 가능한 콘텐츠 단위에 사용돼요.
그 자체로 의미를 갖고, 외부에 단독 발행이 가능한 콘텐츠에 적합해요.

✔ 사용 예시

<article>
  <h2>HTML5란?</h2>
  <p>HTML5는 최신 웹 표준입니다...</p>
</article>

✔ 어디에 사용될까?

• 블로그 글 하나
• 뉴스 기사
• 게시판 글
• 제품 리뷰, 유저 후기

---

✅ 4. <nav>

✔ 정의

내비게이션 링크 집합을 나타내요.
웹사이트의 메뉴, 목차, 페이지 이동 등 사용자 이동을 위한 링크 그룹에 사용해요.

✔ 사용 예시

<nav>
  <ul>
    <li><a href="/">홈</a></li>
    <li><a href="/blog">블로그</a></li>
    <li><a href="/contact">문의</a></li>
  </ul>
</nav>

✔ 어디에 사용될까?

• 사이트 상단 메뉴 바
• 사이드 메뉴바
• 문서의 목차 영역

---

✅ 5. <aside>

✔ 정의

보조적인 콘텐츠 영역이에요.
메인 콘텐츠와 직접적인 연결은 없지만, 관련 있거나 부가적인 정보를 제공하는 데 사용돼요.

✔ 사용 예시

<aside>
  <h3>관련 글</h3>
  <ul>
    <li>HTML5 기본 구조</li>
    <li>CSS 모듈이란?</li>
  </ul>
</aside>

✔ 어디에 사용될까?

• 블로그의 관련 글, 광고, 인기 글 목록
• 뉴스 사이트의 작가 소개
• 기술문서에서 태그 목록, 참고 링크

---

🎯 시맨틱 태그 요약 비교표

태그	용도	특징	대표 사용 위치
<main>	주요 콘텐츠	페이지당 1개만	본문, 핵심 콘텐츠
<section>	주제별 구획	제목 포함됨	페이지 단위 구간
<article>	독립적인 콘텐츠	단독 발행 가능	블로그 글, 게시물
<nav>	내비게이션 링크	링크 집합	메뉴바, 목차
<aside>	보조 콘텐츠	참고/광고/연관 내용	사이드바, 관련 글

---

✍️ 마무리 한 마디

시맨틱 태그는 단지 태그의 이름만 바꾸는 게 아니라,
의미를 명확히 하여 검색엔진 최적화(SEO)와 접근성 향상에도 큰 도움을 줍니다.

정확한 의미를 이해하고 적절한 위치에 사용하면,
구조적으로 탄탄하고 유지보수하기 쉬운 웹페이지를 만들 수 있어요! 💪