16. Dezember 2019 // von Gmo TN34-Pflegeguide: Semantik

Sinnvolle Überschriften sind nicht nur für Ihre Leser relevant: auch die Suchmaschinen lieben eine ordentliche Überschriften-Struktur. In diesem Beitrag erfahren Sie, wie Sie die Semantik auf ihrer Seite einsetzen.

Die Semantik zählt zu den Sprachwissenschaften. Der Begriff stammt aus dem griechischen und heißt so viel wie „Bedeutungslehre“. Im Zusammenhang mit HTML steht Semantik grob übersetzt für „sinnvoll gegliedert“. Dazu gibt es allerlei Struktur-Elemente (Tags), mit denen Inhalte ausgezeichnet werden können, um Suchmaschinen und Screenreadern die Bedeutung verschiedener Inhalte zu erklären.
Zum Beispiel wird allein anhand des korrekten Listen-Tags (ul/ol) ersichtlich, ob es sich um eine Liste handelt, in der die Reihenfolge wichtig ist (ol – ordered list) oder ob die Reihenfolge keine Rolle spielt (ul – unordered list).

Überschriften

Die Semantik der Überschriften ist ein wichtiger Faktor der Suchmaschinenoptimierung. Der korrekte Einsatz der Überschriften hilft Suchmaschinen, den Inhalt und die Struktur korrekt zu erfassen.
Im HTML stehen sechs Überschriften-Hierarchien zur Verfügung. Wichtig: Die verschiedenen Überschriften müssen immer im Sinne der Semantik und nicht zur Gestaltung eingesetzt werden. Falls der Stil der Überschrift (Größe, Gestaltung) nicht passt, sollte nicht eine falsche Überschrift eingesetzt werden, sondern die korrekte Überschrift in diesem Kontext gestylt werden. Wenden Sie sich dazu an den Entwickler der Seite.

Die Hierarchien:

H1: Dies ist die wichtigste Überschrift der jeweiligen Seite und sollte das Thema der Seite wiedergeben. Wichtig: Die H1 darf auf jeder Seite nur einmal eingesetzt werden — muss aber auf jeder Seite vorkommen.

H2: Weitere thematische Unterteilungen der Seiten bekommen H2-Überschriften.

H3-H6: Sollten die verschiedenen Abschnitte einer Seite weitere Unterpunkte enthalten, werden diese mit H3-Überschriften gekennzeichnet, noch weiter verschachtelte Unterpunkte mit den Überschriften H4 – H6.

Beispiel:

<h1>Filme</h1>

<h2>Action</h2>
<h2>Crime</h2>
<h2>Sci-Fi</h2>

<h3>Star Trek</h3>
<h3>Star Wars</h3>

<h4>Imperium</h4>
<h4>Rebellen</h4>

<h5>Raumschiffe</h5>

<h6>X-Wing</h6>
<h6>Millennium Falcon</h6>

<h5>Helden</h5>

<h6>Yoda</h6>
<h6>Luke Skywalker</h6>

HTML5-Tags

Die Pflege der Seite erfolgt zwar in den meisten Fällen durch ein CMS, in dem Texte üblicherweise mit einem Text-Editor gepflegt werden. Sollten Sie dennoch einmal in Berührung mit HTML-Code kommen, hier die wichtigsten Informationen zu HTML-Tags:

Was sind HTML Tags?

HTML-Tags werden genutzt, um dem Browser die Struktur und die Inhalte einer Seite verständlich zu machen. Die Tags umschließen dabei bestimmte Bereiche oder Inhalte und zeichnen dadurch deren Bedeutung aus.

Was gibt es dabei zu beachten?

HTML-Tags werden in eckigen Klammern geschrieben und bestehen immer aus einem öffnenden und einem schließenden Element. Schließende Elemente enthalten dabei ein „/“ vor der Auszeichnung des Tags. Im Falle einer Überschrift sieht das folgendermaßen aus:

Code: <h1>Hier steht die Überschrift</h1>
Ergebnis: Hier steht eine Überschrift*

Verschiedene HTML-Tags können auch kombiniert und geschachtelt werden. Dies wird häufig eingesetzt, um zum Beispiel bestimmte Teile einer Überschrift anders zu gestalten. Beispiel:

Code: <h1>Hier steht eine <strong>Überschrift</strong></h1>
Ergebnis: Hier steht eine Überschrift*

*Die Darstellung hängt dabei immer vom Styling der entsprechenden Tags ab.

Wichtig:

• Ein HTML-Tag muss immer geschlossen werden um Fehler in der Anzeige zu vermeiden.
• In Contao können HTML-Tags in Überschriften nur dann eingesetzt werden, wenn dies in der Konfiguration ausdrücklich erlaubt wird.

Die wichtigsten HTML-Tags für Redakteure:

Auszeichnung

<p>	Paragraph — erzeugt einen Textabsatz. Für mehrere Absätze braucht es auch mehrere <p>-Tags
<ul>	Ungeordnete Liste — erzeugt eine Liste mit Aufzählungszeichen (Punkten, Strichen, etc.)
<ol>	Geordnete Liste — erzeugt eine nach Zahlen geordnete Liste
<li>	Listenelement — innerhalb einer Liste (ul,ol) werden die Einträge mit <li> ausgezeichnet
<a>	Hyperlink — erzeugt einen Link. Benötigt immer noch den Zusatz href, der das Linkziel definiert
<blockquote>	Zitat — mit diesem Tag werden Zitate ausgezeichnet
<table>	Tabelle — dieses Tag erzeugt eine Tabelle

Formatierung

<b>, <strong>	Bold — Text der mit einem <b>-Tag umschlossen ist wird fett dargestellt
<i>	Italic — Text der mit einem <i>-Tag umschlossen ist wird kursiv dargestellt
<sup>	Hochgestellt — Mit diesem Tag können bestimmte Zeichen hochgestellt werden (z. B.: m2)
<br>	Umbruch — Mit diesem Tag wird ein Umbruch erzwungen

Wrapper

<div>	Container — Ein <div>-Tag ist ein block-level Container-Element. Es wird zum Beispiel genutzt, um Bereiche der Seite zu definieren.
<span>	Container — Auch das <span>-Tag ist ein Container-Element. Allerdings wird das <span>-Tag genutzt, um inline-Elemente (z. B. Text-Fragmente) zu gruppieren oder zu stylen.
<article>	Artikel — Mit diesem Tag werden Artikel (z. B.: News, Produktbeschreibungen, etc.) ausgezeichnet
<section>	Auf Seiten mit verschiedenen Themen können die Themen in verschiedene Sektionen getrennt werden

Besondere (HTML-)Tags:

Contao bietet neben den üblichen HTML-Tags auch eigene Tags, um bestimmte Effekte zu erzielen.

­ Konditionale Umbrüche — Browser haben noch große Probleme mit der Worttrennung. Daher werden einzelne Worte im Text nicht getrennt, es sei denn, die Trennung wird explizit mit einem HTML-Tag definiert. In diesem Fall werden Worte aber immer getrennt, was wiederum zu fehlerhaften Darstellungen in responsiven Ansichten führen kann. Die Lösung ist ein konditionaler Umbruch. Dazu muss im Contao an der gewünschten „Sollbruchstelle“ ein ­ eingefügt werden. Das Wort bricht nun an an der gewünschten „Sollbruchstelle“ um, wenn der zur Verfügung stehende Platz nicht ausreicht.

Dateinamen

Bei Dateinamen im Web gilt es eine Reihe von Regeln einzuhalten, um sicherzustellen, dass z. B. Bilder oder PDFs korrekt angezeigt werden.

• keine Groß-/Kleinschreibung
• keine Sonderzeichen
• keine Leerstellen
• Wörter werden mit „-“ getrennt (z.B.: ich-bin-ein-bild.jpg)

Wichtig: Die gleichen Regeln gelten auch für den/die Ordner in dem die Dateien liegen. Mehr Informationen zum korrekten Aufbau von Dateinamen im Bezug auf SEO finden Sie im Kapitel „Webseiten Suchmaschinenfreundlich pflegen“.