Die Semantik unserer HTML5-Basisseite
HTML5-Elemente einer Webseite
Der body unserer Basisseite enthält die Elemente article, h1, img, p, em und a, um die Bedeutung der Inhalte zu beschreiben. Der gesamte Inhalt wird im article verschachtelt.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 Lernen - Grundlagen und Tutorials</title>
</head>
<body>
<article>
<h1>
HTML5 Lernen - Grundlagen und Tutorials
</h1>
<img src="turn_right_128.png" width="128" height="128" alt="HTML5 Lernen - Grundlagen und Tutorials" />
<p>
HTML5 bietet neue <em>Elemente</em> für die Definition der Struktur einer Website und die Einbettung von Inhalten.
<a href="https://www.html-lernen.info/html5-lernen/html5-info.html" rel="external" title="HTML5 Lernen - Grundlagen und Tutorials">HTML5</a> ist eine Spezifikation, die einige neue Tags und neues Markup beschreibt. Wir beginnen mit einem kurzen Überblick über HTML5.
</p>
</article>
</body>
</html>
Die Überschriften sind wesentliche Elemente für die Definition der Seitengliederung. Damit werden die Seiten für Bildschirmlesegeräte besser zugänglich und Suchmaschinen nutzen sie, um den Schwerpunkt einer Seite zu bestimmen.
<h1>
HTML5 Lernen - Grundlagen und Tutorials
</h1>
Mit img kann man ganz einfach eine Seite durch ein Bild ergänzen. Wie durch das alt-Attribut definiert, wird "HTML5 Lernen - Grundlagen und Tutorials" dargestellt, falls das Bild nicht erscheint.
<img src="turn_right_128.png" width="128" height="128" alt="HTML5 Lernen - Grundlagen und Tutorials" />
Nun haben Sie die Rolle von HTML kennengelernt und wir wenden uns dem gedanklichen Prozess zu, der hinter der Auszeichnung von Inhalten steht. Wie Sie gleich merken werden, sind fürs Schreiben von semantischem HTML keine Zaubertricks nötig. Wenn Sie erst einmal mit den Ihnen zur Verfügung stehenden Elementen vertraut sind, müssen Sie eigentlich nur etwas überlegen. Wenden wir uns noch einmal dem body unserer Basisseite zu, um einen Eindruck von den am häufigsten verwendeten HTML5-Elementen zu bekommen.
Der gesamte Inhalt steht in einem
article-Element. Kurz gesagt definiert article einen ganz bestimmten Inhaltstyp.
article ist das Element der Wahl, um den Inhalt unserer Basisseite einzufassen, aber nicht notwendigerweise auf jeder Seite, die Sie schreiben werden.
Als Nächstes kommt eine Überschrift. HTML bietet Ihnen die sechs Überschriftenebenen h1–h6, wobei h1 die oberste und wichtigste ist. h2 ist eine nachrangige Überschrift von h1, h3 eine Unterüberschrift von h2 usw., so als würden Sie in einer Textverarbeitung ein Dokument mit verschiedenen Überschriften eintippen. Jede HTML-Seite sollte ein h1 besitzen (oder abhängig vom Inhalt auch mehr). Also war es die naheliegende Wahl, auf der Basisseite die Überschrift mit h1 auszuzeichnen.
Als Nächstes kommt ein Bild. Das img-Element ist die primäre Wahl zur Darstellung eines Bilds, also gibt es auch hier keine Debatte darüber, welches Element passen würde. Das alt-Attribut liefert Text, der dargestellt wird, wenn das Bild nicht geladen oder die Seite in einem reinen Textbrowser aufgerufen wird.
Das p-Element kann andere Elemente enthalten, die die Semantik von Sätzen in einem Absatz definieren. Die Elemente em und a sind dafür zwei Beispiele.
<p>
HTML5 bietet neue <em>Elemente</em> für die Definition der Struktur einer Website und die Einbettung von Inhalten.
<a href="https://www.html-lernen.info/html5-lernen/html5-info.html" rel="external" title="HTML5 Lernen - Grundlagen und Tutorials">HTML5</a> ist eine Spezifikation, die einige neue Tags und neues Markup beschreibt. Wir beginnen mit einem kurzen Überblick über HTML5.
</p>
Dieses a-Element definiert einen Link auf die HTML5-Lernen-Webseite über Grundlagen und Tutorials. Das optionale rel-Attribut ergänzt die Semantik, weil es darauf verweist, dass der Link auf eine andere Site zeigt. Der Link funktioniert allerdings auch ohne dieses Attribut. Das optionale Attribut title erweitert die Semantik des a, indem es Informationen über die verlinkte Seite bietet. Es erscheint im Browser, wenn der User mit der Maus über den Link fährt.
<a href="https://www.html-lernen.info/html5-lernen/html5-info.html" rel="external" title="HTML5 Lernen - Grundlagen und Tutorials">HTML5</a>
Der Absatz (englisch paragraph) wird durch das Element p ausgezeichnet. So wie in gedrucktem Material kann ein Absatz nur einen oder mehrere Sätze enthalten. Falls auf der Seite ein weiterer Absatz nötig ist, ergänzen Sie einfach ein weiteres p-Element nach dem ersten.
In unserem Absatz sind zwei Elemente verschachtelt, die die Bedeutung von bestimmten Textarten definieren: em und a. Dies sind Beispiele für die verschiedenen textlichen Elemente, die HTML5 bietet, und die Mehrzahl davon verbessert die Semantik von Absatztexten.
Das Element em betont etwas (steht für emphasis, Betonung). Bei unserer Seite wird das durch das Wort "Elemente" betont. Machen Sie sich noch einmal klar, dass HTML die Bedeutung des Inhalts beschreibt, und deswegen diktiert em eine semantische Betonung und keine visuelle Hervorhebung, auch wenn em-Text üblicherweise kursiv dargestellt wird.
Schließlich wird bei der Basisseite mit dem Element a (für anchor, Anker) ein Link auf eine andere Seite definiert. Dies ist das mächtigste Element im ganzen HTML, denn es macht das Web erst zum Web: Es verknüpft die Seiten untereinander oder mit anderen Quellen und verbindet einen Seitenbereich mit einem anderen (entweder auf der gleichen Seite oder woanders). Bezogen auf dieses Beispiel steht diese Verknüpfung dafür, dass der Text "HTML5 Lernen - Grundlagen und Tutorials" ein Link auf die HTML5-Lernen-Webseite ist.
Ganz einfach, nicht wahr? Wenn Sie erst einmal die Ihnen zur Verfügung stehenden HTML5-Elemente gelernt haben, ist es ein Kinderspiel, für Ihre Inhalte die richtigen zu wählen.
Gelegentlich werden Sie auf bestimmte Inhalte stoßen, die man sinnvollerweise auch auf mehr als eine Weise auszeichnen kann, aber das macht nichts. Es gibt nicht immer einen richtigen und einen falschen Weg, nur meistens.
Schließlich versucht HTML5 nicht, für jeden denkbaren Inhaltstyp ein Element zu liefern, weil das die Sprache sonst sperrig machen würde. Stattdessen geht sie einen praktischen, an realen Gegebenheiten orientierten Weg und definiert Elemente, mit denen die große Mehrheit aller Fälle abgedeckt ist.
Zur Schönheit von HTML gehört, dass es für alle ganz einfach ist, die Grundlagen zu lernen, dann ein paar Seiten zu erstellen und von dort aus dann das eigene Wissen auszubauen. Also lassen Sie sich nicht davon abschrecken, dass es ungefähr 100 HTML-Elemente gibt. Es gibt im Wesentlichen eine Handvoll Elemente, die Sie dauernd einsetzen werden, und die restlichen bleiben weniger häufig vorkommenden Situationen vorbehalten. Sie haben bereits die Grundlagen mehrerer oft verwendeter Elemente erfahren und sind somit schon gut unterwegs.