HTML 기초발행일 2026. 8. 28.

시맨틱 HTML로 문서 구조 설계하기

검색엔진과 보조기술이 이해할 수 있도록 튜토리얼 페이지의 HTML 골격을 설계합니다.

#HTML#SEO#Accessibility

학습 목표#

페이지를 시각적인 상자 모음이 아니라 의미 있는 문서로 구성합니다. 완료 후에는 header, nav, main, article, aside의 역할을 설명할 수 있어야 합니다.

기본 문서 골격#

하나의 문서에는 하나의 주 콘텐츠 영역과 명확한 제목이 필요합니다.

html 코드 예제

<body>
  <header>사이트 탐색</header>
  <main id="content">
    <nav aria-label="Breadcrumb">...</nav>
    <article>
      <h1>시맨틱 HTML로 문서 구조 설계하기</h1>
      <section aria-labelledby="goal">
        <h2 id="goal">학습 목표</h2>
      </section>
    </article>
  </main>
</body>

제목 계층#

페이지 제목은 h1, 주요 장은 h2, 장 내부의 세부 항목은 h3를 사용합니다. 글자 크기를 바꾸기 위해 제목 단계를 건너뛰지 않습니다.

튜토리얼 페이지 체크리스트#

본문을 감싸는 main이 하나인가?
페이지 주제를 설명하는 h1이 하나인가?
링크 문구만 읽어도 목적지를 이해할 수 있는가?
코드 예제에 언어 정보가 있는가?

정리#

시맨틱 구조는 접근성뿐 아니라 검색엔진의 본문 이해, 사이트 링크 구조, 유지보수성의 기반입니다.