시맨틱 HTML로 문서 뼈대 잡기

요약: header·main·nav 같은 시맨틱 태그로 페이지 뼈대를 잡고, 스크린 리더와 검색엔진이 읽을 수 있는 HTML을 작성한다.

---

언제 시맨틱 태그를 쓰는가

화면은 div만으로도 만들 수 있다. 다만 태그에 역할을 넣으면 브라우저·스크린 리더·검색엔진이 같은 구조를 읽는다.

새 페이지를 시작할 때 먼저 뼈대를 정한다. 사이트 머리글, 본문, 내비, 바닥글을 div로 감싸지 말고 역할에 맞는 태그를 고른다.

선택자도 의미가 남는다. .header 클래스보다 header 태그가 의도를 더 짧게 전달한다.

---

문서의 최소 뼈대

문서는 언어, 문자셋, 뷰포트, 제목을 head에 선언한다. body에는 페이지 역할을 나눈다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>페이지 제목</title>
  </head>
  <body>
    <header>
      <p>사이트 이름</p>
      <nav aria-label="주요">
        <a href="/">홈</a>
        <a href="/posts">글</a>
      </nav>
    </header>
    <main>
      <article>
        <h1>글 제목</h1>
        <section>
          <h2>소제목</h2>
          <p>본문 문단.</p>
        </section>
      </article>
    </main>
    <aside>
      <p>관련 링크</p>
    </aside>
    <footer>
      <p>저작권 표기</p>
    </footer>
  </body>
</html>

태그	역할
header	페이지 또는 구역의 머리글
nav	주요 이동 링크 묶음
main	그 페이지의 핵심 내용. 문서당 하나
article	독립해서 옮겨도 의미가 남는 글
section	제목이 있는 주제 구역
aside	본문을 보조하는 정보
footer	페이지 또는 구역의 바닥글

lang은 실제 언어에 맞춘다. 한국어 페이지면 ko이다. 스크린 리더 발음과 SEO(검색 엔진 최적화)에 쓰인다.

제목은 h1부터 h6까지 계층을 건너뛰지 않는다. h1 다음에 바로 h3을 두지 않는다. h1은 페이지의 주제이고, 보통 하나면 충분하다.

---

링크와 버튼

이동이면 a를 쓴다. 그 페이지에서 동작을 실행하면 button을 쓴다.

<a href="/login">로그인 페이지로 이동</a>
<button type="button">메뉴 열기</button>
<button type="submit">저장</button>

클릭 가능한 div에 onclick을 붙이면 키보드와 스크린 리더가 버튼을 인식하지 못한다. div로 버튼을 만들지 않는다.

nav에는 이동 링크만 둔다. 검색 제출 버튼은 nav가 아니라 form 안에 둔다.

---

이미지와 대체 텍스트

의미 있는 이미지는 무엇을 보여 주는지 alt에 적는다. 장식용 이미지는 alt=""로 비운다. 스크린 리더가 장식을 읽지 않게 하기 위함이다.

<img
  src="/hero.webp"
  alt="공원에서 산책하는 강아지"
  width="800"
  height="450"
/>
<img src="/divider.svg" alt="" />

width와 height를 넣으면 이미지가 로드되기 전에 자리를 잡는다. CLS(누적 레이아웃 이동)가 줄어든다.

아이콘만 있는 링크에는 텍스트 이름을 남긴다. 보이지 않아도 된다.

<a href="/settings">
  <img src="/gear.svg" alt="" />
  <span class="sr-only">설정</span>
</a>

---

흔한 실수

• div를 중첩해 헤더·본문·푸터를 표현한다. 역할 태그로 바꾼다.
• main을 여러 개 둔다. 한 문서에 하나다.
• 모든 구역을 section으로 감싼다. 제목이 있는 주제일 때만 쓴다.
• 장식 이미지에 alt="이미지"처럼 빈 정보를 넣는다. 장식이면 빈 문자열이다.
• span이나 div로 제목만 크게 스타일한다. 제목이면 h1–h6이다.

---

정리

시맨틱 HTML은 화면을 꾸미는 단계가 아니다. 문서가 무엇인지를 브라우저와 보조 기술에 선언하는 일이다. 뼈대가 맞으면 CSS와 접근성은 그 위에 얹으면 된다.

---

연습

1. 블로그 글 한 편을 header / nav / main / article / footer만으로 마크업한다. div는 쓰지 않는다.
2. 사이트 로고 이미지와 장식 아이콘 이미지에 각각 알맞은 alt를 넣는다.
3. 기존 페이지에서 h1이 몇 개인지, 제목 계층이 건너뛰어졌는지 확인한다.