Semantic HTML

Jump to: navigation, search

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:

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

GOOD:

<li class="closed"><a href="#">Security</a></li>

(Example taken from Moodle's Site Administration block, see User:Frank Ralf/Semantic HTML1.)

Indentation without spacer.gif

BAD:

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

GOOD:

<ul>
  <li><a href="/course/category.php?id=3">Quizzes</a>1</li>
</ul>

(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:

<td style="width:180px" id="left-column">

GOOD:

<style type="text/css">
<!--
td#left-column {width: 180px;}
-->
</style>
 
<td id="left-column">

(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: "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 "Combating Classitis with Cascades and Sequential Selectors" by Rob Glazebrook.

Here's an example for a meaningless class:

<a class="link" href="admin/register.php">...</a>

Further resources

Online:

Books:

See also