GeneratePress Überschriften

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.

• Diese Antwort wurde geändert vor 1 Jahr, 4 Monaten von Bego Mario Garde. Grund: Nachtrag

die allerdings so lang war, dass ich Schwierigkeiten hatte, das für mich Relevante herauszufiltern.

Oh, schade.

Kurzfassung: ob du einen Absatz-Block verwendest oder den Headline-Block mit „p“, unterscheidet sich im erzeugten HTML-Code nur dadurch, dass der Headline-Block eine weitere CSS-Klasse zugewiesen bekommt.

Diese CSS-Klasse kannst du nutzen. Oder – wie in deinem Fall – auch nicht. Dann ergibt sich kein Unterschied.

Und nochwas: HTML-Tags sind eigentlich nicht zur Formatierung gedacht, sondern zur Strukturierung eines HTML-Dokuments.

Hallo,

Wo muss ich Probleme beim verbinden einer Domain mit der neu erstellten Seite posten?

Da wir nicht wissen, welcher Art die Probleme sind, können wir die Frage wohl kaum beantworten. Das müsstest du noch näher erläutern.
Wenn es um ein WordPress-spezifisches Problem geht, dann bist du hier zwar richtig, solltest aber ein neues Thema beginnen.

Viele Grüße
Hans-Gerd

• Diese Antwort wurde geändert vor 1 Jahr, 3 Monaten von Hans-Gerd Gerhards.

Kannst du das Thema dann bitte als gelöst markieren, wenn das Problem damit für dich behoben ist:

Die Option findest du rechts in der Sidebar. Danke.

Hallo,
ich hatte allerdings schon auf eine Lösungsmöglichkeit in meiner Antwort hingewiesen.
Zunächst solltest du diese Fehler korrigieren. Danach wird dann deutlich, ob das Performance-Problem damit zusammenhängt.

In der developer console (Aufruf mit F12) findest du nach Durchführung von Lighthouse weitere Hinweise, welche Dinge du optimieren solltest.

Viele Grüße
Hans-Gerd