문서 구조와 개요
페이지는 요소들의 평면적인 더미가 아닙니다. 위에서 아래로 읽으면 일관성이 있어야 합니다: 제목이 있고, 그 아래 섹션들이 있으며, 각각 자신의 제목을 가지고 있고, 진행하는 순서가 의미가 있어야 합니다. 그 모양이 페이지의 개요이며, 이는 함께 작동하는 두 가지에서 나옵니다. 제목은 각 부분의 이름을 지정하고, 시맨틱 HTML 장의 랜드마크 영역인 <header>, <nav>, <main>, <aside>, <footer>는 그 부분들을 영역으로 그룹화합니다. 이 장은 이 둘이 전체 페이지로 어떻게 결합되는지에 관한 것입니다.
제목과 랜드마크가 개요를 형성하는 방식
웹 페이지는 위에서 아래로 읽으며, 책의 페이지를 읽는 것과 같은 방식입니다. 방문자는 위에서 시작해서 아래로 진행하므로 콘텐츠가 있는 순서가 방문자가 읽는 순서입니다. 사람들이 실제로 만나고 싶어 하는 순서대로 배치하세요.
제목은 그 순서에 모양을 부여합니다. 제목은 뒤따르는 부분에 대한 짧은 레이블이며, <h1>부터 <h6>까지의 태그로 작성됩니다. <h1>은 전체 페이지의 제목입니다. 각 <h2>는 아래의 주요 섹션의 이름을 지정하고, <h3>은 <h2> 내의 더 작은 부분의 이름을 지정합니다. 이들을 쌓으면 페이지의 **개요**를 얻게 됩니다: 페이지의 순서를 미러링하는 목차입니다.
<h1>초보자를 위한 사워도우</h1>
<h2>필요한 것</h2>
<h3>재료</h3>
<h3>장비</h3>
<h2>스타터 만들기</h2>제목만 읽어도 한 문단도 읽기 전에 페이지가 무엇에 관한 것이고 어떻게 구성되어 있는지 이미 알 수 있습니다.
<h1>부터 <h6>까지, 골격입니다: <h1>은 페이지 제목이고, 모든 것이 그 아래 중첩됩니다. 제목만 읽어도 페이지가 어떻게 배치되어 있는지 이미 알 수 있습니다. 하나의 메인과 올바른 제목 순서
개요를 깔끔하게 유지하는 두 가지 습관이 있습니다. 첫째, 페이지에 단일 <h1>을 제공합니다. 이것은 페이지의 제목이며, 페이지는 하나의 제목을 가지며, 책이 표지에 하나의 이름을 가진 것처럼 말입니다. 다른 모든 것은 <h2> 이하입니다.
둘째, 수준을 건너뛰지 마세요. <h2> 다음의 다음 단계는 <h3>이지, <h5>가 아닙니다. 수준을 건너뛰면 개요에 간격이 생기며, 목차가 장 1을 나열한 다음 장 4를 나열하는 것과 같습니다. 한 번에 한 수준씩 이동하며, 아래로 그리고 다시 위로:
<h1>주중 저녁 식사</h1>
<h2>파스타</h2>
<h3>토마토와 바질</h3>
<h3>마늘 버터</h3>
<h2>샐러드</h2>
<h3>그릭 샐러드</h3>이 제목들이 앉아 있는 콘텐츠는 보통 하나의 <main> 영역에 있습니다. <main>은 페이지의 기본 콘텐츠를 표시하며, 모든 페이지에서 반복되는 공유 헤더, 네비게이션 또는 푸터가 아닌 이 페이지에 고유한 부분입니다. 하나의 <h1>이 있는 것처럼 하나의 <main>이 있습니다.
<h1>입니다. 제목 수준을 한 번에 한 단계씩 내려가세요, <h2> 다음에 <h3>, <h5>로 건너뛰지 마세요. 그리고 페이지의 주요 콘텐츠는 하나의 <main>에 들어갑니다. 제목이 틀린 크기로 보이면, 그것은 CSS의 일이지, 수준을 전환할 이유가 아닙니다. 콘텐츠 그룹화 및 순서 지정
관련 콘텐츠는 그룹화될 때 더 잘 읽힙니다. 두 가지 요소가 이를 위해 존재합니다. <section>은 "재료" 부분처럼 자신의 제목을 가진 페이지의 테마 있는 덩어리입니다. <article>은 그것을 들어올려내도 여전히 의미가 있을 단독 저작물이며, 단일 블로그 게시물 또는 고객 리뷰처럼 말입니다.
<article>
<h2>느린 라이즈 포카차</h2>
<p>거의 반죽이 필요 없는 로프입니다.</p>
</article>순서는 그룹화만큼 중요합니다. 페이지가 위에서 아래로 읽으므로, 가장 중요한 콘텐츠를 위쪽 근처에 배치하고, 나머지를 독자가 원할 순서대로 배열합니다. 조리법은 단계 전에 필요한 것을 나열합니다, 그것은 따를 순서이기 때문입니다.
<section>으로 관련 콘텐츠를 제목을 가진 주제 부분에 대해 그룹화하고, <article>은 단일 게시물처럼 자체적으로 서는 부분을 래핑합니다. 그러면 순서를 신경 씁니다: 페이지는 위에서 아래로 읽으므로 중요한 것들이 맨 위 근처로 갑니다. 누군가가 실제로 읽고 싶은 순서대로 작성하세요. 일반적인 구조적 실수
몇 가지 구조적 실수가 반복해서 나타나며, 각각은 깔끔한 해결책을 가집니다.
- 텍스트를 크게 만들기 위해 제목 태그를 사용합니다. 원하는 크기로 렌더링된다고 해서
<h3>에 도달하는 것은 개요를 깨뜨립니다. 의미에 따라 수준을 선택하고 CSS에서 크기를 설정합니다. - 제목 수준을 건너뜁니다.
<h2>에서<h4>로 이동하면 개요에 구멍이 생깁니다. 한 번에 한 수준씩 내려가세요. - 하나 이상의
<h1>입니다. 페이지는 하나의 제목을 가집니다. 추가<h1>태그는 목차를 헷갈리게 합니다. - 제목이 없습니다. 제목이 없는 오랜 문단 실행은 스캔하기 어렵습니다. 독자가 그들의 방식을 찾을 수 있도록 제목을 추가합니다.
이들을 수정하면 페이지는 모든 사람을 위해 명확하게 읽으며, 눈으로 스캔하든 큰 소리로 읽든 말입니다. 접근성 장은 모든 방문자를 위해 페이지를 작동하게 만드는 것에 대해 더 나아갑니다.
<h1>을 추가하지 말고, 긴 페이지를 제목 없이 두지 마세요. 각각은 개요를 혼동합니다. 제목 수준을 의미에 따라 선택하고 CSS가 크기를 처리하게 하세요.