Strukturierung einer Website in HTML 5

Mit dem HTML 5 Standard hast du viele neue Möglichkeiten, mit denen du die Semantische Strukturierung einer Website vornehmen kannst.

Diese Möglichkeiten, und wozu das alles gut ist, möchte ich dir in diesem Artikel vorstellen.

 

Inhaltsverzeichnis:

 

Elemente zur Strukturierung einer Website

Im HTML 5-Standard gibt es neue Elemente, mit denen du die semantische Struktur einer Website festlegen kannst. Der semantischen Strukturierung einer Website wurde vor HTML 5 eine noch nicht allzu große Rolle zuteil. Zwar wurde das HTML-Dokument grundsätzlich einen Header- und Body-Teil getrennt, aber dies betraf nicht die Inhalte der Website.

Mit HTML 5 ist es nun möglich, die Inhalte der Seite zu strukturieren. Dazu gibt es die folgenden, neuen HTML-Tags:

  • <article>
  • <aside>
  • <details>
  • <figcaption>
  • <figure>
  • <footer>
  • <header> (nicht zu verwechseln mit <head>!)
  • <main>
  • <mark>
  • <nav>
  • <section>
  • <summary>
  • <time>

 

Auf die in der Liste oben fett geschriebenen HTML-Tags werde ich in den folgenden Zeilen genauer eingehen, da diese quasi zum Grundgerüst einer Website gehören. Die Funktion der restlichen Tags werde ich im Anschluss aber auch kurz erläutern.

 

HTML 5 Grundgerüst

Das Grundgerüst einer Website unterscheidet sich in HTML 5 zudem nicht vom bisherigen Standard. Allerdings gibt es jetzt die Möglichkeit, auch die Inhalte der Seite zu strukturieren. Das nachstehende Beispiel soll dies dann verdeutlichen.

 

Code-Beispiel:

<!DOCTYPE html>
<html>
<head>
  <title>Grundgerüst einer HTML5-Seite</title>
</head>
<body>
  <header>
  <img src="logo.jpg" alt="Logo" title="Logo" />
    <nav>
    <p><a href="index.htm" title="Startseite">Startseite</a> | <a href="categorie1.htm" title="Kategorie 1">Kategorie 1</a> | <a href="kategorie2.htm" title="Kategorie 2">Kategorie 2</a>
    </nav>
  </header>
  <section>
    <article>
    <h1>Grundgerüst einer HTML5-Seite</h1>
    <p>Das Grundgerüst einer HTML5-Seite stelle ich dir an dieser Stelle vor.</p>
    <h2>Grundlagen</h2>
    <p>Die Grundlagen schauen wie folgt aus.</p>
    <h2>Die neuen Möglichkeiten</h2>
    <p>Die neuen Möglichkeiten stelle ich nun vor.</p>
    <h3>Möglichkeit 1</h3>
    <p>Dies ist eine neue Möglichkeit.</p>
    <h3>Möglichkeit 2</h3>
    <p>Dies ist eine weitere neue Möglichkeit</p>
    <h2>Fazit</h2>
    <p>Das Fazit ist sehr positiv.</p>
   </article>
  </section>
  <aside>
    <section>
    <p>Werbung</p>
    <script type='text/javascript'>
    Volle Werbung()
    </script>
    </section>
    <section>
    <p>Das könnte dich auch interessieren:</p>
    <p><a href="artikel1.htm" title="Artikel 1">Artikel 1</a></p>
    <p><a href="artikel2.htm" title="Artikel 2">Artikel 2</a></p>
    </section>
  </aside>
  <footer>
    <p>Das ist der Footer der Website.</p>
  </footer>
</body>
</html>

 

Die nachfolgende Grafik visualisiert die mit diesem Beispiel angelegte Struktur der Website. Bitte beachte, dass du das Layout natürlich noch mit CSS entsprechend anpassen musst.

Aufbau einer Website mit HTML 5 Strukturelementen
Aufbau einer Website mit HTML 5 Strukturelementen

 

Die einzelnen Elemente zur Strukturierung einer Website habe ich hierzu farblich dargestellt. Es gibt den gelben <header>, in dem ein brauner <nav>-Bereich eingebettet wurde. Darunter gibt es eine große, grüne <section>, in die ein <article> eingebettet wurde. Daneben (dunkelblau <aside>) gibt es weitere zwei hellblaue <section>s. Darunter darf der dunkelrote <footer> natürlich nicht fehlen

 

Struktur, nicht Layout

Wie schon geschrieben: Du musst das Layout mit CSS anpassen. Ohne weitere Layout-Angaben durch ein Stylesheet arbeitet der Browser obigen Code ganz normal von oben nach unten ab und stellt ihn danach entsprechend dar.

Es handelt sich bei diesen neuen Elementen wie gesagt nicht um ein Layout-Werkzeug. Man kann mit ihnen lediglich den Inhalt in eine semantische Struktur bringen, nicht aber eine Website gestalten.

 

Allgemeine Hinweise

Die Strukturelemente in HTML 5 können, wie man auch am Beispiel oben sieht, mehrfach auf einer Seite vorkommen. So kann zum Beispiel ein Artikel auch einen Header, einen Footer und mehrere Sektionen beinhalten. Eine Sektion kann wiederum mehrere Artikel beinhalten, und so weiter.

Man muss die Struktur allerdings auch nicht immer bis ins kleinste Detail hinunter brechen. Man sollte sich überlegen, was einen semantischen Sinn ergibt und wie tief man dabei gehen möchte.

 


Anzeige


 

Elemente für das Grundgerüst zur Strukturierung einer Website

Nachfolgend möchte ich die im obigen Beispiel verwendeten Elemente näher erläutern. Diese gehören zum Grundgerüst der Seitenstruktur. Ich gehe dabei einfach von oben nach unten die einzelnen Elemente durch.

 

<header>-Element

Im Element <header> wird der Kopfbereich des Inhalts dargestellt. Damit ist der Bereich einer Website gemeint, der – ähnlich wie auch der Footer – auf jeder einzelnen Seite gleich ist und über dem Inhalt steht. Meist ist hier ein Logo zu finden, eine Suchleiste und eine Navigationsleiste.

Hier auf Webmasterparadies.de gehört die Hauptnavigations-Leiste, der Logo-Bereich, sowie die Brotkrumen-Navigation zum Kopf-Element der Seite.

 

<nav>-Element

Mit dem HTML-Tag <nav> kann man einen Navigationsbereich auszeichnen. Dies kann die Hauptnavigation einer Website sein, aber auch eine Brotkrumen-Navigation.

 

<section>-Element

Mit <section> kannst du ähnliche Bereiche voneinander trennen. Ähnlich wie in einem Buch, kann die Seite so in verschiedene Kapitel eingeteilt werden. Die Funktion ist relativ ähnlich zum im Anschluss vorgestellten <article>-Tag. Allerdings kann man sich hier nicht auf eine bestimmte Sichtweise versteifen.

Gerade <section> und <article> sind in ihrer Bedeutung recht ähnlich. So kann eine Sektion aus mehreren Artikeln bestehen, ein Artikel gleichzeitig aber auch aus mehreren Sektionen. Der Einsatz hängt dabei ganz von der semantischen Bedeutung ab.

Für Webmasterparadies.de habe ich daher entschieden, dass – ganz klassisch – jedes Element (außer <nav>) nur einmal vorkommt. Es gibt einen Artikel auf jeder Seite (logisch so weit), einen <aside>-Bereich (die Seitenleiste), einen Footer und einen Header. Im Header sind zwei Navigations-Elemente und die Seitenleiste besteht aus zwei einzelnen Sektionen (Werbebanner und die vorgeschlagenen Artikel).

 

<article>-Element

Wie gerade schon beschrieben, ähnelt sich das Artikel-Tag mit dem Sektions-Tag in der semantischen Bedeutung. Ich habe mich für die einfache Interpretation entschieden und definiere einen Artikel im Ganzen. Es gibt keine Unter-Artikel und auch keine Unter-Sektionen in einem Artikel auf Webmasterparadies.de.

Sollte das bei deiner Webseite anders sein, kannst du natürlich auch mehrere Artikel-Elemente auf einer Seite verwenden.

Das schöne (oder auch Verwirrende) an diesen HTML-Auszeichnungen ist, dass ein Artikel auch mit einem Kopf- und Fußbereich versehen werden kann. Ob, und wie tief, man die semantische Auszeichnung umsetzt, bleibt einem selbst überlassen. Wichtig ist, dass die aufgebauten Auszeichnungen Sinn ergeben.

 

<aside>-Element

Mit dem HTML-Tag <aside> definierst du einen Bereich, der neben dem eigentlichen Inhalt stehen soll. Dies kann eine Seitenleiste sein, aber auch eine Visualisierung.

Die Elemente, die in diesem HTML-Tag eingeschlossen werden, sollten aber etwas mit dem Inhalt zu tun haben, in dem sie eingebettet wurden. Daher sollte <aside> innerhalb eines <article> oder <section>-Elements vorkommen.

 

<footer>-Element

Der Footer der Website wird sinnigerweise mit dem Tag <footer> gekennzeichnet. Ähnlich wie beim Kopfbereich, bleibt auch die Fußzeile einer Website meist immer mit den gleichen Inhalten bestehen und werden unterhalb des Inhalts dargestellt.

 

Vorteile der semantischen Strukturierung einer Website

Wie bereits schon mehrfach erwähnt, dienen diese ganzen HTML-Elemente nicht der Visualisierung, sondern der Strukturierung von Inhalten.

Mit Hilfe dieser Elemente ist es möglich, eine semantische Ordnung in eine Webseite zu bringen und Inhalte voneinander abzutrennen. So gehört zwar eine Navigationsleiste durchaus auf eine Webseite, allerdings gehört sie nicht zum eigentlichen Inhalt. Eine Grafik, die einen Sachverhalt visualisieren soll (siehe das Beispiel mit der Grafik weiter oben), gehört selbstverständlich auch in den Inhalt der Seite, aber sie ist für den Inhalt nicht zwingend erforderlich.

Eine Internetseite wird nicht immer nur von einem Anwender in einem Browser aufgerufen (wenngleich dies auch die häufigste Variante sein dürfte). Menschen mit Behinderungen könnten einen Screenreader einsetzen, der ihnen die Seiteninhalte audiovisuell oder haptisch wiedergeben. Suchmaschinen verwenden ihre Such-Robots, um die Inhalte einer Webseite zu erfassen. Künstliche Intelligenzen wie Siri von Apple oder Alexa von Amazon versuchen Suchanfragen direkt zu beantworten.

Für all diese Dinge ist es notwendig, Inhalte möglichst schnell, möglichst einfach und möglichst logisch erfassen zu können. Daher ist die semantische Strukturierung einer Website auch sehr wichtig. Auch hält sich der Aufwand der Auszeichnung in Grenzen. So kannst du mit vergleichsweise wenig Aufwand am Ende recht viel erreichen.

Eines ist klar: Es besteht derzeit natürlich keinen Zwang, seine Website auf diese neuen Möglichkeiten umzustellen. Aber wenn man eine neue Webseite erstellt oder eine vorhandene Webseite anpasst, kann man diese Elemente direkt mit einbauen. Der Vorteil ist, dass man für die Zukunft gewappnet ist.

 

Weitere Elemente zur Strukturierung einer Website

Es gibt, neben den bereits vorgestellten Elementen für die Grundstruktur einer Website, noch einige weitere Elemente, mit denen du Inhalte strukturieren kannst. Diese stelle ich nun ebenfalls kurz vor.

 

<details> und <summary>

Mit dem HTML-Tag <details> lassen sich Infos zu einem Element mit einem Klick ein- oder ausblenden. Der sichtbare Teil wird dabei mit <summary> festgelegt.

Der Internet Explorer spielt hier leider nicht mit und setzt derzeit (*Mai 2017) dieses HTML-Tag nicht um. Er zeigt alle Informationen an, man kann sie also nicht ausklappen. Auch der neue Browser Edge aus dem Hause Microsoft zeigt das Auswahlfeld nicht an.

 


Live Anzeigebeispiel:

 

 

Bildinformationen (anklicken zum Ausklappen)

– Aufnahmedatum: 01.01.2011

– Aufnahmeort: Honululu

– Fotograf: Hans-Peter-Adelbert von Mühl- und Kirchhausen zu Eichendorf

 

 

 


 

<figure> und <figcaption>

Das Element <figure> ist ein Elternelement für eine Illustration und der dazugehörigen Beschreibung. Diese legst du innerhalb von <figcaption> fest. Beides gehört demnach zur Seite, in der es vorkommt. Als Beispiel dafür kann z.B. die Grafik weiter oben dienen, die ebenfalls mit diesen Elementen eingebunden wurde.

 

<main>

Mit <main> wird der Haupt-Inhalt eines Dokuments festgelegt. Es darf dabei nicht innerhalb von <article>, <aside>, <footer>, <header>, oder <nav> vorkommen und sollte lediglich den wirklichen Haupt-Inhalt beinhalten.

Im Beispiel von Webmasterparadies.de wäre dies der Artikel-Text an sich, ohne Autoreninformationen, ohne Kommentar-Box und natürlich auch ohne die umliegenden, auch visuell abgetrennten Elemente.

 

<mark>

Mit diesem Tag lassen sich hervorgehobene Texte kenntlich machen. Man kann sich das wie bei einem Schulbuch vorstellen, in dem man eine wichtige Textpassage mit einem Textmarker hervorhebt. Genau diese Markierung lässt sich dadurch „semantisch sichtbar“ machen, was besonders für Screenreader sinnvoll ist.

 

<time>

Wie man durch den Namen bereits vermuten kann, lässt sich mit <time> eine Zeit inhaltlich markieren.

 

Fazit

Du kannst Inhalte mit den Strukturelementen von HTML 5 besser auszeichnen. Damit deine Website schließlich von diversen Programmen und Bots semantisch verstanden und einfacher einzuordnen ist, solltest du diese Elemente anwenden. Insbesondere dann, wenn du ohnehin auf die HTML 5-Technologien setzt. Die semantische Strukturierung einer Website ist daher in meinen Augen niemals ein Fehler.

 

Wie lautet denn deine Meinung zu dem Thema? Findest du ebenfalls, dass die semantische Strukturierung einer Website durchaus wichtig ist oder vertrittst du eine andere Ansicht? Über einen entsprechenden Kommentar würde ich mich sehr freuen.

 


Dir gefällt dieser Artikel?

Ein Gedanke zu „Strukturierung einer Website in HTML 5

  • 20. April 2017 um 14:22
    Permalink

    High,
    endlich wird gegen den unstrukturierten Datenmüll im Web etwas getan.
    So kann der ernsthafte Betreiber einer Site Content strukturieren und sich positiv von anderen Betreibern absetzen, die nur BlaBla produzieren, der die Veröffentlichung eigentlich nicht wert ist.
    Wenn man sich den neuen Tags öffnet, erkennt man schnell ihren Wert.
    Zukünftig wird die semantische Ordnung auch bei den Suchmaschinen eine wichtige Rolle spielen; je eher man sich an den Gebrauch der Tags gewöhnt, umso sicherer wird man seinen Content anbieten können.

    Antwort

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.