Beispielseite von hyperkontext | Weblog zum Artikel:

• Semantisches HTML für Blätter-Navigation

Beispiele von Blätter-Navigationen

1. Beispiel-1
2. Beispiel-2
3. Beispiel-3
4. Beispiel-4

Beispiel 1

Anzeige in HTML

<Beispiel-1>

Seite 5 von 10

Seite weiter >

< Seite zurück

Erste … 3 4 5 6 7 … Letzte

</Beispiel-1>

Mögliche Positionierung mit CSS

<Beispiel-1a>

</Beispiel-1a>

Beispiel 2

Der Unterschied zu Beispiel 1 besteht hier im veränderten HTML, hingegen die visuelle Ausgabe genauso aussieht wie vorher.

Hier wird die Seitenangabe in einer Überschrift platziert und die Definitionsliste besteht aus zwei Definition-Terms, die per CSS in der Bildschirm-Ansicht aus dem sichtbaren Bereich geschoben werden. Für assistive Ausgabegeräte sind die Terms aber weiterhin erfassbar.

Anzeige in HTML

<Beispiel-2>

Seite 5 von 10

Blättern

Seite weiter >

< Seite zurück

Seitenauswahl

Erste … 3 4 5 6 7 … Letzte

</Beispiel-2>

Mögliche Positionierung mit CSS

<Beispiel-2a>

</Beispiel-2a>

Beispiel 3

Anzeige in HTML

<Beispiel-3>

Blättern

Neuerer Beitrag

Titel des zeitlich jüngeren Beitrages

Älterer Beitrag

Titel des nächsten älteren Beitrages

</Beispiel-3>

Mögliche Positionierungen mit CSS

<Beispiel-3a>

</Beispiel-3a>

<Beispiel-3b>

</Beispiel-3b>

Beispiel 4

Anzeige in HTML

<Beispiel-4>

Blättern

• Nächster Abschnitt: Titel des nächsten Abschnittes
• Vorheriger Abschnitt: Titel des vorherigen Abschnittes

</Beispiel-4>

Mögliche Positionierungen mit CSS

<Beispiel-4a>

</Beispiel-4a>

<Beispiel-4b>

</Beispiel-4b>

Beispielseite von hyperkontext | Weblog zum Artikel:

• Semantisches HTML für Blätter-Navigation

erstellt am 25. März 2008