@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. jogjaadv reblogged this from boblet
  2. white-shoes-shop reblogged this from boblet
  3. homedecorlighting reblogged this from boblet
  4. homeworkhelp1 reblogged this from boblet
  5. lincoln-nail-technician reblogged this from boblet
  6. freesamplesuk reblogged this from boblet
  7. izrada-web-sajtova reblogged this from boblet
  8. customized-essay reblogged this from boblet
  9. appleiphone5s reblogged this from boblet
  10. gorczycajexp593398 reblogged this from boblet
  11. coupons-for-food reblogged this from boblet
  12. sex-toys-for-men-online reblogged this from boblet
  13. top-link-building-service reblogged this from boblet
  14. fwtistika reblogged this from boblet
  15. packers-movers-bangalore reblogged this from boblet
  16. movers-singapore reblogged this from boblet
  17. hcg-diet-canada reblogged this from boblet
  18. packers-movers-hyderabad reblogged this from boblet
  19. toms-best-wine-club-reviews reblogged this from boblet
  20. packers-movers-gurgaon reblogged this from boblet
  21. psdtohtmlshop reblogged this from boblet
  22. etipznet1 reblogged this from boblet
  23. wikicook reblogged this from boblet
  24. amazon-discount-coupon-codes reblogged this from boblet
  25. poems-about-love reblogged this from boblet
  26. miele-vacuum-reviews reblogged this from boblet
  27. selectionc reblogged this from boblet
  28. autorepairsanantonio reblogged this from boblet
  29. slimbay reblogged this from boblet
  30. shrimp-farming reblogged this from boblet
  31. woodlandstx45 reblogged this from boblet
  32. boblet posted this