Semantic HTML: Difference between revisions

Revision as of 09:13, 27 May 2009

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 user experience 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


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

you better write this:

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

(Examples taken from Moodle's Site Administration block.) 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:

Books:

Designing with Web Standards, 2nd ed. by Jeffrey Zeldman

@@ Line 7: / Line 7: @@
 == Examples for semantic HTML ==
-For some concrete examples how to make Moodle HTML more semantic you might have a look at this work in progress: [[User:Frank Ralf/Semantic HTML1]].
+Instead of writing something like
+<code php>
+<div class="depth0">
+  <a href="#" name="d16">
+    <img id="vh_div16indicator" src="pix/closed.gif" alt="Closed folder">
+      Security
+  </a>
+</div>
+<span id="vh_div16"></span>
+</code>
+you better write this:
+<code php>
+<li class="closed"><a href="#">Security</a></li>
+</code>
+(Examples taken from Moodle's Site Administration block.)
+For more examples how to make Moodle HTML more semantic you might have a look at this work in progress: [[User:Frank Ralf/Semantic HTML1]].
 == Further resources ==

Documentation