Department of Linguistics

University of Illinois at Urbana-Champaign




Online Certificate in TESL

This page contains examples of using html and CSS markup to make web pages easier to style and more accessible to people with disabiltiies. More information at UIUC Best Practices for User Centered Web Design.

Use Headings for Main Topics

Use UL, OL and LI for ordered and unorder lists

Unorder list with default bullets

Ordered list with default numbering

  1. Item 1
  2. Item 2
  3. Item 2

Use DL, DT, DD for definition list

Definition Title 1
First definition for title 1
Second definition for title 1
Definition Title 2
First definition for title 2
Second definition for title 2

Defined paragraph classes

A normal paragraph of text, A normal paragraph of text, A normal paragraph of text, A normal paragraph of text, A normal paragraph of text, A normal paragraph of text, A normal paragraph of text, A normal paragraph of text, A normal paragraph of text,

A paragraph of text with the text with <small> tags, A paragraph of text with the text with <small> tags, A paragraph of text with the text with <small> tags, A paragraph of text with the text with <small> tags, A paragraph of text with the text with <small> tags,

A paragraph of text with the text with <em> tags, A paragraph of text with the text with

A paragraph of text with the text with <strong> tags, A paragraph of text with the text with <strong> tags, A paragraph of text with the text with <strong> tags, A paragraph of text with the text with <strong> tags, A paragraph of text with the text with <strong> tags,

Images

Be sure to add text descriptions to images with ALT attribute. For images that need longer descriptions, provide a text description in the context of the document

Quoting and Blockquotes

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin eu magna. Curabitur feugiat consequat nunc. Donec magna. Mauris id leo vel ligula iaculis dapibus. Praesent eget dolor. Aenean lorem lacus, mollis nec, sodales pellentesque, convallis eget, leo. Proin dictum. Nunc vehicula tortor ac nibh. Fusce iaculis urna sed turpis. In hac habitasse platea dictumst. Nullam est est, hendrerit eu, congue vel, dictum id, dolor.

Data Table Example using Data Table Headers

An ADA Compliant Table
names addresses phone numbers
Joe's name Joe's address Joe's phone number
Jane's name Jane's address Jane's phone number