Revision as of 07:30, 29 May 2007

Plain Old Semantic HTML (POSH)

POSHのホームページへようこそ。

起源

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.

理由

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

POSHとは？

POSHとは、Webページを作成する際に意味的なHTMLを用いることのベストプラクティスを簡潔にあらわしたものです。意味的なHTMLとは、HTML 4.01（またはXHTML 1.0）にある要素と属性のなかで、表現的ではなく意味的なものから成るサブセットのこと。POSHを習い理解する最も良い方法は、実践することです。あなたのWebサイトからいちページを選び、POSHチェックリストを適用してください。POSHプロセスに則り、そのまま続けてください。POSHについてより詳しく学ぶには、POSHリソースをお読みください。

POSHプロセス

あなたがPOSHであるために、そしてあなたのウェブサイトをPOSHなものにするためには、何ができるでしょうか？

POSHなコンテンツを公開する。POSHリソースに目を通し、あなたのウェブサイトでvalidなsemantic (X)HTMLを公開し、それに伴ってsemantic-class-namesを使用するように心がけましょう。
POSHを広める。このページへのリンクを貼って、他の人たちもPOSHになるように、そしてウェブサイトをPOSH対応させる（POSHify）ように勧めてみましょう。
POSHを改善する。より多くの人が手軽にウェブサイトをPOSH対応させられるように、POSHリソースの収集をお手伝いください。

POSHチェックリスト

The first rule of POSH is that you must validate your POSH.
Second, drop the use of TABLEs for purely presentational purposes, spacer GIFs, and presentational-html in general.
Next, fix your Bed and Breakfast markup.
Eliminate Anorexic Anchors.
Use good semantic-class-names.
...

POSHリソース

POSHチュートリアル

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

Validating your css and html A simple step by step guide to how and why you should validate your markup
...

POSH関連ブックマーク

Check out the Ma.gnolia POSH Group

POSH関連プレゼンテーション

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.

CSS: Between the Style Sheets by Tantek Çelik (2003-03), specifically, see slides 3-4,6 starting with "Leaving the ed & eakfast", and slide 9 "CSS & the Semantic Spectrum" which provides an overview of the semantic spectrum of (X)HTML tags.
real world semantics (2004-02-11)
Semantic XHTML: Can your website be your API? - Using semantic XHTML to show what you mean (2004-09-28)
The Elements of Meaningful XHTML (2005-09-29, first version: 2005-03-13 at SXSW Interactive).
...
See also more microformats presentations in general.

POSH関連書籍

Modern web design books which document good semantic HTML practices.

Web Design in a Nutshell, Third Edition by Jennifer Niederst Robbins See Jenville.
Microformats empowering your markup for Web 2.0 by John Allsopp. Chapter 3 is a detailed and practical overview of the appropriate use of structural, valid and semantic HTML.
Semantics, Standards and Styling by Paul Haine.

POSH関連雑誌

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.

A List Apart: For People Making Websites (see in particular HTML and XHTML Articles)
Digital Web Magazine

POSH関連ブログ

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.

David Baron's weblog
Jeffrey Zeldman Presents
meyerweb.com - Eric Meyer
Microformatique - John Allsopp
SimpleBits - Dan Cederholm (see in particular SimpleQuiz)
Tantek Çelik
...

POSH関連ブログ記事

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.

Bed and BReakfast markup (B&BR) (2002-10-22) - avoiding nonsemantic uses of old and eak tags and using <h3>adings and aragraphs instead.
<A>norexic </A>nchors (2002-11-28) - use the "id" attribute on existing elements instead of adding empty <a name="foo"></a> elements. Use rel-bookmark for post permalinks within the document.
A Touch of Class (2002-12-16) - introduction to proper use of the HTML 'class' attribute.
Dive into Semantic MARKup (2002-12-31)
Comment markup, presentation and plumbing (2003-01-04) - how to markup a list of comments, including example use of the rare "hreflang" attribute.
Competent Classing by Eric Meyer (2004-07-18)
More about the 'class' attribute (2004-07-20)
Web Standards in the Real World: An Interview with Molly Holzschlag (2005-06-01)
Webpatterns and websemantics (2005-11-18)
Writing Semantic HTML by Jesse Skinner (2006-02-22)
Who will read your Semantic HTML? by Jesse Skinner (2007-01-04)
Semantics in HTML by John Allsopp (2007-01-08 - 2007-03-12)
- Part I - Traditional HTML Semantics (2007-01-08)
- Part II - standardizing vocabularies (2007-02-20)
- Part III - Towards a semantic web (2007-03-12)
Built in HTML semantics A list of the semantic elements and attributes of HTML by John Allsopp (2007-01-08)
The Importance of Being POSH by Tantek Çelik (2007-04-20)
Getting back to POSH (Plain ol’ Semantic HTML) by Chris Messina (2007-04-21)
I’m POSH - are you? (2007-04-23)
The Internet’s Upper Class Or Why Your Site Should Be POSH (2007-04-24)
On Appropriate Use of DIVs, or When Divitis Doesn’t Apply by Nate Koechley, 2006-12-15
Quick Comment: Choose Class/ID Names Based on Semantic and/or Structural Meaning by Nate Koechley, 2006-12-22
...

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

POSH関連ポッドキャスト

A talk about POSH in the .Net magazine podcast episode 8 (56 minutes; 26 Mb. Relevant section 30:10-42:40)

POSHにまつわる隠れた情報源

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

Use the Sandbox or K2 themes that already support hAtom and hCard
Add the hCard About Widget to your site

POSHを広める

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

Promote POSH. Make a POSH button (perhaps using semantic HTML and CSS ;) linking to this page and put it on your site, 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:
- - CC-by-3.0
- - CC-by-3.0
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 posh-testimonial!
Come up with more ideas to help spread POSH. Here are a few.
- Hold a PoshPit - a one or half day marathon session mixing semantic HTML experts with folks who maintain/run web sites in general and see how many websites you can collectively upgrade to POSH during the course of the day.
- ...

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?

歴史

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