|
|
| (23 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.)
| |
| | |
| === 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.)
| |
| | |
| 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 ==
| |
| | |
| === 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 ==
| |
| | |
| * [[Accessibility]]
| |
| * [[Usability FAQ]]
| |
| * [[CSS FAQ]]
| |
| | |
| [[Category:Developer]]
| |
| [[Category:Accessibility]]
| |
| [[Category:Usability]]
| |
