Text-Level Semantic Elements (AKA Phrase Elements, Logical Style Elements, or Inline Elements)

A good list of these elements may be found here.

B (or bold) Element

In the past, this element simply indicated bold text. Today the element represents text that needs extra attention.

<b> and </b>

Strong Element

The strong element emphasizes text to show importance.

<strong> and </strong>

I Element

This element used to indicate italics; today it’s used to differentiate text.

<i> and </i>

Em Element

This element is used so stress the emphasis of contents.

<em> and </em>

Small Element

The small element represents small print -- related content.

<small> and </small>

S (or Strikeout) Element

This element represents content that is no longer accurate or relevant but has been left on the page.

<s> and </s>

Cite Element

The cite element indicates a title of a work. For example, this would be used to indicate a book or article title.

<cite> and </cite>

Q (or Quote) Element

The q element reprents a short quotation.

<q> and </q>

Dfn Element

The definition element represents a term being defined.

<dfn> and </dfn>

Abbr (Abbreviation) Element

The abbreviation element simply represents an abbreviation. When combined with a title attribute, the full expansion of the abbreviation can be displayed.

<abbr title="Hypertext Markup Language">HTML</abbr> is a good thing to know.

Data Element

This element is used in conjunction with microformats or microdata attributes to provide machine-readable content in addition to human-readable content. While beyond the scope of this document, do learn about this!

Time Element

The time element is used to represent a date or time. There are several valid formats.

The datetime attribute is associated with the time element; this attribute represents machine-readable values. Of course the value of this attribute should match that specified in the time element.

<time> and </time>

Code Element

This element is used to represent a fragment of computer code; the computer language is not specified. However it's possible to indicate the language if needed. I use this frequently when presenting demonstrations of HTML and CSS.

<code> and </code>

Pre (Preformatted) Element

This element is used to preserve existing format: while not semantic, the pre element is often used with the code element.

<pre> and </pre>

Var Element

The variable element represents -- a variable!

<var> and </var>

Samp (Sample) Element

The sample element simply presents sample output from a program or system.

<samp> and </samp>

Kbd Element

The keyboard element represents user input.

<kbd> and </kbd>

Sub Element

The Sub element represents a subscript.

<sub> and </sub>

Sup Element

The Sup element represents a superscript.

<sup> and </sup>

U Element

This element represents text that also has a non-textual meaning or annotation. Note that text contained within this element is often rendered with an underline--that is often confusing since hyperlinks are formatted in the same manner. In pracice this is rarely used.

<u> and </u>

Mark Element

The mark element essentially highlights text.

<mark> and </mark>