mason-log.

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가 완성되지는 않지만, 두 영역의 기본 토대가 된다.

✅ 선택 기준

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

🔗 참고 자료

MDN: Semantics — 시맨틱 마크업이 의미하는 바를 설명한다.
WHATWG: Sections — section, article, nav 등 랜드마크 요소를 정의한다.
MDN: HTML 요소 참고 — 시맨틱 요소를 포함한 HTML 요소 목록이다.