Headings and paragraphs

Chapter one introduced h1 and p. A longer page needs a hierarchy so readers can find a topic before reading details. HTML supplies six heading levels, h1 through h6. A smaller number means a higher level.

Choose levels by meaning

Use a clear h1 for the page topic, h2 for its main parts and h3 for a subsection of an h2:

<h1>Weekend reading event</h1>
<p>First-time visitors are welcome.</p>
<h2>Schedule</h2>
<p>Read in the morning and discuss in the afternoon.</p>
<h3>Morning reading</h3>
<p>Bring a favorite book.</p>
<h2>How to join</h2>
<p>Register at the front desk.</p>

Morning reading belongs to Schedule, while How to join is another main part. Do not jump from h1 to h4 just to get smaller text; CSS will handle appearance. Heading structure also helps screen-reader users navigate.

Separate ideas into paragraphs

Use a p for each paragraph, rather than pressing Enter repeatedly inside one p. Headings and paragraphs should be siblings here: putting h2 inside p can make the browser close the paragraph automatically.

Use br for a meaningful line break within a paragraph, such as an address:

<p>Reading Center<br>Second-floor activity room</p>

A br is not a new paragraph. Do not stack br elements just to create vertical spacing. Ordinary source whitespace still collapses as described in chapter one.

Compare the unstructured and structured Lab examples. Change heading text to reflect the relationship between sections. Try the narrow preview: automatic wrapping of a long paragraph is different from a line break explicitly inserted with br.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Leaflet Club</title>
</head>
<body>
  <p>Weekend reading event</p>
  <p>Schedule</p>
  <p>Morning reading</p>
  <p>Bring a favorite book and share your favorite passage with the group.</p>
</body>
</html>