HTML Headings and Text: h1–h6, Paragraphs, and Emphasis

HTML gives you six heading levels and a paragraph element to structure your text, plus strong and em to mark words that carry weight or stress.

Syntax

<h1>Page title</h1>
<h2>A major section</h2>
<p>A paragraph of running text.</p>

Headings from h1 to h6

Headings run from h1 down to h6, and they build the outline of your page. The h1 names the whole page and there should be one per page. Below that, h2 marks major sections, h3 marks subsections inside them, and so on down to h6. Pick a heading level by where it sits in your content hierarchy, not by how big the text looks. If a heading is too large for your taste, change the size in CSS and keep the level honest, because skipping from h2 to h4 breaks the outline that screen readers and crawlers rely on.

Many documentation tools build a page's table of contents directly from your heading levels, generating a sidebar or a jump-to-section menu without you writing a single link by hand. Skip a level, or reach for an h3 purely because you like its font size, and that automatically generated outline turns confusing fast. Screen reader users also jump between headings the same way a keyboard user jumps between landmarks, so a heading that only exists for its appearance wastes their time.

Paragraphs

The p element holds a block of running text, and the browser adds space above and below it so paragraphs read as separate blocks. You wrap each distinct paragraph in its own p tag rather than separating them with blank lines, since HTML collapses whitespace and will not honor the gaps you typed.

<p>This is one complete thought, wrapped in its own paragraph.</p>
<p>This is a separate thought, so it gets its own paragraph too.</p>

Paragraphs get default top and bottom margins from the browser's built-in stylesheet, and two adjacent margins collapse into a single gap rather than adding together. That is a common source of confusion the first time you override paragraph spacing in CSS.

Emphasis with Strong and em

Two inline elements mark words that stand out. The strong element marks text with strong importance, and browsers render it bold by default. The em element marks emphasis that changes the meaning of a sentence, and it renders in italics. Both carry real semantic weight, which is why a screen reader can announce them differently. Reach for strong and em when the meaning calls for it, and use the CSS font-weight or font-style properties when you only want a visual effect.

A frequent gotcha is grabbing b and i out of habit. Those tags only change appearance and carry no meaning, so a screen reader treats them as plain text. When the word genuinely matters, strong and em tell that story to every reader.

You can restyle how strong and em look with CSS, swapping the bold weight or the italic slant for a color change or a bit of letter-spacing, without touching their semantic meaning at all. The tag communicates importance or emphasis, and the visual treatment is a separate decision you are always free to make.

Line Breaks

Inside a block of text, the br element forces a single line break without starting a new paragraph. It fits content where the break itself is part of the meaning, like lines in an address or a short poem. Do not stack br tags to fake paragraph spacing, because that is a job for p elements and CSS margins.

Screen readers announce a br as a brief pause, shorter than the fuller stop a reader hears between two separate paragraphs. Stacking several br tags to fake blank space looks sloppy in the markup, and it changes how the content actually sounds when it gets read aloud.

<p>
  742 Evergreen Terrace<br />
  Springfield, USA
</p>

Example

<h1>Weeknight Dinners</h1>

<h2>About this collection</h2>
<p>
  A short set of meals you can cook on a <strong>busy</strong> evening.
  Each one takes under thirty minutes, <em>start to finish</em>.
</p>

<h2>Shipping note</h2>
<p>
  Acme Foods<br />
  100 Market Street
</p>

That markup renders a large page title, two section headings below it, and two paragraphs. The word "busy" shows in bold, "start to finish" shows in italics, and the address breaks across two lines without an extra gap between them.

Frequently Asked Questions

Can a page have more than one h1?

It is valid HTML, but a single h1 naming the document is still the clearest structure for both readers and assistive technology. Multiple h1 elements inside separate sections are permitted; they simply make the outline harder to follow.

Should the h1 match the page title in the browser tab?

They should agree but need not be identical. The title element is what appears in the tab and in search results, so it often carries the site name; the h1 names the page for someone already reading it. Contradicting each other is the mistake.

When should you use small, sub, and sup?

small carries side comments and legal fine print, not merely smaller text. sub and sup mark genuine subscript and superscript, such as chemical formulae and footnote markers. Reach for CSS when the need is only visual size.

Do headings affect SEO?

They help by describing structure, so search engines can tell what a section covers. Repeating keywords in every heading does not help and makes the page worse to read. Write the heading that tells a reader what follows.

When should you use blockquote rather than a paragraph?

Use blockquote when the content is quoted from another source, and cite that source with the cite attribute or an adjacent reference. It is not a styling hook for pulling out a sentence you wrote; that is a job for a class.

Related

• Document Structure: the skeleton this text lives in
• Lists: grouping items instead of running them as prose
• HTML guide: the complete language overview