3.3 Inline semantics

The small parts within a block of text

While paragraphs and lists are meant to identify whole blocks of text, we sometimes want to provide meaning to a word (or a few words) within a text.

Strong

For important words, use the <strong> tag:

<p>
  This is <strong>important</strong> but this is not.
</p>

This is important but this is not.

By default, <strong> elements are displayed in bold, but keep in mind that it is only the browser’s default behavior. Don’t use <strong> only to put some text in bold, but rather to give it more importance.

Emphasis

For emphasized words, use the <em> tag:

<p>
  This is <em>emphasized</em> but this is not.
</p>

This is emphasized but this is not.

By default, <em> elements are displayed in italic, but keep in mind that it is only the browser’s default behavior. Don’t use <em> only to put some text in italic, but rather to give it stress emphasis.

Abbreviations

Abbreviations like W3C or CD can use the <abbr> element:

<p>
  I just bought a <abbr>CD</abbr>.
</p>

You can add a title attribute to specify the abbreviation’s description, which will appear by hovering the element:

<p>
  I just bought a <abbr title="Compact Disc">CD</abbr>.
</p>

I just bought a CD.

Inline quotes

The <blockquote> element is a block-level element. It has an inline version: <q>:

<p>
  He said <q>“Hello World”</q> and just left.
</p>

He said “Hello World” and just left.

Other inline elements

There are plenty of other inline semantic elements to choose from, but we’ve covered the most common ones.

Back to top

Learn CSS with my ebook

This ebook is a step by step guide in which I teach you how to build your own personal webpage from scratch, line by line, with HTML5, CSS3, and even JS.

CSS in 44 minutes book cover
Get it now
Close