Beispiele aus dem Buch (Abschnitt 2.7: Strukturen und Validierung)
"Barrierefreies Webdesign — Praxishandbuch für Webgestaltung und grafische Programmoberflächen" bei amazon.deDies ist ein Beispiel aus dem Buch 
Barrierefreies Webdesign (2004), das Ende 2004 im dpunkt.Verlag erschienen ist.
Struktur von Überschriften in einem Dokument
Mit den verschiedenen Überschriftenebenen in (X)HTML kann einem Dokument eine hierarchische Struktur hinzugefügt werden.
Hinweis: In der Gestaltung der folgenden Beispielüberschriften wurden CSS-Eigenschaften des Seitenlayouts übernommen.
HTML
<h1>Kapitelebene Eins</h1>
<p>Hier steht ein einführender Text</p>
<h2>Kapitelebene Zwei</h2>
<p>Hier wird die Grundproblematik dargestellt.</p>
<h2>Kapitelebene Zwei</h2>
<p>Hier wird eine zusätzliche Problematik dargestellt.</p>
<h3>Kapitelebene Drei</h3>
<p>Hier wird ein Aspekt der Grundproblematik genauer bnetrachtet.</p>
<h3>Kapitelebene Drei</h3>
<p>Hier wird ein weiterer Aspekt der Grundproblematik genauer betrachtet.</p>
<h1>Kapitelebene Eins</h1>
<p>Hier wird auf die historischen Zusammenhänge der Problematik hingewiesen.</p>
<h2>Kapitelebene Zwei</h2>
<p>Hier werden die historischen Zusammenhänge im Kontext mit der Gegenwart analysiert.</p>
<h3>Kapitelebene Drei</h3>
<p>Hier wird gerade dran gearbeitet.</p>
<h2>Kapitelebene Zwei</h2>
<p>Hier wird gerade dran gearbeitet.</p>
<h3>Kapitelebene Drei</h3>
<p>Hier wird gerade dran gearbeitet.</p>
<h3>Kapitelebene Drei</h3>
<p>Hier wird gerade dran gearbeitet.</p>
<h4>Kapitelebene Vier</h4>
<p>Hier wird gerade dran gearbeitet.</p>
<h1>Kapitelebene Eins</h1>
<p>Hier wird gerade dran gearbeitet.</p>
<h2>Kapitelebene Zwei</h2>
<p>Hier wird gerade dran gearbeitet.</p>
<h2>Kapitelebene Zwei</h2>
<p>Hier wird gerade dran gearbeitet.</p>
<h3>Kapitelebene Drei</h3>
<p>Hier wird gerade dran gearbeitet.</p>
<h4>Kapitelebene Vier</h4>
<p>Hier wird gerade dran gearbeitet.</p>
<h4>Kapitelebene Vier</h4>
<p>Hier wird gerade dran gearbeitet.</p>
<h3>Kapitelebene Drei</h3>
<p>Hier wird gerade dran gearbeitet.</p>
<h4>Kapitelebene Vier</h4>
<p>Hier wird gerade dran gearbeitet.</p>
CSS
p {
padding-top:0.5em;
padding-bottom:0.5em;
padding-left:10px;
margin:0em;
color:#000;
background:inherit;
font:bold 0.9em verdana,arial,helvetica,sans-serif;
text-decoration:underline;
}
h1 {
padding-right:1.6em;
margin-top:1.6em;
border-bottom:#76738F 2px solid;
background:#fff;
color:#76738F;
font:bold 1.3em verdana,arial,helvetica,sans-serif;
letter-spacing:0.5ex;
}
h2 {
padding-right:1.6em;
margin-top:1.6em;
border-bottom:#76738F 2px dotted;
background:#fff;
color:#76738F;
font:bold 1em verdana,arial,helvetica,sans-serif;
}
h3 {
padding-right:1.6em;
margin-top:1.6em;
background:#fff;
color:#76738F;
font:bold 1em verdana,arial,helvetica,sans-serif;
}
h4 {
padding-right:1.6em;
margin-top:1.6em;
background:#fff;
color:#76738F;
font:bold 0.9em verdana,arial,helvetica,sans-serif;
}
H1:before {
Content: Counter(varCounter1) " ";
Counter-Increment: varCounter1 1;
Counter-Reset: varCounter2;
}
H2:before {
Content: Counter(varCounter1) "." Counter(varCounter2) " ";
Counter-Increment: varCounter2 1;
Counter-Reset: varCounter3;
}
H3:before {
Content: Counter(varCounter1) "." Counter(varCounter2) "." Counter(varCounter3) " ";
Counter-Increment: varCounter3 1;
Counter-Reset: varCounter4;
}
H4:before {
Content: Counter(varCounter1) "." Counter(varCounter2) "." Counter(varCounter3) "." Counter(varCounter4) " ";
Counter-Increment: varCounter4 1;
}
Browseransicht
Kapitelebene Eins
Hier steht ein einführender Text
Kapitelebene Zwei
Hier wird die Grundproblematik dargestellt.
Kapitelebene Zwei
Hier wird eine zusätzliche Problematik dargestellt.
Kapitelebene Drei
Hier wird ein Aspekt der Grundproblematik genauer bnetrachtet.
Kapitelebene Drei
Hier wird ein weiterer Aspekt der Grundproblematik genauer betrachtet.
Kapitelebene Eins
Hier wird auf die historischen Zusammenhänge der Problematik hingewiesen.
Kapitelebene Zwei
Hier werden die historischen Zusammenhänge im Kontext mit der Gegenwart analysiert.
Kapitelebene Drei
Hier wird gerade dran gearbeitet.
Kapitelebene Zwei
Hier wird gerade dran gearbeitet.
Kapitelebene Drei
Hier wird gerade dran gearbeitet.
Kapitelebene Drei
Hier wird gerade dran gearbeitet.
Kapitelebene Vier
Hier wird gerade dran gearbeitet.
Kapitelebene Eins
Hier wird gerade dran gearbeitet.
Kapitelebene Zwei
Hier wird gerade dran gearbeitet.
Kapitelebene Zwei
Hier wird gerade dran gearbeitet.
Kapitelebene Drei
Hier wird gerade dran gearbeitet.
Kapitelebene Vier
Hier wird gerade dran gearbeitet.
Kapitelebene Vier
Hier wird gerade dran gearbeitet.
Kapitelebene Drei
Hier wird gerade dran gearbeitet.
Kapitelebene Vier
Hier wird gerade dran gearbeitet.
Screenshot
