Technique H49:Using semantic markup to mark emphasized or special text

Example 1

This example shows how to use the em and strong elements to emphasize text. The em and strong elements were 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;!... 

Example 2

This example shows using the blockquote element to mark up long quotations which may require paragraph breaks. It 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>

Example 3

Here is the use of the q element to mark up a shorter quotation. Quotes are provided around the q element, because many user agents do not support this element yet and therefore do not display it properly (see UA notes). CSS rules to suppress automatic generation of quotes are provided for those user agents that do support the q element, to prevent them from generating quotes automatically in addition to the quotes provided by the author, resulting in double-quoted content. In the future, when the q element is more broadly supported, the need to provide quotes and suppress browser-generated quotes will go away.

q:before { content: ""; } 
q:after { content: ""; }  

 <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>

Example 4

Superscripts and subscripts are created using the sup and sub elements.

 <p>Beth received 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>

Example 5

This example shows use of the code element to provide visual emphasis and consistent restyling capability for code rendered on a web page. In this example shows a code code element being used to emphasize a block of CSS code.

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