You are here:
- Manual
- Development
- Descriptive markup
- Writing
- Headings
Descriptive markup: Headings
For headings the web developer can use the heading elements: h1, h2, h3, h4, h5 and h6. The <h1></h1> tags are used for the most important headings on a page, the <h2></h2> for the headings underneath them, <h3></h3> for the headings underneath them, and so forth.
When applying a heading the web developer should determine where it belongs in the hierarchy and use the heading elements of the corresponding level.
Use markup for headings that express the hierarchy of information on the page.
Guideline R-pd.3.2
Do not skip any levels
It is advisable not to skip any levels in the heading hierarchy, like in the following example.
In this example the h2 heading was skipped (HTML)
<h1>The latest news</h1>
<h3>Petrol price up two cents</h3>
As a standard feature an h3 element is displayed smaller than an h2 element. Although the smaller size may be desirable, it is structurally inaccurate. CSS (Cascading Style Sheets) can be used to make an h2 element look smaller so that it is structurally accurate while providing the desired visual effect.
The W3C HTML 4.01 specification does not give any rules against skipping levels in the heading hierarchy. ISO HTML, on the other hand, forbids it. From a practical point of view, the decision was taken for this manual to discourage skipping levels, but not forbid it outright.
Do not skip any levels in the hierarchy of headings in the markup.
Guideline R-pd.3.3
Other types of headings
In addition to the heading elements, several other elements can be used for headings in special situations. This includes caption for tables and legend for forms.
References to subtopics
Sometimes, a page may contain many headings. Administrators of other websites, as well as the web developers and content managers of the site itself will sometimes want to link to a specific part of the page. This can be done by adding a unique anchor to each heading.
Adding anchors to headings (HTML)
<h2 id=“cvb”>The executive committee</h2>
It is also possible to use a unique number, for instance, a (sub-) chapter number. For example id="H3-2-4a". (The id attribute may not contain any full stops and must start with a letter, hence the use of hyphens and the letter H)
Links to these anchors can be made from other pages (and also on the same page, as shown in the following example.
Linking to anchors (HTML)
<a href="http://overheid.nl/organisatie/indeling.html#cvb">Proactively indicating anchors in several headings on a page increases the options of linking information and therefore stimulates the acccessibility of this information. See also Links to page anchors.
