Hast du schon mal den Begriff „Semantisches HTML“ gehört?
Bevor Cascading Style Sheets eingeführt wurden, haben Web-Entwickler keine andere Chance gehabt, Inhalte auf einem Bildschirm gezielt zu platzieren, als eine HTML-Tabelle (<table>) zu nutzen. Dafür war das Tag aber eigentlich nicht gemacht und z.B. für den Nutzer eines Screenreaders ist eine unerwartet auftauchende HTML-Tabelle, in der dann auch noch Bilder ohne alt-Texte platziert wurden wenig hilfreich. Da inzwischen mit CSS selbst gewagte Layouts möglich sind, hat man sich daran zurückerinnert, HTML-Tags so einzusetzen, wie sie auch gedacht waren. Das HTML-Tag soll eine Bedeutung haben und nicht willkürlich eingesetzt werden. (Und Semantik ist dann eine Bedeutunglehre – so bekommt der Begriff Semantisches HTML einen Sinn: „HTML dient als Auszeichnungssprache dazu, einen Text semantisch zu strukturieren, nicht aber zu formatieren.“ – Quelle: Wikipedia)
Überschriften sollen in semantsichem HTML nicht Text hervorheben und größer ausgeben, sondern das ganze Dokument strukturieren. Eine so gegliederte Webseite lässt sich von Suchmaschinen besser „verstehen“ und erleichert auch Nutzern von Screenreadern den Zugang zu Webseiten, weil der Abschnitt mit interessanten Überschriften leichter anzusteuern ist.
Damit eine Maschinenlesbarkeit gewährleistet ist, sollen Überschriften hierarchisch ineinander verschachtelt werden:
<h1>Webseiten-Titel</h1>
<h2>Kapitelüberschrift</h2>
<h3>Zwischenüberschrift des Kapitels<h3>
<h4>Eingeschobener Abschnitt des Kapitels</h4>
…Laien neigen dazu, Überschriften als Formatierungselement zu nutzen und die Hierarchien der Überschriften poltern wahllos durcheinander:
<h1>Webseiten-Titel</h1><h3>Urlaub ist toll. Wisst ihr, wo ich dieses Jahr war?</h3> <h1>In Spanien!!1!</h1> <h2>Olé</h2>
Das sieht dann lustig aus, ist aber für Suchmaschinen unbrauchbar und dürfte jemand mir Screenreader eher in eine Sinnkrise stürzen. Deshalb erscheinen dann Hinweise auf Fehler in der Reihenfolge!
Und wofür ist nun der H(eadline)-Block mit <p>– und <div>– Tag gut? Da der Block-Editor ein visuelles Tool zur Erstellung von pfiffigen Layouts ist, kommt der eine oder andere Anwender doch wieder auf die Idee, einen Headline-Block alleine für die Gestaltung zu verwenden. Schließlich kennt nicht jeder den Begriff Semantisches HTML.
Im Customizer kann ich über „Zusätzliches CSS“ dem Tag <p> mit der CSS-Klasse gb-headline Headline-Block eine Schrift und Formatierung zuweisen – fett, rot, Comic Sans, … wie du möchtest. Komme ich nun auf die Idee, den Satz „Urlaub ist toll. Wisst ihr, wo ich dieses Jahr war?“ in dieser Formatierung auszugeben, reicht es, den Headline-Block „p“ dafür zu verwenden.
Da durch die Verwendung des <p>-Tag die Hierarchie der Webseite nicht durcheinander gewirbelt wird, entspricht das Lyout den Anforderungen für SEO und Barrierefreiheit.
Das <div>-Tag ist (wie das <p>-Tag) ein Blockelement, dass mit Innen- und Außenständen formatiert wird. Durch die Verwendung von zwei (ähnlichen) HTML-Tags ergeben sich aber mehr Gestaltungsmöglichkeiten.
Also:
- H1-H6 nur für Überschriften verwenden, mit denen das Dokument gegliedert wird.
- Bei Verwendung von Überschriften muss die Hierarchien eingehalten werden. (z.B. kann nach
<h2>nicht plötzlich<h4>kommen). - P und DIV im Headline-Block können für eine Formatierung verwendet werden, obwohl das so eigentlich nicht vorgesehen ist.
Die Profis bitte ich um Verzeihung, dass ich das Thema etwas laienhaft beschrieben und sicherlich hier und da verkürzt habe. Die Antwort ist ohnehin schon zu lang. 😉
Nachtrag: interessanterweise werden die mit dem Plugin Generate Blocks erzeugten Headline-Blöcke gar nicht in der Strukturübersicht angezeigt. Wenn du also (semantisch korrekt) mit dem Headline-Block des Plugins eine H2-Überschrift einfügst, gefolgt von einer H3-Überschrift mit dem Standard-Blöcken, wird dir ebenfalls eine falsche Gliederung angezeigt.
