Semantic HTML: Difference between revisions
Created page with "== 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 vari..." |
David Mudrak (talk | contribs) m Text replacement - "<code php>" to "<syntaxhighlight lang="php">" |
||
| Line 12: | Line 12: | ||
BAD: | BAD: | ||
< | <syntaxhighlight lang="php"> | ||
<div class="depth0"> | <div class="depth0"> | ||
<a href="#" name="d16"> | <a href="#" name="d16"> | ||
| Line 23: | Line 23: | ||
GOOD: | GOOD: | ||
< | <syntaxhighlight lang="php"> | ||
<li class="closed"><a href="#">Security</a></li> | <li class="closed"><a href="#">Security</a></li> | ||
</code> | </code> | ||
| Line 32: | Line 32: | ||
BAD: | BAD: | ||
< | <syntaxhighlight lang="php"> | ||
<table class="categorylist"> | <table class="categorylist"> | ||
<tbody> | <tbody> | ||
| Line 50: | Line 50: | ||
GOOD: | GOOD: | ||
< | <syntaxhighlight lang="php"> | ||
<ul> | <ul> | ||
<li><a href="/course/category.php?id=3">Quizzes</a>1</li> | <li><a href="/course/category.php?id=3">Quizzes</a>1</li> | ||
| Line 64: | Line 64: | ||
BAD: | BAD: | ||
< | <syntaxhighlight lang="php"> | ||
<td style="width:180px" id="left-column"> | <td style="width:180px" id="left-column"> | ||
</code> | </code> | ||
GOOD: | GOOD: | ||
< | <syntaxhighlight lang="php"> | ||
<style type="text/css"> | <style type="text/css"> | ||
<!-- | <!-- | ||
| Line 91: | Line 91: | ||
Here's an example for a meaningless class: | Here's an example for a meaningless class: | ||
< | <syntaxhighlight lang="php"> | ||
<a class="link" href="admin/register.php">...</a> | <a class="link" href="admin/register.php">...</a> | ||
</code> | </code> | ||
Revision as of 13:30, 14 July 2021
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: <syntaxhighlight lang="php">
<a href="#" name="d16">
<img id="vh_div16indicator" src="pix/closed.gif" alt="Closed folder">
Security
</a>
GOOD: <syntaxhighlight lang="php">
(Example taken from Moodle's Site Administration block, see Frank Ralf/Semantic HTML1.)
Indentation without spacer.gif
BAD: <syntaxhighlight lang="php">
<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: <syntaxhighlight lang="php">
- <a href="/course/category.php?id=3">Quizzes</a>1
(Example from Moodle's Course Category list, see Frank Ralf/Semantic HTML4.)
Separating structure and styling
Don't use inline styles but put any styling information in a separate CSS.
BAD: <syntaxhighlight lang="php">
GOOD: <syntaxhighlight lang="php"> <style type="text/css"> </style>
(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:
<syntaxhighlight lang="php"> <a class="link" href="admin/register.php">...</a>
Further resources
Online:
- Mark Pilgrim's Won’t somebody please think of the gerbils?
- An evaluation of WYSIWYG editors (including TinyMCE) for their production of valid, semantic & accessible HTML
- HTML: more structural than semantic by Simon Willison
- Million Dollar Markup by Mark Pilgrim
- Elements of Meaningful XHTML presentation by Tantek Çelik
- An index of Tantek Çelik's posts on semantic markup for blogs including
- Dan Cederholm's Simple Quiz
- But It Validates!
- Table Layouts vs. Div Layouts: From Hell to… Hell? article from Smashing Magazine
Books:
- 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
- "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: Frank Ralf/Semantic HTML1.
