HTML5 시멘틱 태그 정리

#None

HTML5 시멘틱 태그란?

HTML5 시멘틱(Semantic) 태그는 태그 자체의 의미를 통해 문서 구조와 역할을 명확하게 표현하기 위해 도입된 태그입니다.

기존의 <div> 중심 마크업은 구조 파악이 어렵고 의미 전달이 제한적이었으나,
시멘틱 태그를 사용하면 브라우저, 검색 엔진, 스크린 리더가 문서를 더 정확하게 이해할 수 있습니다.

HTML5 시멘틱 태그란?

HTML5 시멘틱(Semantic) 태그는 태그 자체의 의미를 통해 문서 구조와 역할을 명확하게 표현하기 위해 도입된 태그입니다.

기존의 <div> 중심 마크업은 구조 파악이 어렵고 의미 전달이 제한적이었으나,
시멘틱 태그를 사용하면 브라우저, 검색 엔진, 스크린 리더가 문서를 더 정확하게 이해할 수 있습니다.

시멘틱 태그의 필요성

  • 문서 구조의 명확성 향상
  • 검색 엔진 최적화(SEO)에 유리
  • 접근성(Accessibility) 개선
  • 협업 및 유지보수 용이성 증가

시멘틱 태그와 비시멘틱 태그 비교

구분비시멘틱 태그시멘틱 태그
의미 전달없음있음
예시<div>, <span><header>, <nav>
가독성낮음높음
SEO불리유리
접근성제한적우수

주요 HTML5 시멘틱 태그 종류

  • 문서 또는 섹션의 머리글 영역
  • 로고, 제목, 검색창, 네비게이션 포함 가능
<header>
  <h1>My Blog</h1>
</header>
  • 주요 내비게이션 링크 그룹
  • 사이트 메뉴, 목차 등에 사용
<nav>
  <ul>
    <li><a href="/">Home</a></li>
  </ul>
</nav>

<main>

  • 문서의 핵심 콘텐츠 영역
  • 문서 내 한 번만 사용
<main>
  <article>...</article>
</main>

<section>

  • 주제별 콘텐츠 그룹
  • 보통 제목(<h1>~<h6>)을 포함
<section>
  <h2>소개</h2>
</section>

<article>

  • 독립적으로 재사용 가능한 콘텐츠
  • 뉴스, 블로그 글, 게시물 등에 적합
<article>
  <h2>게시글 제목</h2>
</article>

<aside>

  • 보조 콘텐츠 영역
  • 광고, 사이드바, 관련 링크 등
<aside>
  관련 글 목록
</aside>
  • 문서 또는 섹션의 바닥글
  • 저작권, 작성자 정보, 관련 문서 링크 포함
<footer>
  © 2026 MySite
</footer>

<figure> / <figcaption>

  • 이미지, 도표, 코드 등 독립 콘텐츠
  • 설명은 <figcaption> 사용
<figure>
  <img src="image.png" />
  <figcaption>이미지 설명</figcaption>
</figure>

<address>

  • 작성자 또는 소유자 연락처 정보
<address>
  contact@example.com
</address>

시멘틱 태그 사용 예시 구조

<body>
  <header></header>
  <nav></nav>
  <main>
    <section>
      <article></article>
    </section>
    <aside></aside>
  </main>
  <footer></footer>
</body>

시멘틱 태그 사용 시 주의사항

  • 의미에 맞는 태그 사용 (디자인 목적 X)
  • <div>는 대체 불가능할 때만 사용
  • <main>은 한 문서에 하나만 존재
  • 시멘틱 태그 남용 지양

정리

HTML5 시멘틱 태그는 문서의 의미와 구조를 명확히 표현하기 위한 핵심 요소입니다.

올바른 시멘틱 태그 사용은
SEO, 접근성, 유지보수성 측면에서 모두 긍정적인 효과를 가져옵니다.

참조