HTML and CSS Reference
In-Depth Information
Styling headings in HTML5
All this clever stuff presents a challenge to authors of CSS.
Given that
can potentially be the same logical levels, you might wish to
apply the same styling to them. This can lead to gigantic blocks
of rules in your style sheets. There has been some talk of a new
CSS pseudo-class or pseudo-element like :heading( n ) (as inter-
nally the browser will “know” what level a heading is from the
outlining algorithm) which would simplify styling:
*:heading(1) {font-size: 2.5em;} /* a logical <h1> */
*:heading(2) {font-size: 2em;} /* a logical <h2> */
However, at the time of this writing, this is but a wonderful
dream. As a stopgap, Mozilla is experimenting with a new selec-
tor grouping mechanism in Firefox nightlies called :-moz-any()
that allows a form of CSS shorthand—go to http://hacks.mozilla.
org/2010/05/moz-any-selector-grouping/ to learn more.
Perhaps, for this reason, you would be tempted to use only <h1>
elements to simplify styling, and let the outlining algorithm do
the rest. After all, the spec says, “Sections may contain headings
of any rank, but authors are strongly encouraged to either use
only h1 elements, or to use elements of the appropriate rank for
the section's nesting level.” But you shouldn't (yet) as it harms
The outlining algorithm
and accessibility
A recent survey by WebAIM showed that 57 percent of screen
reader users use a site's headings structure as their first method to
find information on a lengthy site. (See the full survey for more vital
information at ) .
These people use the hierarchy of headings both to give them-
selves a mental overview (an outline!) of the document they're in
and also to navigate through that content. Most screen readers
Search WWH ::

Custom Search