Diferència entre revisions de la pàgina «Semantic HTML»

Dreceres ràpides: navegació, cerca

Aquesta pàgina forma part de la documentació de Moodle en català, tot i que no ha estat traduïda encara. Podeu contribuir obertament a les tasques de traducció. Podeu consultar la Guia d'edició de la documentació i també participar ens els debats del fòrum de traductors de la documentació a moodle.org

(See also)
(Replaced content with "{{Moved_to_dev_docs}}")
 
Línia 1: Línia 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.)
 
 
 
== Avoid "divitis" and "classitis" ==
 
 
 
"The div tag is a block-level element that defines a section within a document. Divs are thus suitable for building the structure of Web pages. The div tag is also used to describe content that cannot be properly described by other more semantic tags. When developers do not understand the semantic meaning of other block-level elements, they often add more div tags than are needed."
 
 
 
Source: [http://www.smashingmagazine.com/2009/04/08/from-table-hell-to-div-hell/ "Table Layouts vs. Div Layouts: From Hell to… Hell?"] by Geir Wavik, from ''Smashing Magazine''
 
 
 
Another disease in the CSS world is called "classitis", the excessive use of classes (mainly for non-semantic reasons). For examples and hints to avoid this see [http://www.cssnewbie.com/combating-classitis/ "Combating Classitis with Cascades and Sequential Selectors"] by Rob Glazebrook.
 
 
 
Here's an example for a meaningless class:
 
 
 
<code php>
 
<a class="link" href="admin/register.php">...</a>
 
</code>
 
 
 
== 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]]
 
 
 
* [http://www.sitepoint.com/blogs/2010/03/16/the-tragic-comedy-that-is-rich-text-editing-on-the-web/ "The Tragic Comedy that is Rich Text Editing on the Web"] - SitePoint blog
 
 
 
* For more examples how to make Moodle HTML more semantic you might also have a look at this work in progress: [[User:Frank Ralf/Semantic HTML1]].
 
 
 
 
 
[[Category:Developer]]
 
[[Category:Accessibility]]
 
[[Category:Usability]]
 

Revisió de 08:08, 22 juny 2011

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

See the Semantic HTML page in the Dev docs.