Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

Fast jedes HTML-Element hat eine festgelegte Bedeutung, mit der Inhalte auf einer Webseite ausgezeichnet und strukturiert werden können. Wenn für die verschiedenen Inhalte der Website das jeweils passendste HTML-Element verwendet wurde, spricht man von semantisch wertvollem Code. Da eine professionelle Website immer semantisch korrekt aufgebaut sein muss, erklären wir in diesem Beitrag den Begriff »Semantik« und die Bedeutung der verschiedenen HTML-Elemente.

Die Bedeutung von Semantik

Semantik heißt übersetzt »Bedeutungslehre«. Damit ist die »Beziehung zwischen den Zeichen und deren Bedeutungen« (Wikipedia) gemeint. In Bezug auf HTML heißt dies, dass Text der als Überschrift (<h1>-<h6>) ausgezeichnet wurde von der Bedeutung her zu einer Überschrift wird und somit wichtiger ist als Text, der keine Überschrift darstellt. Texte die als ungeordnete Listen (<ul>) ausgezeichnet wurden, stellen eine Aufzählung dar, bei der die Reihenfolge unwichtig ist. Anders als bei Texten, die in Form einer geordneten Liste (<ol>) ausgezeichnet wurden. Hier ist die Reihenfolge wichtig. Nach diesem Prinzip werden alle Textinhalte einer Website mit dem HTML-Element umschlossen, dass für die jeweilige Bedeutung am passendsten ist.

Semantik sieht man nicht

Bei der semantischen Auszeichnung mittels HTML stellt sich nicht die Frage nach dem Aussehen sondern ausschließlich nach der Bedeutung der einzelnen Inhalte. Es ist also ganz schlechter Stil, wenn man beispielsweise eine Überschrift der Gattung 3 (<h3>) verwendet, nur weil man möchte, dass die Überschrift eine bestimmte Farbe oder Größe bekommt. Eine technisch gut entwickelte Website trennt Gestaltung und Semantik vollständig (siehe standardkonformes Webdesign).

Die Semantik geriet in einigen Epochen des Internet allerdings ein wenig in Vergessenheit. Manch einer erinnert sich vielleicht noch an die Zeit der sog. Tabellendesigns. Damals wurde das HTML-Element <table> nicht gemäß seiner eigentlichen Bedeutung eingesetzt, sondern die Tabelle wurden als Hilfsmittels zur Strukturierung und Gestaltung des Layouts missbraucht. Für Suchmaschinen und sehbehinderte Menschen ist so etwas höchst unerfreulich.

Warum Semantik wichtig ist

Nun könnte man denken, dass der korrekte Einsatz von HTML-Elementen gemäß ihrer Bedeutung überflüssig ist, da die Bedeutungsebene von den Besucher der Website nicht gesehen wird.

Wichtig ist die semantische Auszeichnung vor allem, da Suchmaschinen den Quellcode lesen und anhand der verwendeten HTML-Tags die Wichtigkeit von Inhalten ableiten. Das hat starke Auswirkungen auf das Ranking einer Website. Daher empfiehlt es sich zum Beispiel, relevante Suchbegriffe (Keywords) in semantisch gewichtigeren HTML-Elementen wie dem Seitentitel (<title>) oder der Überschrift 1 (<h1>) unterzubringen.

Darüber hinaus spielt semantisch korrekter HTML-Code eine große Rolle für die Barrierefreiheit von Webseiten, da auch Screenreader den Quellcode auslesen und sehbehinderten Menschen vorlesen. Wenn der HTML-Code falsch ausgezeichnet ist oder HTML-Elemente gar absichtlich für die Geschaltung missbraucht wurden, wird der Zugang zur Website für behinderte Menschen unnötig erschwert.

Die wichtigsten semantischen Elemente in HTML

Damit ihr in der Lage seid die Inhalte eurer Website korrekt auszuzeichnen, haben wir euch hier die wichtigsten HTML-Elemente, ihre jeweilige Bedeutung und Standard-Gestaltung zusammengefasst. Bitte bedenkt, dass die Gestaltung nur ein Browser-Standard ist und mittels CSS frei verändert werden kann.

<html>

Der gesamte Inhalte einer HTML-Seite wird vom <html>-Tag umschlossen.

<head>

Der <head> beinhaltet Informationen die wichtig sind, aber nicht sichtbar auf der Seite erscheinen. Hierzu gehören u.a. Angaben für Suchmaschinen oder Social Media Portale

<title>

Der <title> beinhaltet den Titel der jeweiligen HTML-Seite. Er ist sichtbar im Browserfester oder im Browsertab und wird im <head> notiert.

<body>

Alles was innerhalb des body geschrieben wird, ist im Browserfenster sichtbar.

<html>
 <head>
  <title> Hier steht der Titel der Seite </title>
 </head>
 <body>
  Dieser Text ist im Browser sichtbar. 
 </body>
</html>

<h1> bis <h6>

In HTML gibt es sechs Hierarchieebenen bei den Überschriften (h= heading), h1 ist die höchste Ebene und h6 die niedrigste. Entsprechend der Zahl kann die Wichtigkeit einer Überschrift bestimmt werden.

<h1>Überschrift 1</h1>
<h2>Überschrift 2</h2>
<h3>Überschrift 3</h3>
<h4>Überschrift 4</h4>
<h5>Überschrift 5</h5>
<h6>Überschrift 6</h6>

<p>

Mit dem <p>-Element (p = paragraph) werden Textabsätze ausgezeichnet um Fließtext zu strukturieren.

<body>
  <h1>Überschrift 1</h1>
  <p>Textabsatz</p>
  <p>Textabsatz</p>
</body>

<br>

Mit <br> (break) wird ein Zeilenumbruch erzeugt.

Lorem ipsum<br>dolor sit amet. 

<em>

Um Wörter zu betonen, kann das <em>-Element (em = emphasized) benutzt werden. Browser stellen die so ausgezeichneten Inhalte standardmäßig kursiv dar.

<p>Lorem ipsum <em>dolor sit amet</em>, consectetur adipisicing elit, sed do eiusmod.</p>

<strong>

Ähnlich wie beim <em>-Element werden durch <strong> Wörter betont – hier jedoch noch stärker. Der Browser stellt das Wort fett dar.

<p>Lorem ipsum <strong>dolor sit amet</strong>, consectetur adipisicing elit, sed do eiusmod.</p>

<code>

Das HTML-Element <code> zeichnet Text als Quellcode aus.

<p>Lorem ipsum <code>dolor sit amet</code>, consectetur adipisicing elit, sed do eiusmod.</p>

<blockquote>

Um längere Zitate darzustellen, eignet sich das <blockquote>-Element. Hierbei werden die Texte in der Regel rechts und links eingerückt und durch einen Zeilenumbruch formatiert. Die genaue Darstellung ist jedoch von Browser zu Browser unterschiedlich.

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod<br>
 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,<br>
 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo<br>
 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.<br>
  </p>
</blockquote>

<cite>

Falls die Zitate kürzer ausfallen, eignet sich das <cite>-Element. Die gewünschten Texte werden i.d.R. kursiv dargestellt. Anders als <blockquote> erzeugt <cite> keinen Zeilenumbruch.

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor <cite>Zitat Zitat Zitat</cite> Ut enim ad minim veniam.</p>

<a>

Um Hyperlinks funktionsfähig anzugeben, wird das <a>-Element benutzt, das nach dem verlinkten Text geschlossen werden muss (</a>). Das <a>-Element benötigt zwingend das Attribut href (Hypertext Reference) in dem das Link-Ziel angegeben wird. Links werden vom Browser blau und unterstrichen dargestellt. Besuchte Links sind violett.

<a href="#">Das ist ein Link</a>

<abbr>

Texte, die mit dem <abbr>-Element (eng. abbreviation) umschlossen sind beinhalten eine Abkürzung. Im title-Attribut wird dann die ausgeschrieben Version notiert, die der Browser per Mouse-Over anzeigt.

<abbr title="Abkürzung">Abk.</abbr>

<ol>

Mit dem <ol>-Element werden geordnete oder nummerierte Listen (eng. ordered list) umgesetzt, wobei mit dem <li>-Tag die einzelnen Listenpunkte umschlossen werden.

<ol>
    <li>geordnete Liste</li>
    <li>geordnete Liste</li>
    <li>geordnete Liste</li>
</ol>

<ul>

Das <ul>-Element wird für eine ungeordnete Liste (eng. unordered list) verwendet. Auch die Navigation auf einer Website wird i.d.R. damit erstellt.

<ul>
    <li>ungeordnete Liste</li>
    <li>ungeordnete Liste</li>
    <li>ungeordnete Liste</li>
</ul>

<img>

Mithilfe des <img>-Elements werden Bilder oder Grafiken auf einer Website eingebunden. Das Attribut src bestimmt die Bildquelle, das alt-Attribut beschreibt in Textform den Inhalt des Bildes. Beide Attribute sind notwendig.

<img src="bild.png" alt="Beispielgrafik">

<form>

Ein Formular wird mit dem <form>-Element erzeugt. Innerhalb des Formulars werden mit dem Element <input> Eingabefelder verschiedener Art erzeugt.

<form>
    <label for="Vorname">Vorname: </label>
    <input type="text" id="Vorname" name="Vorname"><br>
    <label for="Zuname">Zuname: </label>
    <input type="text" id="Zuname" name="Zuname"><br>
    <button type="submit">Abschicken</button>
</form>

<table>

<table> leitet eine Tabelle ein und wird somit, neben den Elementen <th> (Kopfzelle), <td> (normale Datenzelle) und <tr> (Einleitung einer neuen Tabellenzeile), für die Darstellung tabellarischer Daten verwendet.

<table>
   <tr>
     <th>Kopfzelle</th>
     <th>Kopfzelle</th>
     <th>Kopfzelle</th>
   </tr>
   <tr>
     <td>Datenzelle</td>
     <td>Datenzelle</td>
     <td>Datenzelle</td>
   </tr>
   <tr>
     <td>Datenzelle</td>
     <td>Datenzelle</td>
     <td>Datenzelle</td>
   </tr>
</table>

Neue semantische Elemente seit HTML5

Mit HTML5 wurden weitere semantische Elemente eingeführt.

<header>

Mit dem <header>-Element wir der Kopfbereich eines Sinnabschnitts ausgezeichnet. Er wird auch für den Kopfbereich der gesamten Website verwendet und enthält dann üblicherweise das Firmenlogo, einen Slogan oder ein Menü.

<nav>

Das <nav>-Element kennzeichnet Navigationselemente.

<article>

Abgeleitet von dem Artikel für die Zeitung werden alle in sich abgeschlossenen Inhalte, wie z.B. Beiträge in einem Blog mit dem <article>-Element umfasst.

<section>

Mit dem <section>-Element können Inhalte thematisch in Gruppen zusammengefasst werden. Eine <section> benötigt zwingend eine Überschrift.

<aside>

Inhalte, die nicht zum Hauptinhalt einer Seite zählen, werden mit dem  <aside>-Element ausgezeichnet. Mit <aside> kann beispielsweise eine Sidebar auf der Website eingerichtet werden.

<footer>

Die Informationen im Fußbereich der Website oder eines Sinnabschnitts werden mit dem <footer>-Element umschlossen.

Vollständiges Beispiel

Das folgende Beispiel zeigt die typischen HTML-Elemente anhand eines typischen Seitenaufbaus.

<html>
<head>
 <title> Hier steht der Titel der Seite </title>
</head>
<body>
  <header>
    <h1>Überschrift für die gesamte Website</h1>
    <nav>
      <ul>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
      </ul>
    </nav>
  </header>
  <article>
    <h2>Überschrift des ersten Artikels</h2>
      <p>Text des ersten Artikels</p>
  </article>
  <article>
    <h2>Überschrift des zweiten Artikels</h2>
    <p>Text des zweiten Artikels</p>
  </article>
  <aside>
    <h3>Überschrift Sidebar</h3>
    <p>Text in der Sidebar</p>
  </aside>
  <footer>
    <h3>Überschrift Footer</h3>
    <p>Text im Footer</p>
  </footer>
</body>
</html>

Barrierefreiheit und Semantik

Der Gebrauch der Semantik für die barrierefreie Benutzung von Webseiten ist trotz der Entwicklung von HTML5 eingeschränkt. HTML-Elemente können aber mithilfe von WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications) und Microformaten mit zusätzlichen Attributen versehen werden. Zum Beispiel werden mit dem role-Attribut den HTML-Elementen zusätzliche Informationen mitgegeben, die das Navigieren auf Webseiten für Menschen mit Behinderung verbessern.

Links / Quellen

– selfhtml/HTML-Elemente
– W3C/WAI-ARIA Overview

Geschrieben von kulturbanause Team

thumb

Beiträge bei denen das kulturbanause-Team als Autor angegeben ist, wurden von mehreren Personen in Zusammenarbeit geschrieben. Wir nutzen diesen Blog als öffentliches Archiv und um euch bei alltäglichen Problemen im Zusammenhang mit der Erstellung von Websites zu helfen. Neben diesem Blog bieten wir auch Trainings wie Schulungen, Bücher oder Videos an. Und natürlich unterstützen wir auch gerne im Rahmen unserer Agenturtätigkeit.

Feedback & Ergänzungen – 4 Kommentare

  1. Michael
    schrieb am 29.11.2019 um 08:46 Uhr:

    Hallo Jonas,
    Vielen Dank für die ausführliche Darstellung. Ich finde es trotzdem nach wie vor bei einigen Dingen schwierig, die passende Auszeichnung zu finden. Ich habe auf meiner Seite einen Bereich mit 6 Kacheln; sie haben jeweils ein Hintergrundbild, davor steht Text und ein Button. Gilt dafür auch figure und figcaption? Oder gilt dies nur, wenn Text UNTER einem Bild steht?
    Vielen Dank und viele Grüße, Michael

    Antworten
    • Jonas Hellwig
      schrieb am 03.12.2019 um 13:19 Uhr:

      Wenn es eher opulent gestaltete Links sind und keine inhaltlichen Abbildungen, dann ist die Auszeichnung mit figure und figcaption überflüssig.

      Antworten
      • Michael
        schrieb am 05.12.2019 um 14:05 Uhr:

        ich danke Dir!

  2. Christian
    schrieb am 22.09.2017 um 18:25 Uhr:

    Vielen Dank für den ausführlichen und gut verständlichen Bericht zur Semantik – jetzt sehe ich einige Dinge etwas klarer :)

    Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →