HTML and XHTML
This technique relates to:
The objective of this technique is to use HTML and XHTML heading markup to provide semantic code for headings in the content. Heading markup will allow assistive technologies to present the heading status of text to a user. A screen reader can recognize the code and announce the text as a heading with its level, beep or provide some other auditory indicator. Screen readers are also able to navigate heading markup which can be an effective way for screen reader users to more quickly find the content of interest. Assistive technologies that alter the authored visual display will also be able to provide an appropriate alternate visual display for headings that can be identified by heading markup.
In the following example, headings are used in a hierarchical layout with h3
as a subsection of h2
, which is a subsection of h1
.
Example Code:
<h1>Plant Foods that Humans Eat</h1>
<p> There are an abundant number of plants that humans eat...</p>
<h2> Fruit</h2>
<p> A fruit is a structure of a plant that contains its
seeds...</p>
<h3> Apple</h3>
<p> The apple is the pomaceous fruit of the apple tree...</p>
<h3> Orange</h3>
<p> The orange is a hybrid of ancient cultivated origin...</p>
<h3> Banana</h3>
<p> Banana is the common name for herbaceous plants ...</p>
<h2> Vegetables</h2>
<p>A vegetable is an edible plant or part of a plant other than a
sweet fruit ...</p>
<h3> Broccoli</h3>
<p> Broccoli is a plant of the mustard/cabbage family ... </p>
<h3> Brussels sprouts</h3>
<p> The Brussels sprout of the Brassicaceae family, is a Cultivar
group of wild cabbage ...</p>
<h3> Green beans</h3>
<p> Green beans have been bred for the fleshiness, flavor, or
sweetness of their pods...</p>
In this example, the main content of the page is in the middle column of a 3-column
page. The title of the main content matches the title of the page, and is marked as
h1
, even though it is not the first thing on the page. The content in
the first and third columns is less important, and marked with h2
.
Note: It is important to note that the example code below is intended to show how headings can be used to bypass blocks of information. It is not intended to prescribe what level of heading should be used for a particular section of the web page. In the example, the layout could be presented with the first heading in each column at the same logical level (such as an h1), or as found in the example, where the logical level reflects it's importance in relation to the main content.
Example Code:
<head>
<title>Stock Market Up Today</title>
</head>
<body>
<!-- left nav -->
<div class="left-nav">
<h2>Site Navigation</h2>
<!-- content here -->
</div>
<!-- main contents -->
<div class="main">
<h1>Stock Market up today</h1>
<!-- article text here -->
</div>
<!-- right panel -->
<div class="left-nav">
<h2>Related links</h2>
<!-- content here -->
</div>
</body>
Resources are for information purposes only, no endorsement implied.
Check that heading markup is used when content is a heading.
Check that heading markup is not used when content is not a heading.
Checks #1 and #2 are true.