Semantic HTML

The case for semantic HTML

It is easy to create HTML that works, but current best practice suggests that creating valid and Semantic HTML is an important goal for various reasons including usability and accessibility.

Unfortunately, while validation is a relatively easy task to understand and achieve, creating semantically correct HTML is a lot more subjective and open to debate.

Examples for semantic HTML

Instead of writing something like

List instead of DIVs

 <a href="#" name="d16">
   <img id="vh_div16indicator" src="pix/closed.gif" alt="Closed folder">
     Security
 </a>

you better write this (with some accompanying CSS):

<a href="#">Security</a>

(Example taken from Moodle's Site Administration block.)

Indentation without spacer.gif

BAD:

<tbody> </tbody>

<img class="spacer" src="pix/spacer.gif" alt="" height="10" width="20">

<a href="/course/category.php?id=3">Quizzes</a>

1

GOOD:

• <a href="/course/category.php?id=3">Quizzes</a>1

(Example from Moodle's Course Category list.)

For more examples how to make Moodle HTML more semantic you might have a look at this work in progress: Frank Ralf/Semantic HTML1.

Further resources

Online:

• Mark Pilgrim's Won’t somebody please think of the gerbils?
• An evaluation of WYSIWYG editors (including TinyMCE) for their production of valid, semantic & accessible HTML
• HTML: more structural than semantic by Simon Willison
• Million Dollar Markup by Mark Pilgrim
• Elements of Meaningful XHTML presentation by Tantek Çelik
• An index of Tantek Çelik's posts on semantic markup for blogs including
  • Bed and Breakfast
  • Anorexic Anchors
  • A Touch of Class
  • Dive into Semantic Markup
  • Comment Markup, Presentation, Plubmbing
  • Less is More
• Dan Cederholm's Simple Quiz
• But It Validates!
• Table Layouts vs. Div Layouts: From Hell to… Hell? article from Smashing Magazine

Books:

• Designing with Web Standards, 2nd ed. by Jeffrey Zeldman - This book is the single most useful source for getting you on track for writing semantic code. Highly recommended!

See also

• Accessibility
• Usability FAQ
• CSS FAQ