Stepping into attribute selectors

For years we’ve been using IDs in our markup: #wrapper, #page, #header, #footer, #sidebar and other friends. One of the efforts of HTML5 has been recognising these common patterns, and for a for a few years now we’ve had tags like <header>, <footer> and <aside>.

These tags go quite aways to replacing the commonly used IDs in our markup, although due to the nature of document hierarchy, there are commonly many headers and footers within a HTML page.

So, the practice that I’ve been following alongside using the newer tags is the usage of some simple ARIA roles to semantically describe my content.

Specifically, “banner” (“A region that contains mostly site-oriented content, rather than page-specific content”), “main” (“The main content of a document”), and finally “contentinfo” (A large perceivable region that contains information about the parent document).

For those of you who aren’t targeting IE6, or better yet, totally not supporting it, the good news is that IE (7+) supports attribute selectors… and, of course if you wanted to continue to support IE6, you could drop in selectivizr and move on with your life.