시맨틱 태그: header nav main article footer

의미론적 HTML은 단순히 모양이 아니라 콘텐츠의 의미를 설명하는 요소를 사용합니다. <article>은 ‘이것은 독립적인 콘텐츠입니다’라고 말합니다. 일반적인 <div>는 아무것도 알려 주지 않습니다.

초기 웹 개발자들은 <div>와 <span> 요소만으로 레이아웃을 구성했습니다. 화면 낭독기는 탐색 영역, 콘텐츠, 광고를 구분하지 못했습니다. 검색 엔진은 페이지 구조를 추측해야 했습니다.

<header> 요소에는 페이지나 영역을 소개하는 콘텐츠가 들어갑니다. 일반적으로 로고, 사이트 이름, 탐색 메뉴가 포함됩니다. 한 페이지에 여러 header를 사용할 수 있으며, 사이트에 하나를 두고 각 article마다 하나씩 둘 수도 있습니다.

기본 메뉴, 이동 경로, 목차처럼 탐색 링크 모음을 묶을 때 <nav>를 사용하세요. 화면 낭독기는 nav 랜드마크를 알려 주므로 사용자가 해당 영역으로 바로 이동하거나 건너뛸 수 있습니다.

페이지마다 하나의 <main>만 있어야 합니다. 여기에는 해당 페이지에만 있는 핵심 콘텐츠가 들어가며, 탐색 메뉴나 바닥글처럼 반복되는 요소는 포함하지 않습니다. 보조 기술을 사용하면 사용자가 main으로 바로 이동할 수 있습니다.

<article>은 그 자체로 의미가 있고 다른 곳에 재게시할 수 있는 콘텐츠를 묶습니다. 블로그 게시물, 뉴스 항목, 사용자 댓글, 제품 카드 등이 이에 해당합니다. ‘다른 사이트로 복사해도 의미가 통할까요?’라고 자문해 보세요.

<section>은 장, 탭, 주제 영역처럼 함께 속하는 관련 콘텐츠를 묶습니다. 각 section에는 일반적으로 제목이 있습니다. 콘텐츠가 독립적으로 존재할 수 있다면 article을 사용하세요.

<aside>에는 주변 콘텐츠와 간접적으로 관련된 내용이 들어갑니다. 사이드바, 발췌 인용문, 광고, 관련 링크 등이 이에 해당합니다. 화면 낭독기는 이를 보완 랜드마크로 제공합니다.

<footer>에는 해당 요소에 관한 정보가 들어갑니다. 저작권 고지, 연락처 링크, 관련 문서 등이 이에 해당합니다. header와 마찬가지로 한 페이지에 여러 footer를 사용할 수 있습니다.

제목을 사용하여 논리적인 문서 개요를 만드세요. 페이지마다 <h1>은 하나만 있어야 합니다. 하위 제목에는 h2, 그 아래 하위 제목에는 h3을 사용하는 식으로 이어 갑니다. 단계를 건너뛰거나 시각적 크기만을 위해 제목을 사용하지 마세요.

검색 엔진은 의미 구조를 사용하여 페이지 콘텐츠를 이해하므로, 적절한 랜드마크와 제목 계층 구조를 갖춘 페이지가 검색 결과에서 더 높은 순위를 얻는 경우가 많습니다. 화면 낭독기 사용자는 랜드마크와 제목으로 탐색하므로, 의미 구조는 접근성과 직접 관련됩니다.

페이지의 주요 고유 콘텐츠를 정확히 한 번 감싸야 하는 요소는 무엇인가요?

<header>, <nav>, <main>, <article>, <section>, <aside>, <footer>를 사용하여 브라우저, 검색 엔진, 화면 낭독기가 이해할 수 있는 문서 구조를 만드세요.