456 Berea Street
2nd Nov 2007, 08:14 am
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 (http://microformats.org/) IRC channel almost seven months ago, I can now start advocating the use of POSH (http://microformats.org/wiki/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 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 POSH 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 It would sure be nice to see widespread use of POSH sooner rather than later. So get out there and make sure all the websites you design or program use POSH. Teach all your colleagues and clients about POSH. Use it, talk about it, blog about it. If you don't already, start Explaining Semantic Mark-Up (http://www.robertnyman.com/2007/10/29/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 POSH 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 (http://www.456bereastreet.com/archive/200410/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 (http://www.456bereastreet.com/archive/200411/quotations_and_citations_quoting_text/). And don't forget to Use only block-level elements in blockquotes (http://www.456bereastreet.com/archive/200705/use_only_blocklevel_elements_in_blockquotes/).
For images, make proper use of The alt and title attributes (http://www.456bereastreet.com/archive/200412/the_alt_and_title_attributes/).
Use HTML list elements (ul, ol, dl) to mark up lists. More info in Tommy Olsson's Lists (http://www.autisticcuckoo.net/archive.php?id=2007/08/07/lists) and Mike Cherim's Using HTML Lists Properly (http://green-beast.com/blog/?p=185).
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?
Visit site to read or post comments… (http://www.456bereastreet.com/archive/200711/posh_plain_old_semantic_html/#comments)Add 456 Berea Street to your Technorati favorites. (http://technorati.com/faves?add=http://www.456bereastreet.com)
Posted in (X)HTML (http://www.456bereastreet.com/archive/categories/xhtml/).
http://feeds.feedburner.com/~a/456bereastreet?i=a1FDRT</img> (http://feeds.feedburner.com/~a/456bereastreet?a=a1FDRT)
http://feeds.feedburner.com/~f/456bereastreet?i=kPDsm4b</img> (http://feeds.feedburner.com/~f/456bereastreet?a=kPDsm4b) http://feeds.feedburner.com/~f/456bereastreet?i=JHRq2qb</img> (http://feeds.feedburner.com/~f/456bereastreet?a=JHRq2qb) http://feeds.feedburner.com/~f/456bereastreet?i=So8xHKB</img> (http://feeds.feedburner.com/~f/456bereastreet?a=So8xHKB) http://feeds.feedburner.com/~f/456bereastreet?i=BbOjueb</img> (http://feeds.feedburner.com/~f/456bereastreet?a=BbOjueb)
http://feeds.feedburner.com/~r/456bereastreet/~4/178331257
More... (http://feeds.feedburner.com/~r/456bereastreet/~3/178331257/)
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 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 POSH 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 It would sure be nice to see widespread use of POSH sooner rather than later. So get out there and make sure all the websites you design or program use POSH. Teach all your colleagues and clients about POSH. Use it, talk about it, blog about it. If you don't already, start Explaining Semantic Mark-Up (http://www.robertnyman.com/2007/10/29/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 POSH 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 (http://www.456bereastreet.com/archive/200410/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 (http://www.456bereastreet.com/archive/200411/quotations_and_citations_quoting_text/). And don't forget to Use only block-level elements in blockquotes (http://www.456bereastreet.com/archive/200705/use_only_blocklevel_elements_in_blockquotes/).
For images, make proper use of The alt and title attributes (http://www.456bereastreet.com/archive/200412/the_alt_and_title_attributes/).
Use HTML list elements (ul, ol, dl) to mark up lists. More info in Tommy Olsson's Lists (http://www.autisticcuckoo.net/archive.php?id=2007/08/07/lists) and Mike Cherim's Using HTML Lists Properly (http://green-beast.com/blog/?p=185).
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?
Visit site to read or post comments… (http://www.456bereastreet.com/archive/200711/posh_plain_old_semantic_html/#comments)Add 456 Berea Street to your Technorati favorites. (http://technorati.com/faves?add=http://www.456bereastreet.com)
Posted in (X)HTML (http://www.456bereastreet.com/archive/categories/xhtml/).
http://feeds.feedburner.com/~a/456bereastreet?i=a1FDRT</img> (http://feeds.feedburner.com/~a/456bereastreet?a=a1FDRT)
http://feeds.feedburner.com/~f/456bereastreet?i=kPDsm4b</img> (http://feeds.feedburner.com/~f/456bereastreet?a=kPDsm4b) http://feeds.feedburner.com/~f/456bereastreet?i=JHRq2qb</img> (http://feeds.feedburner.com/~f/456bereastreet?a=JHRq2qb) http://feeds.feedburner.com/~f/456bereastreet?i=So8xHKB</img> (http://feeds.feedburner.com/~f/456bereastreet?a=So8xHKB) http://feeds.feedburner.com/~f/456bereastreet?i=BbOjueb</img> (http://feeds.feedburner.com/~f/456bereastreet?a=BbOjueb)
http://feeds.feedburner.com/~r/456bereastreet/~4/178331257
More... (http://feeds.feedburner.com/~r/456bereastreet/~3/178331257/)