Basic text formatting elements

Understanding the Web

How to create a website

Parts of an HTML page

Structure of an HTML Document

Creating and viewing a WEB PAGE

Text formatting in HTML

Organising information using lists

Structure content with tables

Data collection with forms

Navigation with links

Displaying images

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>

I like apples and oranges.

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>

I like apples and oranges.

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>

I like apples and oranges. My favorite kind of orange is the mandarin, properly known as citrus reticulata.

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>

I like apples and oranges. My favorite kind of orange is the mandarin, properly known as citrus reticulata. Oranges at my local store cost ~~$1 each~~ $2 for 3.

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>

I like apples and oranges. Warning: Eating too many oranges can give you heart burn.

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>