Semantische Elemente in HTML5 - HTML lernen

Semantische Elemente gehören zu den bedeutendsten Neuerungen in HTML5. In früheren HTML-Versionen wurde das generische <div>-Tag mit einem id- oder class-Attribut zur Strukturierung von Webseiten verwendet. Für die Definition von Seitenleisten, Fußzeilen, Menüs oder anderen strukturellen Blöcken wurde das <div>-Tag mit der entsprechenden Bedeutung eingesetzt (div class="footer").

Semantische Elemente in HTML haben eine inhärente Bedeutung und vermitteln diese sowohl dem Browser als auch dem Entwickler. Sie definieren klar, welche Art von Inhalt sie enthalten (zum Beispiel wird das <footer>-Tag anstelle von <div id="footer"> verwendet). Sie verbessern auch die Barrierefreiheit und erleichtern Suchmaschinen das Verständnis der Struktur.

Diese Seite behandelt die strukturellen (seitenlayout-bezogenen) semantischen Elemente, die zum Aufbau des Grundgerüsts nahezu jeder Webseite verwendet werden — <header>, <nav>, <main>, <article>, <section>, <aside> und <footer> — sowie einige semantische Tags auf Inhaltsebene. Außerdem wird gezeigt, wie diese Elemente ARIA-Landmarks zugeordnet werden, was der eigentliche Grund für ihre Bedeutung in der Barrierefreiheit ist.

Schauen wir uns semantische Elemente und ihre Bedeutung an.

Ein vollständiges semantisches Seitenlayout

Bevor man sich jedes Element einzeln ansieht, ist es hilfreich zu verstehen, wie sie zusammenpassen. Die strukturellen Elemente verschachteln sich auf vorhersehbare Weise: Ein <header> und ein <footer> umschließen die Seite, ein einzelnes <main> enthält den Hauptinhalt, und darin kann ein <article> neben einem verwandten <aside> stehen. Die Navigation befindet sich im <nav>.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Semantic page layout</title>
  </head>
  <body>
    <header>
      <h1>The Daily Markup</h1>
      <nav>
        <a href="/">Home</a> |
        <a href="/articles">Articles</a> |
        <a href="/about">About</a>
      </nav>
    </header>

    <main>
      <article>
        <h2>Why semantic HTML matters</h2>
        <p>Semantic elements describe the role of the content they wrap,
          which helps browsers, search engines and assistive technology.</p>
      </article>

      <aside>
        <h2>Related reading</h2>
        <ul>
          <li><a href="/articles/headings">Heading structure</a></li>
          <li><a href="/articles/landmarks">ARIA landmarks</a></li>
        </ul>
      </aside>
    </main>

    <footer>
      <p>Company © W3docs. All rights reserved.</p>
    </footer>
  </body>
</html>

Der Rest dieser Seite erklärt jedes Element einzeln.

Semantische Elemente und ARIA-Landmarks

Der größte praktische Vorteil struktureller semantischer Elemente ist die Barrierefreiheit. Screenreader-Nutzer scrollen eine Seite nicht von oben nach unten — sie springen zwischen Landmarks. Viele strukturelle Elemente setzen automatisch eine implizite ARIA-Landmark-Rolle, sodass man dies kostenlos erhält, indem man einfach das richtige Tag verwendet (kein role-Attribut erforderlich):

Element	Implizite Landmark-Rolle	Hinweise
`<header>` (direktes Kind von `<body>`)	`banner`	Seitenweiter Header. Ein `<header>` innerhalb von `<article>`/`<section>` ist kein Landmark.
`<nav>`	`navigation`	Mehrere Navs mit `aria-label` beschriften, damit sie unterscheidbar sind.
`<main>`	`main`	Nur einmal pro Seite verwenden.
`<aside>`	`complementary`	Inhalt, der mit dem Hauptinhalt zusammenhängt, aber von ihm trennbar ist.
`<footer>` (direktes Kind von `<body>`)	`contentinfo`	Seitenweiter Footer (Copyright, Kontakt usw.).

Aus diesem Grund ist es nicht nur ordentlicheres Markup, <div class="header"> durch <header> zu ersetzen — es macht die Seite für Menschen mit Hilfstechnologien navigierbar.

Das `<header>`-Element

Das <header>-Element definiert einen Header für das Dokument oder einen Abschnitt. Es enthält in der Regel ein Logo, eine Suchleiste, Navigationslinks usw.

Beispiel des HTML-`<header>`-Elements

Beispiel des HTML-Headers der Seite|W3Docs

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      li {
        display: inline-block;
        margin-right: 10px;
        color: #778899;
      }
    </style>
  </head>
  <body>
    <header>
      <nav>
        <ul style="padding:0;">
          <li>Home</li>
          <li>About us</li>
        </ul>
      </nav>
      <h1>Welcome to our page</h1>
      <hr />
    </header>
    <article>
      <header>
        <h2>Title of the document</h2>
        <p>The content of the paragraph.</p>
      </header>
    </article>
  </body>
</html>

Probier es selbst »

Das `<nav>`-Element

Das <nav>-Element definiert einen Block mit Navigationslinks, entweder innerhalb des aktuellen Dokuments oder zu anderen Dokumenten. Beachte, dass nicht alle Links im HTML-Dokument innerhalb des <nav>-Elements platziert werden können; es kann nur wichtige Navigationsblöcke enthalten. Beispielsweise kann das <nav>-Tag auch im <footer>-Tag platziert werden, um Links im Footer der Website zu definieren.

Beispiel des HTML-`<nav>`-Elements

Beispiel des nav-Elements der Seite|W3Docs

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <header>
      <h1>Programming Courses</h1>
    </header>
    <nav>
      <a href="/learn-html.html">HTML</a> | <a href="/learn-css.html">CSS</a> | <a href="/learn-javascript.html">JavaScript</a> | <a href="/learn-php.html">PHP</a> |
    </nav>
    <h2>Welcome to W3Docs!</h2>
  </body>
</html>

Probier es selbst »

Das `<article>`-Element

Das <article>-Element wird verwendet, um eigenständigen, in sich geschlossenen Inhalt zu kennzeichnen (Artikel, Blogbeiträge, Kommentare usw.). Der Inhalt des Elements hat eine eigene Bedeutung und ist leicht vom restlichen Inhalt der Webseite zu unterscheiden.

Beispiel des HTML-`<article>`-Elements

Beispiel des article-Elements der Seite|W3Docs

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <article>
      <h1>Title of the article</h1>
      <p>Text of the article</p>
    </article>
  </body>
</html>

Probier es selbst »

Das `<section>`-Element

Das <section>-Element wird verwendet, um eigenständige Abschnitte innerhalb einer Webseite zu gruppieren, die logisch zusammenhängenden Inhalt enthalten (Nachrichtenblock, Kontaktinformationen usw.).

Beispiel des HTML-`<section>`-Elements

Beispiel des section-Elements der Seite|W3Docs

<!DOCTYPE html>
<html>
  <head>
    <title>Using the section tag</title>
  </head>
  <body>
    <section>
      <h1>Hypertext markup language HTML</h1>
      <p>HTML is the standard markup language for creating web pages and web applications. Browsers receive HTML documents from a web server or from local storage and render the documents into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.</p>
    </section>
    <section>
      <h1>CSS</h1>
      <p>A formal language that is used as a description zone, formatting the appearance of a web page written with the help of markup languages HTML and XHTML but it can be applied to any XML-document, for example, to SVG or XUL.</p>
    </section>
  </body>
</html>

Probier es selbst »

`<section>` vs. `<article>`

Diese beiden Elemente werden leicht verwechselt. Eine einfache Faustregel:

Verwende <article>, wenn der Inhalt eigenständig und unabhängig verteilbar ist — er würde auch aus dem Kontext herausgelöst noch Sinn ergeben (ein Blogbeitrag, eine Neuigkeit, eine Produktkarte, ein einzelner Benutzerkommentar). Wenn man sich vorstellen kann, ihn in einem RSS-Feed zu syndizieren, ist es ein <article>.
Verwende <section> für eine thematische Gruppierung verwandter Inhalte, die Teil von etwas Größerem ist und für sich allein keine Bedeutung hat. Ein <section> sollte fast immer mit einer Überschrift (<h2>–<h6>) beginnen, die die Gruppe benennt.

Wenn keines von beiden zutrifft — man nur einen Styling- oder Layout-Container ohne semantische Bedeutung benötigt — greift man stattdessen auf ein einfaches <div> zurück.

Das `<aside>`-Element

Das <aside>-Element definiert einen Abschnitt mit zusätzlichen Informationen, die mit dem Inhalt rund um das <aside>-Element zusammenhängen. Es wird in der Regel verwendet, um einen Artikel mit zusätzlichen Informationen zu bereichern oder Teile hervorzuheben, die für den Benutzer interessant sein könnten.

Beispiel des HTML-`<aside>`-Elements

Beispiel des aside-Elements der Seite|W3Docs

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>I like watching Game of Thrones.</p>
    <aside>
      <h4>Game of Thrones</h4>
      <p>Game of Thrones is an American fantasy drama television series created by David Benioff and D. B. Weiss. It is an adaptation of A Song of Ice and Fire, George R. R. Martin's series of fantasy novels</p>
    </aside>
  </body>
</html>

Probier es selbst »

Das `<footer>`-Element

Das <footer>-Element definiert den Footer einer Webseite oder eines Abschnitts. In der Regel enthält es Copyright-Informationen, Kontaktdaten, Navigationslinks usw.

Beispiel des HTML-`<footer>`-Elements

Beispiel des footer-Elements der Seite|W3Docs

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      header {
        height: 40px;
        padding: 20px 20px 0;
        background: #e1e1e1;
      }
      main {
        height: 60vh;
        padding: 20px;
      }
      footer {
        padding: 10px 20px;
        background: #666;
        color: white;
      }
      a {
        color: #00aaff;
      }
    </style>
  </head>
  <body>
    <header>Header / Menu</header>
    <main>
      <h1>Main content</h1>
      <p>This is some paragraph. </p>
    </main>
    <footer>
      <p>Company © W3docs. All rights reserved.</p>
    </footer>
  </body>
</html>

Probier es selbst »

Das `<address>`-Element

Das <address>-Element liefert Kontaktinformationen für den nächsten <article>-Vorfahren oder für das gesamte Dokument, wenn es ein direktes Kind von <body> ist. Es ist für Kontaktdaten (des Autors oder Eigentümers des Artikels oder der Website) gedacht — nicht für beliebige Postadressen, die lediglich Teil des Inhalts sind.

Beispiel des HTML-`<address>`-Elements

Beispiel des address-Elements der Seite|W3Docs

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <address>
      Author: W3docs Team<br />
      <a href="mailto:[email protected]">Send Mail to the Author</a>
    </address>
  </body>
</html>

Probier es selbst »

Demo: Send Mail to the Author

Das `<main>`-Element

Das <main>-Element definiert den Hauptinhalt der Seite. Der Inhalt des <main>-Tags muss einzigartig sein und keine Blöcke desselben Typs duplizieren, die in anderen Dokumenten wiederholt werden, wie der Header einer Website, Footer, Menü, Suche, Copyright-Informationen usw.

Beispiel des HTML-`<main>`-Elements

Beispiel des main-Elements der Seite|W3Docs

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <main>
      <h1>Programming languages</h1>
      <p>Languages HTML and CSS are intended for site layout.</p>
      <article>
        <h2>HTML</h2>
        <p> HTML (Hyper Text Markup Language) is a language of hypertext markup, which is used to create web pages. </p>
        <p>... </p>
        <p>... </p>
      </article>
      <article>
        <h2>CSS</h2>
        <p>CSS is a language of styles, defining the display of HTML documents. </p>
        <p>... </p>
      </article>
    </main>
  </body>
</html>

Probier es selbst »

Das `<figure>`-Element

Das <figure>-Element wird zur Kennzeichnung von eigenständigem Inhalt verwendet. Das Tag kann Bilder, Diagramme, Illustrationen, Codebeispiele usw. enthalten.

Beispiel des HTML-`<figure>`-Elements

Beispiel des figure-Elements der Seite|W3Docs

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>A cute baby</p>
    <figure>
      <img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="A Cute Baby" width="250" height="200" />
    </figure>
  </body>
</html>

Probier es selbst »

Das `<figcaption>`-Element

Das <figcaption>-Element wird verwendet, um dem <figure>-Tag eine Beschriftung oder Anmerkung hinzuzufügen.

Beispiel des HTML-`<figcaption>`-Elements

Beispiel des figcaption-Elements der Seite|W3Docs

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>Image of a baby</p>
    <figure>
      <img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="A Cute Baby" width="250" height="200" />
      <figcaption>Fig.1 – Cute baby</figcaption>
    </figure>
  </body>
</html>

Probier es selbst »

Semantische Elemente auf Inhaltsebene

Die obigen Elemente beschreiben die Struktur einer Seite. Die folgenden Tags fügen Bedeutung auf Textebene hinzu — sie kennzeichnen kleine Inhaltsteile innerhalb eines Absatzes, anstatt das Seitenlayout zu gestalten. Sie sind keine Landmarks und beeinflussen nicht die Seitenstruktur.

Das `<time>`-Element

Das <time>-Element definiert eine für Menschen lesbare Uhrzeit auf einer 24-Stunden-Uhr oder ein genaues Datum im Gregorianischen Kalender.

Beispiel des HTML-`<time>`-Elements

Beispiel des time-Elements der Seite|W3Docs

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document.</title>
  </head>
  <body>
    <p>The game will be held on<time datetime="2018-09-28 19:00">September 28</time>.</p>
    <p>It will start at <time>19:00</time></p>
  </body>
</html>

Probier es selbst »

Das `<mark>`-Element

Das <mark>-Element wird verwendet, um einen Teil des Textes zu markieren, der relevant ist. Es kann verwendet werden, um Text zur Betonung hervorzuheben, Suchbegriffe in Suchergebnissen zur Kontextualisierung zu markieren oder neu vom Benutzer hinzugefügten Inhalt durch eine andere Darstellung kenntlich zu machen.

Beispiel des HTML-`<mark>`-Elements

Beispiel des mark-Elements der Seite|W3Docs

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>Learn HyperText markup language (HTML) on <mark>W3Docs.com</mark> website.</p>
  </body>
</html>

Probier es selbst »

Das `<bdi>`-Element

Das <bdi>-Element wird verwendet, um bidirektionalen Text zu isolieren, wenn eine Sprache mit Rechts-nach-links-Schreibrichtung, wie Arabisch oder Hebräisch, inline mit Links-nach-rechts-Sprachen verwendet wird.

Beispiel des HTML-`<bdi>`-Elements

Beispiel des bdi-Elements der Seite|W3Docs

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1> Example of using the bdi element </h1>
    <p dir="ltr"><bdi>أرمينيا جميلة</bdi> This sentence in Arabic is automatically displayed from right to left.</p>
  </body>
</html>

Probier es selbst »

Das `<wbr>`-Element

Das <wbr>-Tag wird verwendet, um dem Browser anzuzeigen, wo ein Zeilenumbruch im Text eingefügt werden könnte. Anders als das <br>-Tag, das den Browser zwingt, einen Zeilenumbruch einzufügen, analysiert der Browser beim <wbr> zunächst den Inhalt und fügt dann bei Bedarf einen Zeilenumbruch ein (bei zu langen Wörtern oder URL-Adressen).

Beispiel des HTML-`<wbr>`-Elements

Beispiel des wbr-Elements der Seite|W3Docs

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>Example of a long string of text without wbr.</p>
    <p>This is the longest word you can ever meet in the English language pneumonoultramicroscopicsilicovolcanoconiosis</p>
    <p>Example of a long string of text with wbr.</p>
    <p>This is the longest word you can ever meet in the English language pneumono<wbr />ultra<wbr />micro<wbr />scopic<wbr />silico<wbr />volcano<wbr />coniosis</p>
  </body>
</html>

Probier es selbst »

Übungen

Übung

Welches Element sollte einen eigenständigen, unabhängig verteilbaren Inhalt wie einen Blogbeitrag umschließen?

Das section-ElementDas article-ElementDas div-ElementDas aside-Element

Übung

Welche Aussagen über semantische Elemente sind richtig? (Alle zutreffenden auswählen.)

Sie beschreiben die Art des Inhalts, den sie enthalten.Sie helfen Suchmaschinen und unterstützenden Technologien, die Seite zu verstehen.Strukturelle Elemente wie header, nav und main setzen ARIA-Landmark-Rollen.Sie ersetzen die Notwendigkeit von CSS-Styling.

Ein vollständiges semantisches Seitenlayout

Semantische Elemente und ARIA-Landmarks

Das <header>-Element

Beispiel des HTML-<header>-Elements

Das <nav>-Element

Beispiel des HTML-<nav>-Elements

Das <article>-Element

Beispiel des HTML-<article>-Elements

Das <section>-Element

Beispiel des HTML-<section>-Elements

<section> vs. <article>

Das <aside>-Element

Beispiel des HTML-<aside>-Elements

Das <footer>-Element

Beispiel des HTML-<footer>-Elements

Das <address>-Element

Beispiel des HTML-<address>-Elements

Das <main>-Element

Beispiel des HTML-<main>-Elements

Das <figure>-Element

Beispiel des HTML-<figure>-Elements

Das <figcaption>-Element

Beispiel des HTML-<figcaption>-Elements

Semantische Elemente auf Inhaltsebene

Das <time>-Element

Beispiel des HTML-<time>-Elements

Das <mark>-Element

Beispiel des HTML-<mark>-Elements

Das <bdi>-Element

Beispiel des HTML-<bdi>-Elements

Das <wbr>-Element

Beispiel des HTML-<wbr>-Elements

Übungen

Das `<header>`-Element

Beispiel des HTML-`<header>`-Elements

Das `<nav>`-Element

Beispiel des HTML-`<nav>`-Elements

Das `<article>`-Element

Beispiel des HTML-`<article>`-Elements

Das `<section>`-Element

Beispiel des HTML-`<section>`-Elements

`<section>` vs. `<article>`

Das `<aside>`-Element

Beispiel des HTML-`<aside>`-Elements

Das `<footer>`-Element

Beispiel des HTML-`<footer>`-Elements

Das `<address>`-Element

Beispiel des HTML-`<address>`-Elements

Das `<main>`-Element

Beispiel des HTML-`<main>`-Elements

Das `<figure>`-Element

Beispiel des HTML-`<figure>`-Elements

Das `<figcaption>`-Element

Beispiel des HTML-`<figcaption>`-Elements

Das `<time>`-Element

Beispiel des HTML-`<time>`-Elements

Das `<mark>`-Element

Beispiel des HTML-`<mark>`-Elements

Das `<bdi>`-Element

Beispiel des HTML-`<bdi>`-Elements

Das `<wbr>`-Element

Beispiel des HTML-`<wbr>`-Elements