제목과 문단

HTML의 제목은 h1에서 h6까지 여섯 단계이고, 화면 낭독기 사용자는 제목에서 제목으로 건너뛰며 페이지를 훑어 보는 일이 많습니다.

제목으로 만드는 개요

요리책을 떠올려 보세요. 책에는 제목이 있고, 요리마다 이름이 있고, 요리 안에는 「재료」와 「만드는 법」 같은 작은 부분이 있습니다. HTML은 같은 개요를 제목 요소 여섯 개, <h1>부터 <h6>까지로 나타냅니다. <h1>이 가장 위 단계로, 보통 페이지의 제목입니다. <h2>는 큰 단락, <h3>는 그 안의 작은 부분을 표시하는 식입니다. 대부분의 페이지는 세네 단계면 충분합니다.

<h1>Weekend Baking</h1>
<p>Three simple breads you can make at home.</p>

<h2>Soda bread</h2>
<h3>Ingredients</h3>
<p>Flour, baking soda, salt and buttermilk.</p>
<h3>Method</h3>
<p>Mix, shape into a round and bake for 40 minutes.</p>

<h2>Flatbread</h2>
<p>Ready in 20 minutes, no oven needed.</p>

크기가 아니라 구조로 단계를 고릅니다

브라우저는 <h1>을 크게, <h6>을 작게 그리기 때문에 글자 크기를 보고 제목 단계를 고르고 싶어집니다. 그러지 마세요. 단계는 페이지가 어떻게 짜여 있는지를 프로그램에 알려 주는 정보입니다. 화면 낭독기는 페이지의 제목을 모두 목록으로 보여 주고, 사용자는 목차를 보듯 원하는 제목으로 바로 갈 수 있습니다. 검색 엔진도 제목을 보고 페이지가 무엇을 다루는지 파악합니다. h2를 좀 더 작게 보이고 싶다면 h2는 그대로 두고 CSS로 크기를 바꾸면 됩니다.

개요를 깔끔하게 유지하는 습관이 두 가지 있습니다. 첫째, 페이지의 큰 제목으로 <h1>을 하나만 씁니다. MDN도 이렇게 권하고, 대부분의 사용자가 기대하는 모습이기도 합니다. 둘째, 아래로 내려갈 때 단계를 건너뛰지 않습니다. h2 다음에는 h5가 아니라 h3가 옵니다. 위로 돌아가는 것은 괜찮아서, 새 단락이 시작되면 h3 다음에 다시 h2가 와도 됩니다.

문단

줄글은 문단마다 <p> 요소에 넣습니다. HTML은 공백을 하나로 합치므로 파일에서 엔터를 두 번 눌러도 화면에 새 문단이 생기지 않습니다. 새 <p>를 써야 문단이 나뉩니다. 브라우저는 문단 위아래에 기본 간격을 두는데, 이 간격은 CSS로 바꿀 수 있습니다. 문단 안에는 다른 문단이나 제목이 들어갈 수 없어서, 닫는 </p>를 빠뜨리면 다음 블록 요소가 시작되는 곳에서 브라우저가 대신 닫아 줍니다.

주소나 시처럼 줄바꿈 자체가 내용인 경우도 있습니다. 이럴 때는 문단 하나나 <address> 안에서 줄마다 끝에 <br>을 넣습니다. 세로 간격을 만들려고 <br>을 여러 개 쌓지는 마세요. 그건 CSS 여백이 할 일입니다. 이야기 속 장면 전환처럼 한 단락 안에서 화제가 바뀔 때는 주제 구분 요소 <hr>을 쓰고, 브라우저는 이를 가로줄로 그립니다.

인용

다른 곳에서 가져온 긴 인용문은 <blockquote>에 넣습니다. 브라우저는 이를 들여 써서 보여 줍니다. 인용한 문단을 그 안에 넣고, 출처 주소는 cite 속성에 적을 수 있습니다. 문장 안의 짧은 인용에는 <q>를 쓰며, 따옴표는 브라우저가 붙여 줍니다. 책이나 영화 같은 작품의 제목은 <cite> 요소로 표시합니다.