Basic text formatting elements

Basic text formatting elements

The first set of text elements that you will look at have been around in HTML for a while. Some of these elements represented text formatting in the past, but as HTML has evolved, the separation of presentation from broader semantics has meant that they now have more generalized significance.

The b element

The b element is used to offset a span of text without indicating any extra emphasis or importance. The examples given in the HTML5 specification are keywords in a document abstract and product names in a review. The b element is very simple: content contained between the start and end tags is offset from the surrounding content. You would usually do this by showing the content in bold, but you can use CSS to change the style applied to b elements. Below is the b element in use.

<html>
  <head>
    <title>Example</title>
  </head>
  <body>
    I like <b>apples</b> and <b>oranges</b>.
  </body>
</html>

Output:

Adding Emphasis

The em element represents a span of text with emphatic stress. You use this to give a kind of context to the reader about the meaning of a sentence or paragraph. This is shown below, which describes the em element.

<html>
  <head>
    <title>Example</title>
  </head>
  <body>
    <em>I</em> like <b>apples</b> and <b>oranges</b>.
  </body>
</html>

Output:

Denoting Foreign or Technical Terms

The i element denotes a span of text that has a different nature from the surrounding content. This is a fairly loose definition, but common examples include words from other languages, a technical or scientific term, and even a person’s thoughts. Below is an example of the i element.

<html>
  <head>
    <title>Example</title>
  </head>
  <body>
    <em>I</em> like <b>apples</b> and <b>oranges</b>. My favorite kind of orange
    is the mandarin, properly known as <i>citrus reticulata</i>.
  </body>
</html>

Output:

Showing Inaccuracies or Corrections

You use the s element to denote a span of text that is no longer correct or accurate. The style convention is to display the text with a line drawn through it.

<html>
  <head>
    <title>Example</title>
  </head>
  <body>
    <em>I</em> like <b>apples</b> and <b>oranges</b>. My favorite kind of orange
    is the mandarin, properly known as <i>citrus reticulata</i>. Oranges at my
    local store cost <s>$1 each</s> $2 for 3.
  </body>
</html>

Output:

Denoting Important Text

The strong element denotes a span of text that is important.

<html>
  <head>
    <title>Example</title>
  </head>
  <body>
    I like apples and oranges.
    <strong>Warning:</strong> Eating too many oranges can give you heart burn.
  </body>
</html>

Output:

Underlining Text

The u element offsets a span of text from the surrounding content without implying any increased importance or emphasis. The content inside is typically displayed with an underline.

<html>
  <head>
    <title>Example</title>
  </head>
  <body>
    I like apples and oranges.
    <strong>Warning:</strong> Eating <u>too many</u> oranges can give you heart
    burn.
  </body>
</html>

Output:

Adding Fine Print

The small element denotes fine print and is often used for disclaimers and clarifications.

<html>
  <head>
    <title>Example</title>
  </head>
  <body>
    Oranges at my local store are $1 each <small>(plus tax)</small>
  </body>
</html>

Output:

Adding Superscript and Subscript

You use the sub and sup elements to denote subscripts and superscripts, respectively. Superscripts are required in some languages and both superscripts and subscripts are used in simple mathematical expressions.

<html>
  <head>
    <title>Example</title>
  </head>
  <body>
    The point x<sub>10</sub> is the 10<sup>th</sup> point.
  </body>
</html>

Output: