Using semantic markup to mark emphasized or special text

ID: H49

Technology: html

Type: Technique

When to Use

HTML

Description

The objective of this technique is to demonstrate how semantic markup can be used to mark emphasized or special text so that it can be programmatically determined. Using semantic markup to mark emphasized or special text also provides structure to the document. User agents can then make the structure perceivable to the user, for example using a different visual presentation for different types of structures or by using a different voice or pitch in an auditory presentation.

Most user agents will visually distinguish text that has been identified using semantic markup. Some assistive technologies provide a mechanism for determining the characteristics of content that has been created using proper semantic markup.

Examples

See rendered examples of semantic text.

Using the em and strong elements to emphasize text

The em and strong elements are designed to indicate structural emphasis that may be rendered in a variety of ways (font style changes, speech inflection changes, etc.).

 ... What she <em>really</em> meant to say was, &quot;This is not OK, 
 it is <strong>excellent</strong>&quot;! ...

Using the blockquote element to mark up long quotations from another source

This example also demonstrates the use of the cite element to specify a reference.

<p>The following is an excerpt from the <cite>The Story Of My Life</cite> 
   by Helen Keller:</p>
<blockquote>
  <p>Even in the days before my teacher came, I used to feel along the square stiff
     boxwood hedges, and, guided by the sense of smell, would find the first violets
     and lilies. There, too, after a fit of temper, I went to find comfort and to hide
     my hot face in the cool leaves and grass.</p>
</blockquote>

Using the q element to mark up a shorter quotation from another source

Quotation marks aren't manually added to the quote because they are added by the user agent.

<p>Helen Keller said, <q>Self-pity is our worst enemy and if we yield to it, 
   we can never do anything good in the world</q>.</p>

Using the sup and sub elements to mark up superscripts and subscripts

The sup and sub elements must be used only to mark up typographical conventions with specific meanings, not for typographical presentation for presentation's sake.

<p>Henry won 1<sup>st</sup> place in the 9<sup>th</sup> grade science competition.</p>
<p>The chemical notation for water is H<sub>2</sub>O.</p>

Using the code element to mark up code

This example shows use of the code element to provide visual emphasis for a CSS rule:

<code>
.trial {
  background-image: url(30daytrial.jpg);
  background-position: left top;
  background-repeat: no-repeat;
  padding-top: 68px;
} 
</code>

Tests

Procedure

  1. Examine the content for information that is conveyed through variations in presentation of text.
  2. Check that appropriate semantic markup (such as em, strong, cite, blockquote, sub, and sup) have been used to mark the text that conveys information through variations in text.

Expected Results

Resources