Use of Headings
by WebAIM
Using Headings for Content Structure
Despite the nature of the Web and the vast change in its role from a
structural medium to a visual media, it is still important that Web content
be designed with proper structure. With better support for Cascading Style
Sheets in recent versions of Web browsers, developers can change the
appearance of structural elements to meet their design and visual
preferences.
Example
View the content
structure of one of your Web pages by accessing
http://validator.w3.org/detailed.html. Enter the Web
page URL into the
text box, check the Show Outline
checkbox, and press Validate this page.
For now, ignore any HTML
errors that are shown and scroll to the bottom of the page to see the
page's outline. You will see a brief outline of the content structure of
your Web page as defined by headers tags (<h1>
- <h6>). If the output does not look like a
real outline, it is likely that the heading tags are not being used
properly (or that there are not any heading tags).
Screen reader and other assistive technology users have the ability to
navigate Web pages by structure. This means that the user can read or jump
directly to top level elements (<h1>), next
level elements (<h2>), third level elements (<h3>),
and so on. Viewing or listening to this outline should give them a good idea
of the contents and structure of the page.
Heirarchy of Headings
Pages should be structured in a hierarchical manner, with 1st degree
headings (<h1>) being the most important
(usually page titles or heading), then 2nd degree headings (<h2>
- usually major section headings), down to 3rd degree headings (sub-sections
of the <h2>), and so on. Technically, lower
degree headings should be contained within headings of the next highest
degree. The following outline shows the hierarchy of what a Web page might
contain. In fact, it represents the hierarchy of the main content section of
this page, with different degrees of headers to represent higher or lower
levels of content hierarchy. You can click on any of the heading items to
jump to that section within this page.
- Heading 1
- Heading 2
--------
--------
- Heading 2
--------
--------
- Heading 2
--------
--------
- Heading 3
--------
--------
Using Headings Correctly
Do not use text formatting, such as font size or bold to give the
visual appearance of headings - use actual heading (<h1>
- <h6>) for all content headings.
Assistive technologies and other browsers rely upon the literal markup of
the page to determine structure. Items that are bolded or display in a
bigger font are not interpreted to be structural elements.
Likewise, do not use headers to achieve visual results only.
For instance, if you want to highlight or emphasize an element within your
content that is not a heading (such as I did with the previous sentence), do
not use heading tags to achieve the visual appearance you want. Instead, use
font size, bold, or italics. Actually, you should use styles to achieve
visual results. If you want to emphasize something, you technically should
use the <strong> tag instead of
<bold> and the <em>
tag instead of <i>. Bold and italics (<i>)
both connote visual emphasis, whereas strong and emphasis (<em>)
suggest semantic emphasis. Visually, <b> and
<strong>, and <em>
and <i> look exactly the same, but developers
should use the more proper HTML
tags. In Dreamweaver, you can select Edit >
Preferences > General and select Use
<strong> and <em> in place of <b> and <i>.
posted on Jun 6, 2007
Article
Topics
Google