Semantic HTML: diferència entre les revisions
| Línia 80: | Línia 80: | ||
(Example taken from one of Moodle's standard themes.) | (Example taken from one of Moodle's standard themes.) | ||
== Divitis == | |||
"The biggest problem with div tags is that they are used too often. Divs should only be used to build structure and as placeholders for design elements when no other block-level elements can describe the content." | |||
Source: [http://www.smashingmagazine.com/2009/04/08/from-table-hell-to-div-hell/ "Table Layouts vs. Div Layouts: From Hell to… Hell?"] | |||
== Further resources == | == Further resources == | ||
| Línia 104: | Línia 109: | ||
* [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! | * [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! | ||
'''Bold text''' | |||
== See also == | == See also == | ||
Revisió del 13:23, 11 juny 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, see Frank Ralf/Semantic HTML1.)
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, see Frank Ralf/Semantic HTML4.)
Separating structure and styling
Don't use inline styles but put any styling information in a separate CSS.
BAD:
GOOD:
<style type="text/css">
</style>
(Example taken from one of Moodle's standard themes.)
Divitis
"The biggest problem with div tags is that they are used too often. Divs should only be used to build structure and as placeholders for design elements when no other block-level elements can describe the content." Source: "Table Layouts vs. Div Layouts: From Hell to… Hell?"
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!
Bold text
See also
- Development:XHTML
- Accessibility
- Usability FAQ
- CSS FAQ
- 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.
