HTML Tutorial / Headings and Paragraphs

Use h1 through h6 for HTML headings and p for paragraphs. Headings describe the hierarchy of a page, while paragraphs group related sentences. Use br only when you need a line break within the same paragraph, not to start a new one.

Use h1–h6 to show heading levels

HTML provides six heading levels. A page commonly uses h1 for its main title, h2 for major sections, and h3 for topics within those sections. A heading's level describes where its content fits in the document; it is not a choice of font size. Compare page regions with headings in Divide a Page with Semantic Elements.

<h1>Accessibility Guide</h1>

<h2>HTML Structure</h2>
<p>An overview of HTML document structure.</p>

<h3>Heading Levels</h3>
<p>How to organize headings.</p>

<h3>Paragraphs</h3>
<p>How to separate paragraphs.</p>

<h2>CSS Presentation</h2>
<p>How CSS changes the appearance of headings and paragraphs.</p>

Both h3 headings above are topics within the h2 section called “HTML Structure.” The next h2 begins another major section. When introducing a subsection, avoid skipping a level—for example, jumping straight from h2 to h4.

Clear headings help readers scan a page and help screen reader users navigate between sections. The W3C WAI guide to heading structure explains why heading levels should reflect the organization of the content.

If WordPress already displays the post title as the page's h1, you do not need another h1 for the same title in the post body. Start its main sections with h2 instead.

See headings and paragraphs in a browser

Save the following complete example as index.html and open it in a browser. It puts all six heading levels side by side for comparison; a real page only needs the levels required by its content.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>HTML Headings and Paragraphs</title>
  </head>
  <body>
    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <h3>Heading 3</h3>
    <h4>Heading 4</h4>
    <h5>Heading 5</h5>
    <h6>Heading 6</h6>
    <p>This is the first paragraph.</p>
    <p>This is the second paragraph.</p>
  </body>
</html>

Browsers give heading levels different default sizes and spacing, but the exact appearance depends on the browser and the page's CSS. If a heading needs to look larger or smaller, change its CSS rather than using the wrong heading level.

Separate paragraphs with p

The p element marks one paragraph. Wrap distinct groups of related sentences in separate p elements so their relationship remains clear.

<p>HTML creates the structure of a web page.</p>

<p>CSS controls its appearance.</p>

This code creates two paragraphs. Adding a blank line in a text editor alone does not create a new HTML paragraph. A p can contain ordinary text and inline content such as links, but it should not contain headings, lists, or tables.

To add space between paragraphs, use a CSS property such as margin rather than inserting empty p elements or repeated br elements.

Use br for a line break within one paragraph

The br element starts a new line without creating a new paragraph. It is useful when the position of a line break matters, as it can in an address or a poem. If the topic changes, start another p instead.

In this example, the second p is a new paragraph. The br changes the line only inside that paragraph.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>HTML Paragraphs and Line Breaks</title>
  </head>
  <body>
    <p>This is the first paragraph.</p>
    <p>This is the first line of the second paragraph.<br>This is the second line of the second paragraph.</p>
  </body>
</html>

Keep the semantic heading level in HTML and set its visual size using CSS fonts, font sizes, and line height.

Practice repairing a heading hierarchy

When a major section gains its first subsection, do not jump from h2 to h4. The issue in this fragment is its hierarchy, not its font size.

<!-- A skipped heading level -->
<h2>Delivery information</h2>
<h4>Delivery areas</h4>

<!-- A consistent hierarchy -->
<h2>Delivery information</h2>
<h3>Delivery areas</h3>
<h3>Delivery times</h3>

Compare the fragments separately inside a document's body; do not keep both as real content. Read only the headings and check whether the main subject and its subtopics remain clear. Use CSS to adjust their appearance.

Check your headings and paragraphs

• Choose h1–h6 by the structure of the content, not by the default font size.
• Give each heading a descriptive name and avoid skipping a level when moving into a subsection.
• Use a new p for a new paragraph; use br only for a meaningful line break within one paragraph.
• Control font sizes and spacing with CSS, not empty elements or a different heading level.

To check for incorrectly nested tags, submit your HTML to the W3C Markup Validation Service. Test reading order and keyboard use with the small page in Accessibility Basics: Headings, Links, Images, and Keyboard.