@boblet

lest I forget (Oli Studholme)

HTML5 id/class name cheatsheet

Or, “The mapping of HTML5 structural elements to id and class names for use with <div>s”

Drawn from the fine work of Andy Clarke (Marlarkey) and Jon Tan(gerine), esq.

Note: I’ve moved all my HTML5 articles to http://oli.jp/, so I can walk the walk. I’ll leave this here for posterity, but won’t update it (umm)
→ Go to: “HTML5 id/class name cheatsheet” on oli.jp

Further reading at More on developing naming conventions, Microformats and HTML5 and Microformats: The Fine Art of Markup: hAtom by Andy, and Preparing for HTML5 with Semantic Class Names by Jon, with reference to the current HTML5 working draft (also on the W3 site), and the Microformats Wiki. More links in the addenda at the end.

  • body
    • #branding.header <header>
      • h1
      • #content-introduction
      • #tagline
    • ul#site.nav <nav> (Andy had #main.nav)
    • .section <section> (hAtom: .hfeed)
      • .article <article> (hAtom: .hentry)
        • .header <header>
          • h1(.title) (hAtom: .entry-title)
          • p(.meta) (see below for additional inline hAtom elements)
        • .entry-content (hAtom: optional content wrapper, don’t include .entry-title, .published or .author children)
        • p.summary (hAtom: .entry-summary)
        • p…
        • .figure <figure> (on div or dl)
          • img (also audio/video embed)
          • .legend <legend>
        • ul.datagrid
        • .colgroup (columnar data)
          • .col
          • .col…
        • dl.dialog <dialog> (for conversations)
      • .aside <aside> (sidebar, pullquote etc)
        • p.summary (hAtom: .entry-summary)
        • ul.sub.nav (or #sub.nav for page-level sub-navigation)
      • .footer <footer> (for section)
    • [#page].footer (Andy had #footer but this means no .section .footers)
      • ul#supp.nav (“supp” is short for supplementary)
      • .vcard (µF)
        • .adr
          • .street-address
          • .locality (=city/town/village)
          • .region (=prefecture/state/county)
          • .postal-code
          • .country-name
        • .tel

Note that some elements use ids (eg #site.nav) because of IE6’s inability to recognise multiple CSS class selectors, so the id is needed for specificity. For example div.site.nav {} is interpreted by IE6 as div.nav {}, but div#site.nav {} works. Also, in general putting an id on things makes CSS rules easier and faster.

hAtom inline elements

Note that .published and .author are outside .entry-content, and could be in .footer etc

  • abbr.published[.updated] (hAtom publication date, using title="yyyymmdd" for machine-readable date)
  • address.author.vcard (hAtom author contact info; .vcard must contain .fn, probably on a[.url])
  • a.bookmark (hAtom: article permalink, eg on page listing articles)
  • a rel="tag" (hAtom: for links to category or tag archives anywhere inside .hentry)

Style Key

  • HTMLelement#id.class—(optional) HTML element, then id and/or class
  • <HTML5 tag>—where the id/class name comes from, & for people living in the future
  • (a note or further explanation)
  • (hAtom: .class)—alternative class name from hAtom
  • [optional]
  • Indenting is based on element nesting

Hope that makes more sense!

Questions? Feedback? Mistakes? Let me know via Twitter (@boblet)…

Changes

20081205 Update: Added hAtom info

20090110 Update: Check out Bruce Lawson’s efforts to get HTML5 structural tags working in current browsers. More info in his HTML 5 elements test article

20090117 Update: Oh crap. Linked to by Jeremy Keith in “The Rise of HTML5” and Cameron Moll in “12 resources for getting a jump on HTML 5”, and now worried this doesn’t make sense (hope the key helps, Cameron). Lucky Tumblr doesn’t have comments huh :) Thanks for the link, gentlemen.

20090520 Update: I originally wrote this to use with HTML4 doctype content, but there’s nothing to stop you using this with the HTML5 doctype right now. The UX London site by @adactio and @natbat is an example of this.

20090707 Update: I added some links to other HTML5 articles I wrote recently, and changed “tag” to “element” where that was what I meant.

20100524 Update I removed some of the now-dropped elements (<legend>, <datagrid>), and rewrote the conclusion. This needs to be updated with appropriate ARIA roles, but that’s another article.

Notes

  1. capital-ventures reblogged this from boblet
  2. glennspiro-taichi reblogged this from boblet
  3. taichi-routine reblogged this from boblet
  4. ark-dinner reblogged this from boblet
  5. eim-group reblogged this from boblet
  6. wordpress-developers-uk reblogged this from boblet
  7. lincoln-makeover reblogged this from boblet
  8. eu-cookie-law reblogged this from boblet
  9. fokakier21 reblogged this from boblet
  10. farmakeio21 reblogged this from boblet
  11. dirpros92 reblogged this from boblet
  12. prosdir23 reblogged this from boblet
  13. dextermax reblogged this from boblet
  14. jogjaadv reblogged this from boblet
  15. freesamplesuk reblogged this from boblet
  16. izrada-web-sajtova reblogged this from boblet
  17. customized-essay reblogged this from boblet
  18. toms-best-wine-club-reviews reblogged this from boblet
  19. packers-movers-gurgaon reblogged this from boblet
  20. psdtohtmlshop reblogged this from boblet
  21. boblet posted this