How to Use POSH

Validating your HTML is a good step toward 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

• A working knowledge of HTML
• A working knowlege of CSS
• A web site
• 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

1. 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.

2. 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.

3. 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.

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

5. 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.

6. 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

• For tips on keeping your markup as lean as possible, read my article on using descendant selectors in CSS: http://www.ehow.com/how_2084495_use-css-descendant-selectors.html

• 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.

Resources

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