kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

HTML-Elemente und Semantik

HTML und Semantik

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.

Workshops und Seminare von kulturbanause

Visual Prototyping, Responsive Design, CSS Grid & Flexbox, WordPress, Adobe XD, HTML & CSS Grundlagen, Website-Optimierung …

Jetzt Frühbucher-Rabatte sichern!

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

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

1 Kommentar

  1. Christian

    Verfasst am 22. September 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 :)

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.