A Checklist of XHTML for Semanticality
External: http://brainstormsandraves.com/articles/semantics/structure/brainstorms_and_raves_semantics_html_structure.pdf
Elements (that you should have a good grip of and use frequently):
- Headings: h1, h2, h3, h4, h5, h6 elements
Use these real heading elements for the hierarchical headers of your web page, don't fake 'em with CSS! - Paragraphs: p element
A paragraph is a paragraph. Round your paragraphs with real p elements. NO br elements to fake it! - Line Breaks: br element
Minimize the use of forced line breaks, i.e. br, by resorting to p, (ul/ol, li), and CSS widths/margins/paddings. - Emphasis: em, strong elements
em and strong elements are for emphasis of texts, use cite for citations rather than them. - Citation: cite element
Mark up the name of a citation or reference with this element, inlinely. - Citation: blockquote element
Use this for block citations of text. DON'T use blockquote for just indentation, use CSS margins and paddings instead. Moreover, do provide cite="..." and title="..." properties for it. - Lists: ul/ol, li elements
When you have a list of something, use the list tags: ul and li for unordered list, while ol and li for ordered one. Lists make up an essential part of every successful HTML page. - Definition List: dl, dt, dd elements
Use definition list for terms and their corresponding descriptions. Other possible uses include marking up dialogues and illustration of links. - Computer codes: code element
Mark up computer codes like C++, XML, CSS and so forth with this element. - Computer variables: var element
Mark up programming variables with this element. - Keyboard text: kbd element
For keyboarded text, or user provided information to a terminal. - Abbreviations: abbr element
For abbreviations. - Acronyms: acronym element
For acronyms. - Addresses: address element
Mark up addresses or authorships with this element. - Table captions: caption element
The content of a caption element appears atop the table as title. - Modifications: del element and ins element
Texts marked up with del tags are rendered as deleted with a strike-throughs. If you are modifying a small part of your document, you may want to mark up the deleted part with a del tag and the replacing part with a ins tag, so that both people and computer know exactly how and where you have modified the page. - Form semantic facilities: label element, fieldset element and legend element Don't forget to label the texts with label elements for users to distinguish form controls like text input, radios, and checkboxes.
You can divide a form up into several logic components by employing fieldset elements, with legend element containing the title for each of them. - Other table semantic facilities: thead element, tbody element, tfoot element
Put thead, tbody and tfoot tags respectively around the header part, body part, and footer part of the table for semanticality.
Attributes (that you should have a good grip of and use frequently):
- Make meaningful id and class names.
- Alternative text for images: <img ... alt="..." />
Always provide an alt attribute to images, i.e. img elements. - Titles: <a ... title="...">...</a>
Title property helps users distinguish your content more easily and furtherly. Almost all presentational elements accept it, so use it as much as possible, especially for links, i.e. a elements. - Table summaries: <table ... summary="...">...</table>
Always provide a summary for real tables. - Language specification: <html lang="..." xml:lang="..."></html>
Almost all XHTML elements accept language specifications. Always provide your html element and other elements wherein texts are in languages other than that specified in the html element with them.
A more formal list of semantic XHTML elements and attributes as well as a collection of more in-depth articles is available at microformats.org/wiki.
posted by yang yang at 8:36 PM
permalink
Kavoir
»Post a Comment
0 Comments:
»Post a Comment
Links to this post:
Create a Link
« Home