A A A A A

Text Styling Example: center Element

Inaccessible use of center element

HTML Example

Example Heading

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

HTML Source Code

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

Accessible use of CSS and text-align property instead of center element

HTML Example

Example Heading

This is a sample paragraph to demonstrate replacing the center element with the accessible heading attribute that is styled with the CSS text-align property.

HTML Source Code

<div class="example">

  <h3> Example Heading </h3>


  <p> This is a sample paragraph to demonstrate replacing the <code>center</code> element with the <strong>accessible</strong> <code>heading</code> attribute that is styled with the CSS <code>text-align</code> property. </p>

</div>

CSS Source Code

/* CSS Document */

#content div.example h3
{
  text-align: center;
  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