HTML Markup
Auswahl eines geeigneten HTML-Markups
Für die Auszeichnung von Navigationselementen gibt es in HTML kein eigenes Element. Deswegen muss aus den gegebenen Möglichkeiten ein geeignetes ausgewählt werden.
Es existieren verschiedene Wege, die Navigation in HTML abzubilden. Geeignetes Markup muss im Sinne semantisch korrekter Auszeichnung und der Accessibility – also die Zugänglichkeit der Webseite beispielsweise für Blinde –gewählt werden. Ein weiterer entscheidender Gesichtspunkt (für viele der größte) ist das Ranking in Suchmaschinen. Da für diese eine semantisch korrekt ausgezeichnete Seite viel besser und klarer eingeordnet werden kann ist das Markup eine wichtige Entscheidung.
Möglichkeiten
Es bieten sich verschiedene Möglichkeiten an, Links im Quelltext einzubetten:
- in den normalen Textfluss (<br /> , Trennzeichen)
- in Containern (<div />)
- in Absätzen (<p />)
- in Listen (<dl />, <ol /> oder <ul />
Dabei sollte die Auszeichnung gewählt werden, die einer Navigation am nächsten kommt. Im normalen Textfluss, in Containern oder Absätzen eingebettet kann eine Verschachtelung nur schwer nachgebildet werden. Besser geeignet sind dazu Listen. Diese können ineinander verschachtelt werden und somit die einzelnen Ebenen der Navigation darstellen.
Listenauswahl
Definitionslisten fallen für diesen Zweck heraus, da es sich nicht um Definitionssammlungen handelt. In die engere Auswahl kommen damit nur noch die geordnete (<ol />) und die ungeordnete (<ul />) Liste. Eine Navigation stellt im Unterschied zu Kapiteln in einem Buch keine nummerierte Sammlung dar. Einfach-Für-Alle stellt in einem sehr guten Artikel unter [1] weiter Gründe dar, die gegen die Verwendung einer geordneten Liste sprechen. Dabei kommen sie jedoch zu dem Schluss, in die Liste Nummerierungen mit einzubauen. Dieser Auffassung schließe ich mich jedoch nicht an.
Listen Markup
Für mein Beispiel und die Navigation auf dieser Seite habe ich mich deswegen für eine ungeordnete Liste entschieden. Der Aufbau einer solchen Liste ist relativ simpel. Die Navigationselemente sind in das <ul />-Element eingebettet. Diese Liste beinhaltet für jeden Listeintrag ein <li />-Element. In der einfachsten Form mit 2 Navigationselementen sieht die Liste folgendermaßen aus:
1 <ul>
2 <li><a href=“#1“>Navigation 1</a></li>
3 <li><a href=“#2“>Navigation 2</a></li>
4 </ul>
Jedes Listenelement beinhaltet einen eigenen Link () und die Navigationsbeschriftung.
So sieht das Beispiel aus:
Beispiel 1
Soll der Navigationspunkt 1 Unterelemente aufnehmen, so müssen diese in korrekter Art und Weise verschachtelt werden (siehe Kommentare):
1 <ul>
2 <li>
3 <a href=“#1“>Navigation 1</a>
4 <!-- hier beginnt die Untergruppe-->
5 <ul>
6 <li><a href=”#1.1”>Navigation 1.1</a></li>
7 <li><a href=”#1.2”>Navigation 1.2</a></li>
8 </ul>
9 <!-- erst hier kommt das schließende <li> Element der ersten Ebene! -->
10 </li>
11 <li><a href=“#2“>Navigation 2</a></li>
12 </ul>
Der Code für die Unternavigation befindet sich somit komplett innerhalb des ersten Listenelements.
So sieht das zweite Beispiel aus:
Beispiel 2
Beispiel
Mit diesem Wissen ist auch der HTML-Code des eingesetzten Beispielmenüs zu verstehen:
1 <div id="navigation">
2 <ul id="mainnav">
3 <li><a href="http://www.zehelein.de/">Startseite</a></li>
4 <li><a href="http://www.zehelein.de/">Über...</a></li>
5 <li id="activenav"><a href="http://www.zehelein.de/">Galerie</a>
6 <ul>
7 <li id="activesubnav" ><a href="http://www.zehelein.de/">(X)HTML & CSS</a></li>
8 <li><a href="http://www.zehelein.de/">Fotos</a></li>
9 <li><a href="http://www.zehelein.de/">ASP.NET</a></li>
10 <li><a href="http://www.zehelein.de/">PHP</a></li>
11 </ul>
12 </li>
13 <li><a href="http://www.zehelein.de/">Favoriten</a></li>
14 <li><a href="http://www.zehelein.de/">Kontakt</a></li>
15 </ul>
16 </div>
Zusätzlich zu der beschriebenen Struktur sind hier noch zwei ID’s vergeben. Diese sind „activenav“ und „activesubnav“. Die activenav-ID markiert den gerade geöffneten Navigationspunkt, die activesubnav-ID den gewählten Unternavigationspunkt wenn erforderlich. Mehr Ebenen werden nicht dargestellt. Wird z.B. die Seite 1.1.2 ausgewählt, werden dennoch nur die Navigationspunkte 1 und 1.1 angezeigt und der jeweiligen ID versehen.
Damit ist der Bereich des HTML-Codes abgeschlossen. Die fertige Liste sieht folgendermaßen aus:
Beispiel 3AusblickIn diesem Teil haben wir das Markup für die Navigation erarbeitet. Die Navigation an sich sieht noch sehr langweilig aus. Dem wird allerdings im nächsten Abschnitt Abhilfe geschafft. Dort gehe ich auf die Gestaltung des Layouts via CSS ein.
In dem folgenden Teil werden die Schritte beschrieben, wie aus
Beispiel 3 die
fertige Liste wird.
Viel Vergnügen bis dahin. Und wie immer gilt bei Fragen und Anregungen: nur zu! Am besten einen Kommentar dazu abgeben, vielleicht hilft er auch noch anderen.
[1]
http://einfach-fuer-alle.de/artikel/menues/tag1/