의미에 맞는 페이지 구조

대부분의 페이지는 머리말, 메뉴, 본문, 꼬리말이라는 비슷한 뼈대를 가집니다. HTML에는 이 부분마다 요소가 있고, 화면 낭독기 사용자는 그 요소로 바로 이동할 수 있습니다.

div만 가득한 페이지에서 랜드마크로

오랫동안 페이지는 header나 menu 같은 클래스 이름을 붙인 <div> 요소로 만들었습니다. <div>는 아무 뜻이 없는 범용 상자라서 클래스 이름이 유일한 단서였고, 그것도 코드를 읽는 사람만 알 수 있었습니다. 지금 HTML에는 각 영역이 무엇인지 말해 주는 요소가 있습니다. 브라우저, 검색 엔진, 보조 기술이 모두 이 요소를 알아듣습니다. 화면 낭독기 사용자는 랜드마크라고 부르는 이 영역들의 목록을 열어 원하는 곳으로 바로 갈 수 있습니다. 눈으로 보는 사람이 화면 배치를 한눈에 훑는 것과 같은 일입니다.

주요 영역

• <header>: 도입부. 보통 사이트 이름이나 로고가 있고 주 메뉴가 들어가기도 합니다. article도 자기 header를 가질 수 있습니다.
• <nav>: 사이트 메뉴나 목차처럼 주요 이동 링크를 모은 부분입니다. 링크 묶음이라고 모두 nav가 필요한 것은 아닙니다.
• <main>: 이 페이지에만 있는 본문입니다. 페이지에 보이는 <main>은 하나만 두고, header, nav, aside, footer 안에 넣지 않습니다.
• <article>: 블로그 글, 기사, 상품 카드처럼 따로 떼어 내도 뜻이 통하는 독립된 내용입니다.
• <section>: 페이지나 글에서 주제가 같은 한 도막으로, 보통 자기 제목이 있습니다.
• <aside>: 본문과 관련은 있지만 따로 떨어진 내용입니다. 옆단, 용어 상자, 관련 링크 같은 것입니다.
• <footer>: 글쓴이, 저작권, 연락처 링크 같은 마무리 정보입니다.

이 요소들은 위치가 아니라 뜻을 나타냅니다. <nav>가 꼭 맨 위에 있을 필요는 없고, <aside>가 꼭 오른쪽에 있어야 하는 것도 아닙니다. 휴대전화에서는 aside가 보통 본문 아래로 내려갑니다. 위치는 CSS가 정합니다. 제목 단계를 크기가 아니라 구조로 골랐듯이, 요소도 내용이 무엇인지를 물어 고릅니다.

article인가 section인가

물어볼 것은 그 내용을 다른 곳, 예를 들어 뉴스 모음 앱이나 링크 공유로 떼어 내도 뜻이 통하느냐입니다. 그렇다면 <article>입니다. 요리법의 「재료」처럼 더 큰 것의 일부일 때만 뜻이 통한다면 <section>입니다. 둘 다 보통 제목으로 시작합니다. article 안에 section이 들어갈 수 있고, 「최근 글」 section에 글 카드 article이 여러 개 들어가는 것처럼 거꾸로도 됩니다.

div와 span에도 자리가 있습니다

맞는 요소가 없을 때는 덩어리에 <div>, 줄 안의 몇 낱말에 <span>을 씁니다. 카드를 격자로 늘어놓는 <div class="cards">처럼 CSS를 걸 자리로 쓸모가 많습니다. 먼저 뜻이 있는 요소를 찾고, 내용을 설명하는 요소가 없을 때만 범용 요소를 쓰는 것이 원칙입니다. div만으로 만든 페이지도 작동은 하지만, 코드를 보지 않는 모든 사람에게 구조를 감추게 됩니다.

간단한 확인 방법이 있습니다. CSS를 끈 채로 페이지를 열거나, 브라우저 확장 프로그램이 보여 주는 제목·랜드마크 개요를 읽어 보세요. 머리말, 메뉴, 본문, 꼬리말이 분명하고 순서가 자연스럽다면 구조가 제 일을 하고 있는 것입니다.

ARIA보다 HTML 요소가 먼저

<div role="navigation">처럼 쓰는 role 속성을 볼 수도 있습니다. WAI-ARIA라는 W3C 표준의 일부로, 범용 요소에 보조 기술이 알아듣는 뜻을 붙여 줍니다. W3C의 ARIA 사용 안내는 간단한 규칙으로 시작합니다. 필요한 뜻을 이미 가진 HTML 요소가 있다면 그 요소를 쓰라는 것입니다. <nav>는 더 짧고, 어디서나 작동하며, 어느 곳에서는 빠뜨리고 어느 곳에서는 넣는 일도 없습니다. 버튼도 같습니다. 진짜 <button>은 Tab으로 초점을 받고 Enter나 Space로 누르는 기능이 저절로 따라오지만, 누를 수 있게 만든 <div>는 같은 일을 하려면 코드가 더 필요합니다.