HTML tags for text

Use <p> for paragraphs, <h1> through <h6> for headings, <strong> for importance, <em> for stress, and <span> when you need a generic inline styling hook. HTML text tags describe what the content means. CSS controls how it looks.

This guide covers the tags you’ll use most often. If you’re new to the language, start with my introduction to HTML or the free HTML course.

The p tag

This tag defines a paragraph of text.

<p>Some text</p>

Browsers display paragraphs as blocks by default, usually with some vertical margin.

A paragraph can contain phrasing content such as text, links, span, strong, em, and images. It cannot contain another paragraph, a heading, a list, or other flow content. If you put one of those elements inside a p, the HTML parser closes the paragraph before it.

Use CSS when you want to change the spacing. The default margin is browser styling, not part of the paragraph’s meaning.

The span tag

span has no special meaning. It groups a short piece of phrasing content so you can target it with CSS or JavaScript:

<p>A part of the text <span>and here another part</span></p>

The br tag

This tag represents a line break. It is a void element, so it does not have a closing tag.

Use it when the line break is part of the content, such as in an address or a poem. Do not use a series of br tags to create visual spacing. Use separate paragraphs and CSS instead.

<p>Some text<br>A new line</p>

The heading tags

HTML gives us 6 heading levels: h1, h2, h3, h4, h5, and h6.

Use h1 for the main page heading, h2 for its major sections, and h3 for subsections of an h2. Choose the level from the document structure, not from the browser’s default font size.

Browsers display h1 as the largest heading by default and make each following level smaller:

Headings can contain phrasing elements such as em, strong, or code. They should not contain paragraphs, lists, or other headings.

The strong tag

Use strong for content with strong importance, seriousness, or urgency. It is a semantic signal, not a shortcut for bold styling.

Browsers by default make the text in this tag bold.

The em tag

Use em to add stress emphasis that changes how a sentence is understood.

Browsers by default make the text in this italic.

Quotes

Use blockquote for a quotation taken from another source:

<blockquote cite="https://example.com/source">
  <p>A longer quotation goes here.</p>
</blockquote>

Use q for a short quotation inside a sentence. The optional cite attribute records the source URL, but browsers do not show it to the reader. Add a visible link when the reader needs to see the source.

Thematic breaks

The hr element represents a thematic break between paragraphs or sections. Browsers usually draw a horizontal line, but that appearance is only the default CSS.

Code blocks

The code tag marks a fragment as computer code. Browsers usually give it a monospaced font.

That’s typically the only thing that browsers do. This is the CSS applied by Chrome:

code {
    font-family: monospace;
}

Wrap a code block in pre because pre preserves spaces and line breaks:

<pre><code>const greeting = 'hello'
console.log(greeting)</code></pre>

Chrome gives pre this default styling:

pre {
    display: block;
    font-family: monospace;
    white-space: pre;
    margin: 1em 0px;
}

The code element adds the meaning. The pre element preserves the formatting.

Lists

HTML has 3 main list types:

• unordered lists
• ordered lists
• description lists

Unordered lists are created using the ul tag. Each item in the list is created with the li tag:

<ul>
	<li>First</li>
	<li>Second</li>
</ul>

Ordered lists are similar, just made with the ol tag:

<ol>
	<li>First</li>
	<li>Second</li>
</ol>

The difference between the two is that ordered lists have a number before each item:

Description lists are a bit different. They contain groups of terms or names (dt) and descriptions or values (dd):

<dl>
	<dt>Flavio</dt>
	<dd>The name</dd>
	<dt>Copes</dt>
	<dd>The surname</dd>
</dl>

This is how browsers typically render them:

They are useful for glossaries, metadata, and other name-value groups.

Other text tags

There are several other text-level elements with specific meanings:

• the mark tag
• the ins tag
• the del tag
• the sup tag
• the sub tag
• the small tag
• the i tag
• the b tag

This is an example of the visual rendering of them which is applied by default by browsers:

You might wonder, how is b different than strong? And how i is different than em?

The difference is semantic:

• strong marks importance. b draws attention without adding importance, for example a product name or keyword in a summary.
• em adds stress emphasis. i marks text in an alternate voice or mood, such as a technical term, idiom, or taxonomic name.

Browsers usually render strong and b in bold, and em and i in italics. Do not choose between them for that appearance. Choose the meaning, then use CSS for the visual style.

The HTML text-level semantics section defines the exact meaning and content rules for these elements.