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 inlinehAtomelements)
.entry-content(hAtom: optional content wrapper, don’t include.entry-title,.publishedor.authorchildren)p.summary(hAtom:.entry-summary)p….figure<figure>(ondivordl)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.navfor page-level sub-navigation)
.footer<footer>(for section)
[#page].footer(Andy had#footerbut 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, usingtitle="yyyymmdd"for machine-readable date)address.author.vcard(hAtom author contact info;.vcardmust contain.fn, probably ona[.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.
Tags: html5 divcss web 编程这点事 |
原创文章如转载，请注明：转载自：巴士飞扬-技术BLOG : http://www.busfly.net/
本文链接地址：http://www.busfly.net/post/HTML5-name-cheatsheet.html
如果你喜欢本文，请顶一下，支持我，你的支持是我继续发好文章的最大动力。谢谢。
好东西需要分享，快把本文发给你的朋友吧~!~
