posh-patterns

POSH patterns

To help discover and make it easier to write proper plain old semantic html (posh), this page documents known patterns of POSH markup used in the wild (no theoretical patterns please, markup from actual URLs on the public web), especially when there is some amount of analysis regarding the patterns.

For a longer description of POSH patterns, see Jeremy Keith's blog post: POSH Patterns.

This page is a stub and could use your help in expanding it. Please read POSH resources, and add good examples you find there along with some analysis.

patterns

navigation

Examples have been provided in IRC (e.g. "Latest New Content" in http://www.communitymx.com/content/article.cfm?page=2&cid=97480 ) that show a pattern of

• icon/thumbnail/graphic
• hyperlink to a site section
• brief description

From the markup of that page (empty elements removed, whitespace added)

<ul>
 <li>
  <img src="/images/photoshopicon.gif" alt="" />
  <a href="/abstract.cfm?cid=34D68">Retro Fitting a Color Match</a>
 </li>
 ...
</ul>

This could be improved both for usability by wrapping the hyperlink around the image (so that clicking the image, something that users often do, does something), and adding the existing rel value from HTML4 rel="section" to the hyperlink:

<ul>
 <li>
  <a rel="section" href="/abstract.cfm?cid=34D68">
   <img src="/images/photoshopicon.gif" alt="" />
   Retro Fitting a Color Match
  </a>
 </li>
  ...
</ul>

Comments

Tantek Çelik suggested this pattern for comments in the The Elements of Meaningful XHTML:

<ol>
  <li>
    <cite><!-- user's name goes here --></cite>:
    <blockquote><p>
      <!-- comment goes here -->
    </p></blockquote>
  </li>
  ...
</ol>

• It's good embrace of underused semantic mark-up, but authors should consider whether the comments included on their pages are really quotes, since in most cases, a comment written in response to a post is original content, published for the first time, not a quote from another source. Consider separate hAtom entries for each comment instead. --BenWard 22:09, 7 July 2009 (UTC)
  • But comments are exactly that - "a quote from another source" - they are words quoted from another (other than the site/blog owner itself typically) source, a person in this case, rather than a written work. I think the HTML 4.01 definition of blockquote is sufficiently broad to allow for this interpretation, hence the markup suggestion in the first place. Note that since there is no written (online or printed) source that is being referenced, that is exactly why I recommend using the cite element in this case to markup *just* the commenter's name, since the commenter is the source. -- Tantek 23:54, 7 July 2009 (UTC)

Bibliography

Suggested in The Elements of Meaningful XHTML:

<ol>
  <li>
    <cite><!-- your reference goes here --></cite>
  </li>
  ...
</ol>

related

• posh
• poshformats