posh

(Redirected from plain-old-semantic-html)

Jump to: navigation, search

Contents

Plain Old Semantic HTML (POSH)

Welcome to the POSH home page.

Origins

The acronym POSH was coined on 6 April 2007 on the microformats IRC channel, by <kwijibo> as a shorthand abbreviation for "plain old semantic HTML". A discussion on among John Allsopp, Tantek Çelik, Jeremy Keith, and Chris Messina at the Microformats Dinner 2007 April 18 following Web 2.0 Expo reraised the idea of POSH and the importance of promoting the broader goal of POSH, which microformats are built from and are a proper subset of. For more see History.

Why

The term semantic-html is a mouthful, and belies both how simple it is, how well established it is among modern web designers, and the fact that it has benefits far beyond the obvious doing the right thing for the Web by using semantic markup. We need a simple short mnemonic term that captures the essence of the concept, and is easily verbed (to posh, poshify, poshed up).

What

POSH encapsulates the best practices of using semantic HTML to author web pages. Semantic HTML is the subset of HTML 4.01 (or XHTML 1.0) elements and attributes that are semantic rather than presentational. The best way to learn and understand POSH is to do it. Pick a page on your web site to begin with, and apply the POSH Checklist to it. Continue with the POSH Process. Read POSH Resources to learn more about POSH.

The POSH Process

What can you do to be POSH and to make your websites POSH?

  1. Publish POSH content. Read POSH resources and make sure your website publishes valid semantic (X)HTML, and uses semantic-class-names accordingly.
  2. Spread POSH. Encourage others to be POSH and POSHify their websites by linking to this page.
  3. Improve POSH. Help us gather resources to enable more people to easily POSHify their websites.

The POSH Checklist

poshformats

The term "poshformats" distinguishes one-off, ad-hoc or more informal class-name based formats efforts from the more formally researched and documented microformats. Another way of describing the distinction is that microformats are the proper subset of poshformats which have been developed empirically via research and a formal methodology per the microformats process and principles, rather than made-up a priori.

See poshformats for more.

Resources

POSH Patterns

As proper use of semantic HTML and discussions thereof predate microformats by quite a bit, there are numerous resources that document such POSH Patterns. In order to help discoverability and re-use, take a look at (and add what you find to)

POSH Tutorials

Step by step tutorials to create POSH content or upgrade existing content to POSH.

POSH Bookmarks

POSH Presentations

Presentations which explain and advocate concepts and techniques for utilizing semantic HTML. If/when this section gets too big, we can move it to posh-presentations.

POSH Books

Modern web design books which document good semantic HTML practices.

POSH Magazines

Online (and off) magazines which frequently publish articles about semantic HTML. If/when this section gets too big, we can move it to posh-magazines.

POSH Blogs

Blogs that with some regularity post high quality discussions, insights, and in general have advanced the state of the art of POSH. If/when this section gets too big, we can move it to posh-blogs.

POSH Blog posts

Blog posts that provide specific, modern, guidance, techniques and tips for using more and better semantic HTML. This list is incomplete. We know there are lots more blog posts out there that fit the aforementioned description - please add them! If/when this section gets too big, we can move it to posh-blog-posts.

See more blogs talking about "semantic HTML" and POSH.

POSH Podcasts

If/when this section gets too big, we can move it to posh-podcasts.

Hidden POSH Treasures

The following sites have POSH related articles, tutorials etc. on them, but you have to dig for them from the home page. Help find the hidden POSH treasures in these sites and add direct links to POSH related articles, tutorials etc. to the specific sections above. You can leave the top level site links here until/unless you have dug thru the entire site and found all the treasures.

POSH Bling for your Blog

If you want to improve your existing blog, there are some pretty simple things you can do:

WordPress

external POSH brainstorming

A couple of external wikis have been created to brainstorm and explore posh-patterns.

Spread POSH

Now that you've poshified your website(s), what next? Well, help spread POSH to other websites!

Improve POSH

As you read the POSH resources documented here, what other POSH resources did you find? Add them to this page.

With your experience with both poshifying your sites and helping others do so, what have you learned? What kind of issues did you run into? What questions were commonly asked? What do you feel like you need to more easily and quickly help more people poshify their content?

History

A brief history of references to "POSH" in this context and "plain old semantic HTML".

plain old semantic HTML

The earliest references to "plain old semantic HTML" that have been found so far are:

If you can find earlier references, please add them and include a brief quotation of the context of the reference to "plain old semantic HTML".

posh was last modified: Sunday, April 7th, 2013

Views
{"cc_re__cc_re__cc_by_3_0": ["ite, in your blogroll, in your footer, etc.  Maybe even come up with a nice POSH button graphic and share it with the microformats community with a liberal license (public domain, CC-by-3.0, MIT, etc.) Like these:\n<ul><li> <a href=\"http://redmonk.net/archives/2007/04/25/the-new-question/\" class=\"external text\" title=\"http://redmonk.net/archives/2007/04/25/the-new-question/\" rel=\"nofollow\"><img src=\"http://redmonk.net/mt/mt-static/uploads/2007/04/are_you_posh.png\" alt=\"are_you_posh.png\" /></a> - <a href=\"http://creativecommons.org/licenses/by/3.0/\" class=\"external text\" title=\"http://creativecommons.org/licenses/by/3.0/\" rel=\"nofollow\">CC-by-3.0</a>\n</li><li> <a href=\"http://www.hauntedpalace.net/pandora/craic/poshscribbles.png\" class=\"external text\" title=\"http://www.hauntedpalace.net/pandora/craic/poshscribbles.png\" rel=\"nofollow\"><img src=\"http://www.hauntedpalace.net/pandora/craic/poshscribbles.png\" alt=\"poshscribbles.png\" /></a> &#8212; <a href=\"http://creativecommons.org/licenses/by/3.0/\" class=\"external text\" title=\"http://creativecommons.org/licenses/by/3.0/\" rel=\"nofollow\">CC-by-3.0</a>\n</li><li> <a href=\"http://www.h", "ou_posh.png\" alt=\"are_you_posh.png\" /></a> - <a href=\"http://creativecommons.org/licenses/by/3.0/\" class=\"external text\" title=\"http://creativecommons.org/licenses/by/3.0/\" rel=\"nofollow\">CC-by-3.0</a>\n</li><li> <a href=\"http://www.hauntedpalace.net/pandora/craic/poshscribbles.png\" class=\"external text\" title=\"http://www.hauntedpalace.net/pandora/craic/poshscribbles.png\" rel=\"nofollow\"><img src=\"http://www.hauntedpalace.net/pandora/craic/poshscribbles.png\" alt=\"poshscribbles.png\" /></a> &#8212; <a href=\"http://creativecommons.org/licenses/by/3.0/\" class=\"external text\" title=\"http://creativecommons.org/licenses/by/3.0/\" rel=\"nofollow\">CC-by-3.0</a>\n</li><li> <a href=\"http://www.hauntedpalace.net/pandora/craic/poshChopin.png\" class=\"external text\" title=\"http://www.hauntedpalace.net/pandora/craic/poshChopin.png\" rel=\"nofollow\"><img src=\"http://www.hauntedpalace.net/pandora/craic/poshChopin.png\" alt=\"poshChopin.png\" /></a> &#8212; <a href=\"http://creativecommons.org/licenses/by/3.0/\" class=\"external text\" title=\"http://creativecommons.org/licenses/by/3.0/\" rel=\"nofollow\">CC-by-3.0</a>\n</li></ul>\n</li><li> Tell a friend. Talk to", "oshscribbles.png\" alt=\"poshscribbles.png\" /></a> &#8212; <a href=\"http://creativecommons.org/licenses/by/3.0/\" class=\"external text\" title=\"http://creativecommons.org/licenses/by/3.0/\" rel=\"nofollow\">CC-by-3.0</a>\n</li><li> <a href=\"http://www.hauntedpalace.net/pandora/craic/poshChopin.png\" class=\"external text\" title=\"http://www.hauntedpalace.net/pandora/craic/poshChopin.png\" rel=\"nofollow\"><img src=\"http://www.hauntedpalace.net/pandora/craic/poshChopin.png\" alt=\"poshChopin.png\" /></a> &#8212; <a href=\"http://creativecommons.org/licenses/by/3.0/\" class=\"external text\" title=\"http://creativecommons.org/licenses/by/3.0/\" rel=\"nofollow\">CC-by-3.0</a>\n</li></ul>\n</li><li> Tell a friend. Talk to web design friends about POSH and convince and help them to poshify both their personal websites, and the websites they build for others.  Blog about your experience with poshification and what steps you went through to poshify your websites. Write a <a href=\"/wiki/posh-testimonial\" class=\"mw-redirect\" title=\"posh-testimonial\">posh-testimonial</a>!\n</li><li> Come up with more ideas to help spread POSH.  Here are a few.\n<ul><li> Hold a Pos"]}