A A A A A

Text Styling Example: u Element

Inaccessible use of u element

HTML Example

Example Heading

This is a sample paragraph to demonstrate the inaccessible use of the u element.

HTML Source Code

<p style="margin-top: 1em"> <font size="6" face="sans-serif"> <u> Example Heading </u> </font> </p>

<p> This is a sample paragraph to demonstrate the <font size="4" color="#999999" face="monospace"><b><u>inaccessible</u></b></font> use of the <code>u</code> element. </p>

Accessible use of CSS and text-decoration property instead of u element

HTML Example

Example Heading

This is a sample paragraph to demonstrate replacing the u element with the accessible div element in a paragraph styled with the CSS text-decoration property.

HTML Source Code

<div class="example">

<p><u>Example Heading</u></p>

<p> This is a sample paragraph to demonstrate replacing the <code>u</code> element with the <strong>accessible</strong> <code>div</code> element in a paragraph styled with the CSS <code>text-decoration</code> property. </p>

CSS Source Code

/* CSS Document */

#content div.example u
{
  text-decoration: underline;
  font-size: xx-large;
  font-family: sans-serif;
}

#content div.example strong
{
  font-size: large;
  color: #999999;
  font-family: monospace;
  text-decoration: underline;
}