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
Line 59: Line 59:


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]].
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]].
== Separating structure and styling ==
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>


== Further resources ==
== Further resources ==

Revision as of 07:32, 9 June 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 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

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:

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

GOOD:

  • <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.

    Separating structure and styling

    BAD:

    GOOD: <style type="text/css"> </style>


    Further resources

    Online:

    Books:

    See also