HTML 강좌 / 시맨틱 요소로 페이지 영역 나누기

HTML의 의미 있는 영역 요소는 페이지의 각 부분이 무슨 역할을 하는지 표현합니다. 메뉴에는 nav, 핵심 내용에는 main, 독립적인 글에는 article을 쓰면 시각적 배치와 별개로 문서 구조를 이해하기 쉬워집니다.

영역 요소의 역할 구분하기

• header는 페이지나 글의 도입부입니다. 로고, 제목, 탐색 요소 등이 들어갈 수 있습니다.
• nav는 주요 탐색 링크를 묶습니다. 링크가 있다는 이유만으로 모든 영역을 nav로 만들 필요는 없습니다.
• main은 페이지의 핵심 내용입니다. 한 문서에서 보이는 핵심 콘텐츠를 하나의 main으로 묶는 것이 일반적입니다.
• article은 독립적으로 읽거나 배포할 수 있는 글·게시물 등에, section은 주제별 구역에 사용합니다. section에는 내용을 설명하는 제목을 두는 것이 좋습니다.
• aside는 주된 내용과 간접적으로 관련된 보조 정보에, footer는 페이지나 글의 끝 정보에 사용합니다.

이 요소들은 화면의 위치를 자동으로 정해 주지 않습니다. 사이드바를 만들려고 aside를 쓰는 것이 아니라, 그 내용이 본문을 보충하는 경우에 쓰고 배치는 CSS로 정합니다.

의미 요소를 쓴다고 검색 순위나 접근성이 자동으로 개선되지는 않습니다. 실제 내용이 요소의 뜻과 맞고, 제목과 링크를 따라 읽었을 때 정보의 흐름이 자연스러워야 합니다. 예를 들어 main에는 사이트마다 반복되는 메뉴보다 그 페이지 고유의 내용을 넣습니다.

작은 페이지를 의미에 맞게 나누기

다음 예제는 페이지 전체를 작성한 코드입니다. header의 페이지 내 메뉴, main의 글과 보조 정보, footer의 끝 정보를 한 문서에서 확인할 수 있습니다. 구역을 나눈 뒤 제목의 단계를 고르는 방법은 제목과 문단에서 확인합니다.

<!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="#article">글 보기</a>
      <a href="#sunlight">햇빛 조건</a>
    </nav>
  </header>

  <main>
    <article id="article">
      <h1>봄에 심기 좋은 식물</h1>
      <section id="sunlight">
        <h2>햇빛 조건</h2>
        <p>식물마다 필요한 햇빛의 양이 다릅니다.</p>
      </section>
    </article>
    <aside>
      <p>심기 전에 지역의 마지막 서리 날짜를 확인하세요.</p>
    </aside>
  </main>

  <footer>
    <p>작은 정원 안내</p>
  </footer>
</body>
</html>

코드 전체를 index.html로 저장하고 브라우저에서 열어 보세요. 제목·메뉴·글·보조 정보·끝 정보가 대체로 위에서 아래로 나타납니다. ‘햇빛 조건’을 누르면 같은 페이지의 해당 구역으로 이동합니다. 메뉴의 href="#sunlight"와 구역의 id="sunlight"가 연결되어 있기 때문입니다.

옆으로 배치하고 싶다면 HTML 구조를 바꾸기보다 CSS 레이아웃을 추가하세요. 예제 안의 h1은 저장한 독립 HTML 문서의 제목이며, 이 강좌 본문에 제목 태그를 하나 더 넣는 것이 아닙니다.

section과 article은 어떻게 선택할까?

독립된 블로그 글 하나는 article에 적합합니다. 그 글 안에서 ‘준비물’과 ‘방법’처럼 주제를 나누는 부분은 각각 section이 될 수 있습니다. 반면 단순히 테두리나 배경색을 주기 위해 묶는 요소라면 section보다 의미가 없는 div가 알맞습니다. 의미 없는 스타일 묶음은 div와 span은 언제 사용할까?의 선택 기준으로 구분합니다.

header와 footer는 페이지 전체에만 쓰는 요소가 아닙니다. 독립적인 article 안에서 글의 도입과 끝 정보를 묶는 데도 사용할 수 있습니다. 요소의 이름보다 그 내용의 역할을 먼저 판단하세요. 자세한 정의는 MDN HTML 요소 참고 문서에서 확인할 수 있습니다.

주제별 제목이 필요한 부분이라고 해서 항상 section으로 감쌀 필요는 없습니다. 단순한 문단과 제목만으로 계층이 분명하다면 그대로 두어도 됩니다. 반대로 뉴스 목록처럼 각 항목을 따로 공유해도 이해할 수 있다면 각 항목을 article로 만드는 편이 자연스럽습니다.

같은 콘텐츠에 요소를 선택하는 기준

같은 페이지에 사이트 메뉴와 글 안의 메뉴가 둘 다 있으면 nav의 이름을 다르게 지정해 구별합니다. 이 예제는 두 탐색 영역의 역할을 설명하는 조각입니다.

<nav aria-label="사이트 메뉴">
  <a href="index.html">홈</a>
  <a href="about.html">소개</a>
</nav>
<nav aria-label="이 글의 구역">
  <a href="#sunlight">햇빛 조건</a>
  <a href="#watering">물주기</a>
</nav>

파일과 id는 실제 목적지와 맞춰야 합니다. aria-label은 보조 기술이 탐색 영역을 구분하도록 이름을 제공하며, 화면에 메뉴 제목을 자동으로 출력하는 속성은 아닙니다.

W3C WAI 영역 이름 안내는 같은 역할의 영역을 이름으로 구별하는 방법을 설명합니다.

구조를 점검할 때

브라우저에서 모양이 비슷해 보이더라도 문서의 제목과 메뉴, 핵심 내용이 순서대로 읽히는지 확인하세요. main을 여러 개 만들거나, 제목 없는 구역을 무작정 section으로 감싸거나, 단지 옆에 표시한다는 이유로 aside를 쓰는 실수를 피하면 구조를 이해하기 쉬워집니다.