A A A A A

Text Styling Example: i Element

Inaccessible use of i element

HTML Example

Example Heading

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

HTML Source Code

<p style="margin-top: 1em"> <font size="6" face="sans-serif"> <i> Example Heading </i> </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>i</code> element. </p>

Accessible use of CSS and font-style property instead of i element

HTML Example

Example Heading

This is a sample paragraph to demonstrate replacing the i element with the accessible font-style property and CSS styling.

HTML Source Code

<div class="example">

  <p> <i> Example Heading </i> </p>

  <p> This is a sample paragraph to demonstrate replacing the <code>i</code> element with the <strong>accessible</strong> <code>font-style</code> property and CSS styling. </p>

</div>

CSS Source Code

/* CSS Document */

#content div.example i
{
  font-style: italic;
  font-size: xx-large;
  font-family: sans-serif;
}

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

Styling Best Practices

Other Best Practices

Working Group