Einen Header erstellen im HTML5
Eine Navigation mit header erstellen im HTML5
Wenn es auf Ihrer Seite einen Bereich gibt, der eine Gruppe von einführenden oder navigationsbezogenen Inhalten hat, zeichnen Sie diesen mit dem header-Element aus.
Eine Seite kann eine beliebige Zahl header-Elemente bekommen und je nach Kontext kann sich deren Bedeutung unterscheiden. Ein header ganz oder recht weit oben auf einer Seite kann den Header (Kopfzeile) für die ganze Seite repräsentieren (manchmal auch Masthead genannt). Oft stehen in der Kopfzeile das Logo der Site, die Hauptnavigation, andere globale Links und manchmal auch ein Suchfeld. Zweifellos wird das header-Element dafür am häufigsten eingesetzt, aber täuschen Sie sich nicht: Das ist nicht der einzige Verwendungszweck.
Ein header eignet sich auch zum Auszeichnen einer Gruppe von einführendem oder navigationsbezogenem Inhalt, die sich weiter unten auf der Seite befindet. Ein Beispiel dafür ist das Inhaltsverzeichnis eines Bereichs.
Das header-Element ist eines der vier Elemente, die die Seite in Bereiche aufteilen können. Das bedeutet, dass jede h1-h6-Überschrift innerhalb eines header als zum Kontext des header gehörig betrachtet wird und nicht der Seite insgesamt – zumindest, was die Dokumentgliederung angeht. Ein header-Element enthält also oft die Überschrift seines Abschnitts (ein h1-h6 oder hgroup), aber das ist nicht zwingend.
Dieser header repräsentiert den Header für die ganze Seite. Er enthält eine Liste von Links in einem nav-Element, um anzuzeigen, dass es sich um eine primäre Navigation auf der Seite handelt.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 Lernen - Grundlagen und Tutorials</title>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#titel-html5">Der Titel im HTML5</a></li>
<li lang="es"><a href="#überschriften-html5">Überschriften im HTML5</a></li>
<li><a href="#textabsätze-html5">Textabsätze im HTML5</a></li>
</ul>
</nav>
</header>
</body>
</html>
Einen Beispiel-Header erstellen
- Platzieren Sie den Cursor innerhalb des Elements, für das Sie einen Header erstellen wollen.
- Tippen Sie
<header>. - Tippen Sie die Inhalte des Headers. Das können die verschiedenen Inhaltstypen sein, die mit ihren jeweiligen HTML-Elementen ausgezeichnet werden. Ein header kann beispielsweise Überschriften der Ebene
h1bish6enthalten, ein oder mehrere Logos, die Navigation, ein Suchfeld usw. - Tippen Sie
</header>.
Diese Seite hat zwei header: Einer dient als Header der Seite und ein anderer als Header für das übergeordnete article-Element mit den Frequently Asked Questions. Beachten Sie, dass im ersten keine h1-h6-Überschriften sind, aber im zweiten. Im letzten Tipp dieses Abschnitts finden Sie Informationen über das optionale Attribut role im ersten header.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 Lernen - Grundlagen und Tutorials</title>
</head>
<body>
<header role="banner">
... [Site-Logo, Navigation etc.] ...
</header>
<article>
<header>
<h1>
Frequently Asked Questions
</h1>
<nav>
<ul>
<li><a href="#antwort1">Wie lauten Ihre Rücknahmebedingungen?</a>
<li>
<li><a href="#antwort2">Wie finde ich eine Filiale?</a>
<li> ...
</ul>
</nav>
</header>
<!-- Die Links im Header zeigen hierhin -->
<article id="antwort1">
<h2>
Wie lauten Ihre Rücknahmebedingungen?
</h2>
<p>
... [Antwort] ...
</p>
</article>
<article id="antwort2">
<h2>
Wie finde ich eine Filiale?
</h2>
<p>
... [Antwort] ...
</p>
</article>
...
</article>
<!-- Ende des übergeordneten Artikels -->
</body>
</html>
Nehmen Sie header nur, wo es nötig ist. Wenn Sie nur ein h1-h6 oder hgroup haben und darin kein Inhalt steht, für den sich eine Gruppierung lohnt, gibt es meist keinen Grund, das alles in einen header zu fassen.
Ein header ist nicht mit einer Überschrift austauschbar wie die h1-h6-Elemente (siehe Überschriften im HTML5.) Alle haben ihren eigenen semantischen Zweck.
Sie dürfen kein
footer-Element verschachteln oder einen header in einen anderen header stecken, auch kein header-Element in ein footer- oder address-Element stecken.
Ein header-Element muss nicht immer ein nav-Element enthalten wie in diesen Beispielen, aber in den meisten Fällen wird das so sein, wenn das header-Element Navigationslinks enthält. Bei dem Beispiel das nav um die Liste der Links für die FAQs ist es anders, weil es sich um eine wichtige Navigationsgruppe auf der Seite handelt.
Navigation auszeichnen
Bei früheren Versionen von HTML gab es kein Element, das explizit eine Sektion von wichtigen Navigationslinks repräsentiert, aber HTML5 wartet nun damit auf: das nav-Element. Links in einem nav können auf Inhalte dieser Seite zeigen, auf andere Seiten bzw. Ressourcen oder beides. In jedem Fall sollten Sie nav in Ihrem Dokument aber nur für die wichtigsten Gruppen von Links verwenden, nicht für alle.
Wenn Sie sich den Code im vorigen Abschnitt genauer anschauen, sehen Sie das nav-Element in Aktion. Ich greife dieses Codebeispiel noch einmal auf dieser Seite auf und hebe nav hervor. Das nav-Element zwingt seinen Inhalten keine Standardformatierung auf.
Diese Links (die a-Elemente) repräsentieren eine wichtige Navigationsgruppe, also habe ich sie in ein nav-Element verschachtelt. Normalerweise werden Sie eine Liste von Links mit dem ul-Element (unordered list, Aufzählungsliste) auszeichnen, außer es handelt sich um Breadcrumb-Links. In einem solchen Fall verwenden Sie ol (ordered list, nummerierte Liste). In Artikel Geordnete und ungeordnete Listen im HTML5 erfahren Sie mehr über Listen. Das Attribut role ist nicht erforderlich, kann aber die Zugänglichkeit verbessern.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 Lernen - Grundlagen und Tutorials</title>
</head>
<body>
<header>
<nav role="navigation">
<ul>
<li><a href="#titel-html5">Der Titel im HTML5</a></li>
<li lang="es"><a href="#überschriften-html5">Überschriften im HTML5</a></li>
<li><a href="#textabsätze-html5">Textabsätze im HTML5</a></li>
</ul>
</nav>
</header>
</body>
</html>
Unsere Navigation sieht standardmäßig recht schlicht aus. Die Gliederungspunkte (Bullets) sind kein Produkt des nav-Elements, das keine Standardformatierung aufweist, außer dass es in seiner eigenen Zeile beginnt. Die Gliederungspunkte werden dargestellt, weil jeder Link sich in einem li-Element befindet (list item, Listenelement). Mit CSS können Sie die Gliederungspunkte abschalten oder andere wählen sowie die Links auch horizontal anordnen, deren Farbe ändern, sie wie Schaltflächen aussehen lassen etc.
Eine Link-Gruppe als wichtige Navigation kennzeichnen
- Tippen Sie
<nav>. - Tippen Sie Ihre Link-Liste strukturiert als
ul(Aufzählungsliste), außer es kommt auf die Reihenfolge der Links an (z.B. bei einer Breadcrumb-Navigation). In diesem Fall sollten Sie sie alsol(nummerierte Liste) strukturieren. - Tippen Sie
</nav>.
Falls Sie schon Erfahrung mit HTML oder XHTML haben, sind Sie es wohl schon gewöhnt, Ihre Links je nachdem in einem ul- oder einem ol-Element zu strukturieren. In HTML5 wird diese Best Practice durch nav nicht ersetzt. Arbeiten Sie weiterhin mit diesen Elementen und umschließen Sie sie einfach mit einem nav.
Während Screenreader bei der neuen HTML5-Semantik generell gesehen immer noch versuchen, Anschluss zu finden, kann das nav-Element dabei helfen, die wichtige Navigation auf Ihrer Seite zu identifizieren. Damit können die User sie per Tastatur direkt anwählen.
So wird Ihre Seite besser zugänglich, was die Nutzererfahrung verbessert.
Die HTML5-Spezifikation empfiehlt, nebensächliche Fußzeilen auf der Seite wie Nutzungsbedingungen oder Datenschutzbestimmungen nicht in ein nav zu stellen, was sinnvoll ist. Manchmal wird die allgemeine Top-Level-Navigation im Footer wieder aufgenommen oder es stehen andere wichtige Links wie Suche nach Filialen oder Jobangebote darin. Für die meisten Fälle halte ich es für ratsam, diese Arten von Footer-Links in ein nav zu stellen. HTML5 erlaubt keine Verschachtelung eines nav innerhalb eines address-Elements.
nav unter der Lupe
Wie bereits erwähnt, müssen Sie eine Gruppe von Links auf Ihrer Seite nicht notwendigerweise in ein nav stecken.
Das folgende Beispiel mit einer Nachrichtenseite enthält vier Listen mit Links, von denen nur zwei als so relevant erachtet werden, dass es sich lohnt, sie mit einem nav zu umschließen (der Code ist an bestimmten Stellen gekürzt).
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 Lernen - Grundlagen und Tutorials</title>
</head>
<body>
<header>
<!-- Hier könnte das Site-Logo stehen -->
<!-- Globale Navigation der Site -->
<nav>
<ul>
...
</ul>
</nav>
</header>
<div id="main">
<h1>
Kunst & Unterhaltung
</h1>
<article>
<h1>
Galerieeröffnung stellt inspirierte Arbeiten vor
</h1>
<p>
... [Inhalt der Story] ...
</p>
<aside>
<h1>
Andere Storys
</h1>
<!-- Nicht in nav gefasst -->
<ul>
... [Story-Links] ...
</ul>
</aside>
</article>
</div>
<aside id="sidebar">
<nav>
<!-- Sekundäre Navigation -->
<ul>
<li><a href="/kunst/filme/">Filme</a></li>
<li><a href="/kunst/musik/">Musik</a></li>
...
</ul>
</nav>
</aside>
<footer>
<!-- Weniger relevante Links stehen nicht im nav. -->
<ul>
...
</ul>
</footer>
</body>
</html>
Die sekundäre Navigation im aside erlaubt es dem User, auf die anderen Seiten im Verzeichnis Kunst & Unterhaltung zu navigieren, und konstituiert somit einen wichtigen Navigationsbereich auf der Seite. Aber beim aside Andere Storys mit Links ist das nicht der Fall.
Wonach entscheiden Sie nun also, ob eine Gruppe mit Links ein nav verdient? Letzten Endes fällen Sie diese Beurteilung basierend auf Ihrer inhaltlichen Organisation. Zumindest die globale Navigation der Site sollten Sie mit nav auszeichnen (also den Bereich, über den User auf andere Bereiche der Site springen können). Oft, aber nicht immer, erscheint dieses spezielle nav innerhalb eines header-Elements auf Seitenebene.