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.

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.

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. If you can get away with defining styles via objects like OOCSS it’d be better to change the ids to classes. ids are fast and easy, but they lack flexibility and can become a maintenance headache (specificity).

Note if <aside> is a child of <body> (not <article>) it’s a page sidebar. Same with <header> and <footer>.

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!