Headings & Paragraphs
Headings and paragraphs are the backbone of almost every page. Headings create an outline that readers skim and assistive technologies navigate by; paragraphs hold the body text. Using them correctly is one of the simplest ways to make a page clear, accessible and search-friendly.
Six levels of headings
<h1> is the most important and <h6> the least. Browsers display them in decreasing sizes by default, but the size is only a default style — the number expresses importance in the outline, not appearance.
Headings form an outline
Think of headings like a table of contents. Each level nests under the one above it:
(The indentation is only to show the structure; it doesn't affect the page.) Screen-reader users commonly jump from heading to heading to find what they need, so a logical outline is essential for accessibility.
Heading rules of thumb
- Use one
<h1>per page, describing the page's main topic. - Don't skip levels going down — an
<h4>shouldn't follow an<h2>directly. - Never choose a heading level for its size. If you want small text that's a top-level section, use
<h2>and change its size with CSS. - Don't use headings just to make text bold; use
<strong>or CSS.
Paragraphs
Paragraphs are block elements. Write one <p> per paragraph — don't use empty paragraphs or repeated <br> tags to create space; spacing is CSS's job.
<p> can only contain inline content (text, links, emphasis, images). Putting a block element like <div>, <ul> or another <p> inside it causes the browser to close the paragraph early — a common source of confusing layouts.Line breaks and thematic breaks
<br> is right for content where line breaks are part of the meaning — addresses, poems, song lyrics. <hr> represents a thematic break between sections, like a scene change in a story. Both are void elements.
Preformatted text
<pre> keeps every space and line break exactly as written and uses a monospace font — ideal for ASCII art, plain-text tables and, with <code> inside, code samples.
Headings and SEO
Search engines use headings to understand what a page is about. A clear <h1> that matches the page's topic and descriptive <h2> section headings help pages appear for the right searches — and they help human readers just as much.
Try it yourself
Turn this text into a well-structured article: give it an <h1>, two <h2> sections and paragraphs.