How to Use POSH

POSH is Plain Old Semantic HTML. There's a movement afoot to bring everyone who creates Web pages into agreement to use POSH for Web page production. POSH is the building block of valid, semantic, accessible and interoperable websites.

Difficulty: Moderately Easy

Instructions

Things You'll Need:

• Nothing new is needed in this section

What to do

1. To write valid HTML, make friends with the tools that validate your pages. You can use the W3C Markup Validation Service (See Resources for a link). There are also many other available validation tools, such as those in the File > Check Page menu of Dreamweaver, or in the Tools menu of the Firefox Web Developer Toolbar.
   
   When you validate a page, go through each error and correct each one that is in your power to change.

2. Do not use tables for layout. This is probably the most glaring semantic error you can make. Using a table for layout marks up your content as table data, a confusing semantic mismatch that carries through into every device that reads your page. Other devices that might read your page include mobile phones and other mobile devices, screen readers, braille readers, text-only browsers, and search engines.

3. It is perfectly all right to use tables to create the rows and columns you need to display tabular data. That is semantically correct.

4. Use elements and attributes for their semantic purpose. See section two for how to do this.

5. Use meaningful, semantically-based names for classes and ids. Some of the recognized semantic id names in use include header, content, sidebar, footer, and nav. The name is descriptive of the purpose.

6. Don't put any presentational markup in the HTML. Move it all into the CSS.

7. Keep your HTML markup as lean and meaningful as possible. Don't use too many classes when an id assigned to a div, a list, or a blockquote can serve the same purpose.

How to Do It

8. 
   With no CSS, Digital Web Magazine is organized by headings making the content clear

   Use headings semantically. The heading elements go from h1 to h6. The h1 should be the site name, the h2 should be the page or article name, and lesser headings should be used to signify other important blocks of content. Think back to when you learned to make an outline. Your heading structure should create an outline (or hierarchy) of meaningful parts of your page.
   
   If you disable the CSS presentation, and just look at the basic HTML, as in the photo of Digital Web Magazine with CSS disabled, you should still have a meaningfully organized page structure. This is based largely on good use of heading elements.

9. Make your tables (for tabular data only!) accessible by properly using elements like caption and th. Furthermore, use summary, scope, headers and other table attributes properly (when needed) to further clarify your table structure.

10. The em and strong elements are semantic. They imply emphasis or strong emphasis. Do not use them to make text bold or italic if the text is not meant to be emphasized. If you want to use bold or italic text as presentation, stick with the old faithful b and i elements. Even better, create some presentations CSS rules to do the trick.

11. Use the cite element to identify citations such as book, magazine, and movie titles. Cite renders in italics.

12. When you quote some one or refer to a source, use either the q or the blockquote element. Do not use a blockquote to indent text: use CSS for that.

13. Use lists properly. Lists are especially useful for navigation. What is a menu but a list of links, after all? Lists can also be used to create image galleries, dialog, to-do lists, step-by-step instructions and all sort of semantically meaningful content. There are three kinds of lists: ul (unordered list), ol (ordered list), and dl (definition list). There is a resource at the end of the article with a link to The Autistic Cuckoo that will help you understand when to use each type of list.

Tips & Warnings

• In addition to the cite element, there is also a cite attribute. It is used to give the URL of a source. It can be used with a cite element or with a blockquote element.

Who Can Help:

• eFax is the world’s #1 Internet fax service.  Send and receive faxes by email and kiss your fax machine goodbye. 30-Day Free Trial

Resources

• Digital Web Magazine
• W3C Markup Validation Service
• The Autistic Cuckoo

[Veesites]

on 1/15/2008 Thanks for the CSS Play reference. A good resource.

[webmiser]

on 1/14/2008 http://cssplay.co.uk is the best reference on the internet for CSS examples and integration of CSS into pages.

He ( stu nichols )has also published hundreds of examples using CSS, and explains how he deals with compatability between browsers.

[Veesites]

on 11/9/2007 There are lingering browser issues with a few aspects of CSS. When you factor in all the other benefits you get from clean and semantic HTML in every possible internet capable device, you find far more good points than bad.

[scrapsoflife]

on 11/8/2007 I didn't know there was a name for this (POSH) but it's what I try to do now that I'm familiar with CSS. The results are so much better than when tables are used, anyway! The only issue this faces is that not all browsers interpret CSS correctly :(