mason
mason-log.
mason

mason.

안녕하세요. mason 입니다.

html

Semantic HTML.

콘텐츠의 의미를 드러내는 시맨틱 요소와 문서 구조

Semantic HTML은 요소의 모양이 아니라 콘텐츠의 역할과 의미에 맞춰 마크업하는 방식입니다. 브라우저, 검색 엔진, 보조 기술이 문서 구조를 더 정확하게 이해하도록 돕습니다.

🗺️ 문서의 랜드마크

시맨틱 요소로 구성한 페이지 랜드마크

  • header: 페이지나 섹션의 머리말을 나타냅니다.
  • nav: 주요 탐색 링크 묶음을 나타냅니다.
  • main: 페이지의 핵심 콘텐츠를 나타냅니다. 보통 문서당 하나만 둡니다.
  • article: 독립적으로 배포하거나 재사용할 수 있는 콘텐츠를 나타냅니다.
  • section: 하나의 주제로 묶인 문서 구획을 나타냅니다.
  • aside: 본문과 간접적으로 관련된 보조 콘텐츠를 나타냅니다.
  • footer: 페이지나 섹션의 바닥글을 나타냅니다.
<body>
  <header>...</header>
  <nav aria-label="주요 메뉴">...</nav>
  <main>
    <article>
      <h1>문서 제목</h1>
      <section>
        <h2>첫 번째 주제</h2>
      </section>
    </article>
  </main>
  <footer>...</footer>
</body>

🧩 div와 시맨틱 요소

div와 span은 의미가 없는 범용 컨테이너입니다. 레이아웃이나 스타일을 위한 묶음에는 적합하지만, 이미 역할에 맞는 요소가 있다면 그 요소를 먼저 사용합니다.

<!-- 역할이 드러나지 않는다 -->
<div class="navigation">
  <div class="link">문서</div>
</div>

<!-- 탐색 영역과 링크라는 의미가 드러난다 -->
<nav aria-label="문서 메뉴">
  <a href="/docs">문서</a>
</nav>

시맨틱 요소를 사용한다고 디자인이 자동으로 바뀌지는 않습니다. 기본 스타일은 CSS로 조정하되 HTML에는 콘텐츠의 역할을 남깁니다.

🪜 제목 계층

제목 요소는 글자 크기를 정하는 도구가 아니라 문서의 목차를 만듭니다.

  • 페이지의 핵심 제목은 h1으로 나타냅니다.
  • 하위 주제는 h2, 그 안의 세부 주제는 h3으로 이어 갑니다.
  • 시각적 크기는 CSS로 조절하고 단계를 건너뛰지 않습니다.
  • section과 article에는 내용을 설명하는 제목을 제공합니다.

♿ 접근성과 SEO

  • 랜드마크 요소는 스크린 리더 사용자가 영역 사이를 빠르게 이동하도록 돕습니다.
  • 올바른 제목 계층은 문서의 전체 구조를 전달합니다.
  • button, a, label 같은 기본 요소는 키보드와 보조 기술에 필요한 동작을 이미 제공합니다.
  • 검색 엔진은 제목, 본문, 탐색, 부가 콘텐츠의 관계를 파악할 때 시맨틱 구조를 참고합니다.

시맨틱 HTML만으로 접근성과 SEO가 완성되지는 않지만, 두 영역의 기본 토대가 됩니다.

✅ 선택 기준

  1. 이 콘텐츠가 문서에서 맡는 역할을 먼저 정합니다.
  2. 역할에 맞는 HTML 요소가 있는지 확인합니다.
  3. 적절한 요소가 없을 때 div나 span을 사용합니다.
  4. 네이티브 요소의 동작을 CSS나 JavaScript로 불필요하게 다시 만들지 않습니다.

🔗 참고 자료