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.

These are some of the first tags to learn in HTML. Put them inside the body of a complete HTML document.

Syntax

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

What Do HTML h1 to h6 Headings Mean?

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.

How Do HTML Paragraphs Work?

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.

When Should You Use 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 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.

The b and i elements also have meaning. Use b to draw attention without adding importance, and i for text in an alternate voice or category, such as a technical term. Use strong for importance and em for stress emphasis. CSS handles a purely visual change.

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.

When Should You Use an HTML Line Break?

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 reader treatment of line breaks varies. Use br when the line break belongs to the content, not as a substitute for paragraph boundaries or CSS spacing.

<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 an HTML page have more than one h1?

HTML permits multiple h1 elements, but one h1 naming the page is usually the clearest starting point. Use h2 for its major sections and lower levels for nested subsections.

Should an HTML h1 match the browser-tab title?

The HTML h1 and title should describe the same page, but do not have to be identical. The title appears in the browser tab and may include the site name; the h1 introduces the visible content.

When should you use HTML small, sub, and sup?

The HTML small element marks side comments or fine print. The sub and sup elements mark subscript and superscript, such as chemical formulas and footnote markers. Use CSS when you only want to change text size.

How do HTML headings help search engines?

HTML headings describe a page's sections for readers and search engines. Clear headings help explain the topic; repeating the same keyword in every heading makes the page harder to read.

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.