Note: You are currently viewing documentation for Moodle 2.2. Up-to-date documentation for the latest stable version is available here: Semantic HTML.

Semantic HTML: Difference between revisions

From MoodleDocs
(Replaced content with "{{Moved_to_dev_docs}}")
 
(11 intermediate revisions by one other user not shown)
Line 1: Line 1:
== The case for semantic HTML ==
{{Moved_to_dev_docs}}
 
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|usability]] and [[Accessibility|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 ==
 
Here are some examples of non-semantic HTML taken from the current Moodle markup (layout and styling is done with CSS which isn't shown here).
 
=== List instead of DIVs ===
 
BAD:
<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>
 
GOOD:
<code php>
<li class="closed"><a href="#">Security</a></li>
</code>
 
(Example taken from Moodle's ''Site Administration'' block, see [[User:Frank Ralf/Semantic HTML1]].)
 
=== Indentation without ''spacer.gif'' ===
 
BAD:
<code php>
<table class="categorylist">
<tbody>
  <tr>
    <td class="category indentation" valign="top">
      <img class="spacer" src="pix/spacer.gif" alt="" height="10" width="20">
      <br>
    </td>
    <td class="category name" valign="top">
      <a href="/course/category.php?id=3">Quizzes</a>
    </td>
    <td class="category number" valign="top">1</td>
  </tr>
</tbody>
</table>
</code>
 
GOOD:
<code php>
<ul>
  <li><a href="/course/category.php?id=3">Quizzes</a>1</li>
</ul>
</code>
 
(Example from Moodle's ''Course Category'' list, see [[User:Frank Ralf/Semantic HTML4]].)
 
 
== Separating structure and styling ==
 
Don't use inline styles but put any styling information in a separate CSS.
 
BAD:
<code php>
<td style="width:180px" id="left-column">
</code>
 
GOOD:
<code php>
<style type="text/css">
<!--
td#left-column {width: 180px;}
-->
</style>
 
<td id="left-column">
</code>
 
(Example taken from one of Moodle's standard themes.)
 
== Further resources ==
 
=== Online: ===
 
* [http://diveintomark.org/archives/2003/08/29/semantics Mark Pilgrim's ''Won’t somebody please think of the gerbils?'']
* [http://www.standards-schmandards.com/index.php?2006/03/03/36-wysiwyg-editor-test An evaluation of WYSIWYG editors (including TinyMCE) for their production of valid, semantic & accessible HTML]
* [http://simon.incutio.com/archive/2003/08/28/structuralVsSemantic ''HTML: more structural than semantic'' by  Simon Willison]
* [http://diveintomark.org/archives/2002/12/29/million_dollar_markup ''Million Dollar Markup'' by Mark Pilgrim]
* [http://tantek.com/presentations/2005/03/elementsofxhtml/ ''Elements of Meaningful XHTML'' presentation by Tantek Çelik]
* [http://tantek.com/log/2003/12.html#L20031215t0830 An index of Tantek Çelik's posts on semantic markup for blogs] including
** [http://tantek.com/log/2002/10.html#L20021022t1432 ''Bed and Breakfast'']
** [http://tantek.com/log/2002/11.html#L20021128t1352 ''Anorexic Anchors'']
** [http://tantek.com/log/2002/12.html#L20021216t2238 ''A Touch of Class'']
** [http://tantek.com/log/2002/12.html#L20021231t1850 ''Dive into Semantic Markup'']
** [http://tantek.com/log/2003/01.html#L20030104t1249 ''Comment Markup, Presentation, Plubmbing'']
** [http://tantek.com/log/2003/05.html#L20030502t2240 ''Less is More'']
* [http://www.simplebits.com/bits/simplequiz/ Dan Cederholm's ''Simple Quiz'']
* [http://www.mondaybynoon.com/2006/04/03/but-it-validates/ ''But It Validates!'']
* [http://www.smashingmagazine.com/2009/04/08/from-table-hell-to-div-hell/ ''Table Layouts vs. Div Layouts: From Hell to… Hell?''] article from Smashing Magazine
 
=== Books: ===
 
* [http://www.zeldman.com/dwws/ 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 ==
 
* [[Development:XHTML]]
* [[Accessibility]]
* [[Usability FAQ]]
* [[CSS FAQ]]
 
[[Category:Developer]]
[[Category:Accessibility]]
[[Category:Usability]]

Latest revision as of 08:08, 22 June 2011

This development related page is now located in the Dev docs.

See the Semantic HTML page in the Dev docs.