Page Title

Department name at the University of Illinois at Urbana/Champaign

home >> your home >> this level >> this page

Designing Using UIUC Best Practices

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

  • Heading level 1 (H1): Page title
  • Heading level 2 (H2): Primary topics in content part of page and titles for navigation bars
  • Heading level 3 (H3): Seconday topics under primary topics
  • Heading level 4 (H4): Third level topics under secondary topics

Use UL, OL and LI for ordered and unorder lists

Unorder list with default bullets

  • Item A
  • Item B
  • Item C

Unordered list with circle bullet type

  • Item A
  • Item B
  • Item C

Unordered list with square bullet type

  • Item A
  • Item B
  • Item C

Unordered list with custom bullet images

  • Item A
  • Item B
  • Item C

Ordered list with default numbering

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

Ordered list with custom 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

Images

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

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
sayantani's name sayantani's address sayantani's phone number

Other Resources