Find me at...

15 March, 2012
Velocity Conference, Online

2 April, 2012
JSConf, Scottsdale, AZ

Don’t Style Headings Using HTML5 Sections

September 6th, 2011

Styling headings is either a deceptively complex problem, or maybe the design of CSS made it appear complex when it need not have done.

When styling headings (or really anything) we want three big goals to be met:

  1. DRY – Do not repeat yourself. We want to set headings once and never (ok, rarely!) repeat those font styles or selectors. This will make our site easier to maintain.
  2. Predictable – The heading should look the same no matter where on the page it is placed. This will make creating new pages and content easier.
  3. Keep specificity low and selectors as simple as possible. This will help with performance and keep the site from growing more and more tangled over time.

The html5 section tag is weird. It dramatically changes the way we use headings in the HTML. It also changes the way browsers and assistive technologies are meant to interpret those headings. For that reason, we’ve got to revisit how we style headings. The old way simply won’t work anymore!

It is a subtle difference, but section elements are meant to help the browser figure out what level the heading really is, but not necessarily to decide how to style it. By tying styles to browser heading level interpretation, developers (trying to implement html5 from the spec) are ending up with selectors that look like this:

h1{px}
section h1{px}
section section h1{px}
section section section h1{px}
section section section section h1{px}
section section section section section h1{px}
section section section section section section h1{px}
section section section section section section section h1{px}

Learn how this can go awry and a better way of styling headings.

Posted in CSS, Geek, General, oocss, Performance, XHTML / HTML | 31 Comments »

Recent Articles

  • Don’t Style Headings Using HTML5 Sections September 6th, 2011
  • CSS Lint open sourced June 15th, 2011
  • Welcoming Nicholas Zakas to the Team June 3rd, 2011
  • Our (CSS) Best Practices Are Killing US April 28th, 2011
  • Automating CSS 3 Gradients April 25th, 2011

Previous: Performance Double Whammy Hits New Zealand at Webstock

Next: Our (CSS) Best Practices Are Killing US


gipoco.com is neither affiliated with the authors of this page nor responsible for its contents. This is a safe-cache copy of the original web site.