For years I’ve been advocating the use of valid, semantic, accessible, well-structured HTML. It’s a bit of a mouthful to say, but thanks to an acronym being coined on the Microformats IRC channel almost seven months ago, I can now shorten that to POSH instead.
POSH, in case you haven’t heard of it already, is short for “Plain Old Semantic HTML”, and is obviously much quicker and easier to say than “valid, semantic, accessible, well-structured HTML”. Unfortunately POSH - semantic markup - is also something most people building websites or creating content for the Web have yet to discover. Perhaps a fancy acronym will help speed up adoption.
To start writing semantic markup, you need to:
Validate your HTML
Stop using tables for layout
Use semantic elements and attributes for their intended purpose
Use semantic class names and id values
Use as little HTML as will get the job done
It would sure be nice to see widespread use of semantic HTML sooner rather than later. So get out there and make sure all the websites you design or program use semantic HTML. Teach all your colleagues and clients about semantic HTML. Use it, talk about it, blog about it. If you don’t already, start Explaining Semantic Mark-Up.
The more people use the semantics of HTML correctly, the more reason for various user agents to improve their support for it.
A few practical semantic HTML tips:
Use heading elements (h1 - h6) for headings, and make sure they create a logical outline of the document.
Use tables to mark up tabular data, and use the full set of features (caption, th, scope, headers etc.) provided by HTML 4.01 to make sure that the tables are accessible. Learn more about that in Bring on the tables.
When marking up a quote, use q or blockquote. There are some tips on using them in Quotations and citations: quoting text. And don’t forget to Use only block-level elements in blockquotes.
For images, make proper use of The alt and title attributes.
Use HTML list elements (ul, ol, dl) to mark up lists. More info in Tommy Olsson’s Lists and Mike Cherim’s Using HTML Lists Properly.
Use the em and strong elements for emphasis, not to make text bold or italic (i.e. do not mindlessly replace i and b with em and strong).
Got any other tips? Please comment!!!
Comments[ 3 ]
Helping people, who not only create but write for websites, understand what an outline is and how to use/create an outline, is the perfect way to go.
Write a speach. Start with an outline.
Write a paper. Start with an outline.
Write a book. Start with an outline.
Write an article. Start with an outline.
That's usually how i help even professional writers to understand web. It sounds insane, but the web still seems like a beast to some writers.
Web creators can take this article to task before entering the industry and it should be a prerequisite for all webdesigners/devs, too.
Great work.:)
Luke Dorny
while going nuts about semantics, I found Anne's article very helpful. He's arguing that you shold be using divs in a way that your site will still stand and validate when you take them out:
http://annevankesteren.nl/2005/05/content-models
what a nice post, thanks for this great post.
Post a Comment