Text and Formatting

HTML has a small set of elements for marking up runs of text: paragraphs, emphasis, quotes, and line breaks. Each one carries meaning, not just a visual style.

Paragraphs

Use  for a block of text.

<p>This is a paragraph.</p>

Emphasis and meaning

These elements change how text should be understood, not just how it looks:

<p><strong>Warning:</strong> this action cannot be undone.</p>
<p>You <em>really</em> should back up your data first.</p>
<p><small>Terms and conditions apply.</small></p>
<p>Water is H<sub>2</sub>O.</p>
<p>This is a footnote reference.<sup>1</sup></p>
<p>The old price was <del>$40</del> <ins>$30</ins>.</p>

 marks text as important. Browsers render it bold by default, but the meaning is what matters, screen readers can announce it differently.
 marks emphasised text, read with stress. Browsers render it italic by default.
 marks side comments, like fine print.
 and  are for subscript and superscript, useful for chemical formulas, footnotes, and ordinals.
<del> and <ins> mark deleted and inserted text, useful for showing edits.

If you only want a visual effect, with no extra meaning, use CSS instead:

.bold-text {
  font-weight: bold;
}

Avoid the old  and  tags for new code. They only apply a visual style with no semantic meaning,  and  cover the common cases with meaning attached.

``

 wraps a small piece of text with no meaning of its own. It exists so you can target that piece with CSS or JavaScript.

<p>Hello, <span class="highlight">world</span></p>

Unlike <div>, which wraps block-level content,  is inline, it doesn’t start a new line.

Line breaks

  forces a line break without starting a new paragraph. It’s a void element, no closing tag.

<p>
  123 Main Street<br />
  Springfield
</p>

Use   sparingly, only for genuine line breaks like a postal address or a poem. Don’t use it to add visual spacing between elements; use CSS margin for that instead.

Horizontal rule

<hr /> marks a thematic break, a shift in topic within a page.

<p>End of chapter one.</p>
<hr />
<p>Chapter two begins here.</p>

Blockquote

<blockquote> marks a quotation from another source. Use the cite attribute to record where it came from.

<blockquote cite="https://example.com/article">
  The best way to get started is to quit talking and begin doing.
</blockquote>

Browsers indent blockquotes by default, but that’s just a default style. Adjust the spacing with CSS margin and padding rather than nesting extra elements.

Common mistakes

Using  or  for emphasis instead of  or . They carry no meaning for screen readers.
Using   to create paragraph spacing. Use  tags plus CSS margin instead.
Wrapping single words in  just to bold them. If it’s genuinely important, use .