HTML5 Semantische Elemente

Semantik (aus dem antiken Griechenland) kann als die Studie der Bedeutung von Sprache definiert werden.

Semantische Elemente sind Elemente mit Bedeutung.

Was sind semantische Elemente?

Semantische Elemente beschreiben klar ihre Bedeutung für Browser und Entwickler.

Nicht semantischBeispiel für Elemente: <div> und <span> - bieten keine Informationen über ihren Inhalt.

SemantikBeispiel für Elemente: <form>, <table> und <img> - klar definiert ihren Inhalt.

Browser-Unterstützung

Ja Ja Ja Ja Ja

Alle modernen Browser unterstützen semantische HTML5-Elemente.

Außerdem können Sie

Lernen Sie mehr über dieses Kapitel in einem HTML5-Browser.

Neue semantische Elemente in HTML5

Viele Websites enthalten HTML-Code für die Navigation, den Header und den Footer, wie zum Beispiel: <div id="nav"> <div class="header"> <div id="footer">.

HTML5 bietet neue semantische Elemente zur Definition verschiedener Teile einer Seite:

  • <article>
  • <aside>
  • <details>
  • <figcaption>
  • <figure>
  • <footer>
  • <header>
  • <main>
  • <mark>
  • <nav>
  • <section>
  • <summary>
  • <time>

HTML5 Semantische Elemente

HTML5 Semantische Elemente

HTML5 <section>-Element

Das <section>-Element definiert einen Abschnitt im Dokument.

Laut der W3C-HTML-Dokumentation: „Ein Abschnitt (section) ist eine Gruppe von inhaltlich zusammenhängenden Elementen, die in der Regel einen Titel haben.“

Die Startseite einer Website kann in Abschnitte wie Einführung, Inhalt, Kontaktinformationen usw. unterteilt werden.

Beispiel

<section>
   <h1>WWF</h1>
   <p>Das Weltweite Forum für die Natur (WWF) ist....</p>
</section>

Versuchen Sie es selbst

HTML5 <article>-Element

Das <article>-Element legt eigenständiges, selbstinhaltiges Material fest.

Ein Dokument hat einen eigenen Sinn und kann unabhängig von anderen Inhalten der Website gelesen werden.

Anwendungsfall des <article>-Elements:

  • Forum
  • Blog
  • Nachrichten

Beispiel

<article>
   <h1>Was macht der WWF?</h1>
   <p>Die Mission des WWF ist es, die Degradation unserer natürlichen Umwelt zu stoppen,</p>
  und bauen eine Zukunft auf, in der Menschen in Harmonie mit der Natur leben.</p>
</article>

Versuchen Sie es selbst

Eingebettete semantische Elemente

Im HTML5-Standard wird das <article>-Element als vollständiger, selbstinhaltiger Block relevanter Elemente definiert.

Das <section>-Element wird als Block relevanter Elemente definiert.

Können wir mit dieser Definition entscheiden, wie wir Elemente einfügen? Nein, wir können nicht!

Im Internet finden Sie HTML-Seiten, auf denen <section>-Elemente <article>-Elemente enthalten, und Seiten, auf denen <article>-Elemente <sections>-Elemente enthalten.

Sie werden auch feststellen, dass <section>-Elemente <section>-Elemente enthalten, und dass <article>-Elemente <article>-Elemente enthalten.

HTML5 <header>-Element

Das <header>-Element legt für ein Dokument oder einen Abschnitt einen Kopf fest.

Das <header>-Element sollte als Container für einleitende Inhalte verwendet werden.

Ein Dokument kann mehrere <header>-Elemente enthalten.

Nachstehend ist ein Beispiel für die Definition eines Kopfes in einem Artikel:

Beispiel

<article>
   <header>
     <h1>Was macht der WWF?</h1>
     <p>Die Mission des WWF:</p>
   </header>
   <p>Die Mission des WWF ist es, die Degradation unserer natürlichen Umwelt zu stoppen,</p>
  und bauen eine Zukunft auf, in der Menschen in Harmonie mit der Natur leben.</p>
</article>

Versuchen Sie es selbst

HTML5 <footer>-Element

Das <footer>-Element legt für ein Dokument oder einen Abschnitt einen Fuß fest.

Das <footer>-Element sollte Informationen über die enthaltenen Elemente bereitstellen.

Füße enthalten in der Regel Informationen über den Autor des Dokuments, Urheberrechtsinformationen, Links zu Nutzungsbedingungen, Kontaktinformationen usw.

Sie können mehrere <footer>-Elemente in einem Dokument verwenden.

Beispiel

<footer>
   <p>Veröffentlicht von: Hege Refsnes</p>
   <p>Kontaktinformation: <a href="mailto:someone@example.com">
  <a href="someone@example.com"></a>.</p>
</footer>

Versuchen Sie es selbst

HTML5 <nav>-Element

Das <nav>-Element definiert eine Sammlung von Navigationslinks.

Das <nav>-Element ist dazu bestimmt, große Navigationsschaltflächenblöcke zu definieren. Allerdings sollten nicht alle Links in einem Dokument im <nav>-Element sein!

Beispiel

<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>

Versuchen Sie es selbst

HTML5 <aside>-Element

<aside> ist ein Element für Inhalte außerhalb des Hauptinhalts der Seite (z.B. einer Seitenleiste).

Der Inhalt von aside sollte mit dem umgebenden Inhalt in Verbindung stehen.

Beispiel

<p>Meine Familie und ich haben diesen Sommer das Epcot Center besucht.</p>
<aside>
   <h4>Epcot Center</h4>
   <p>Das Epcot Center ist ein Themenpark in Disney World, Florida.</p>
</aside>

Versuchen Sie es selbst

HTML5 <figure> und <figcaption>-Elemente

In Büchern und Zeitungen ist es häufig, dass die Überschriften mit Bildern kombiniert werden.

Die Funktion der Überschrift (Beschriftung) ist es, dem Bild eine sichtbare Erklärung hinzuzufügen.

Durch HTML5 können Bilder und Überschriften kombiniert werden <figure> im Element:

Beispiel

<figure>
   <img src="pic_mountain.jpg" alt="The Pulpit Rock" width="304" height="228">
   <figcaption>Fig1. - Der Pulpit Felsen, Norwegen.</figcaption>
</figure>

Versuchen Sie es selbst

<img> Das Element definiert ein Bild,<figcaption> Das Element definiert die Überschrift.

Warum HTML5-Elemente verwenden?

Wenn HTML4 verwendet wird, werden Entwickler ihre bevorzugten Attributnamen verwenden, um die Styles der Seitenelemente zu setzen:

header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav, ...

Somit kann der Browser den richtigen Inhalt der Webseite nicht erkennen.

Und durch HTML5-Elemente wie: <header> <footer> <nav> <section> <article>, kann dieses Problem gelöst werden.

Laut W3C, Semantic Web:

„Ermöglicht den Austausch und die Wiederverwendung von Daten zwischen Anwendungen, Unternehmen und Organisationen.“

Semantische Elemente in HTML5

Nachstehend sind die neuen semantischen HTML5-Elemente in alphabetischer Reihenfolge aufgeführt.

Diese Links verweisen auf das vollständige HTML Referenzhandbuch.

Tag Beschreibung
<article> Definiert einen Artikel.
<aside> Definiert Inhalte außerhalb der Seiteinhalte.
<details> Definiert zusätzliche Details, die der Benutzer anzeigen oder verbergen kann.
<figcaption> Definiert die Überschrift des <figure>-Elements.
<figure> Bestimmt inhaltliche Inhalte außerhalb der Seite, wie z.B. Illustrationen, Diagramme, Fotos, Code-Listen usw.
<footer> Definiert den Fuß eines Dokuments oder eines Abschnitts.
<header> Bestimmt den Kopf eines Dokuments oder eines Abschnitts.
<main> Bestimmt das Hauptinhalt des Dokuments.
<mark> Definiert wichtiges oder hervorgehobenes Text.
<nav> Definiert eine Navigationsverknüpfung.
<section> Definiert einen Abschnitt im Dokument.
<summary> Definiert die sichtbare Überschrift des <details>-Elements.
<time> Definiert Datum/Zeit.