HTML5 Grundkurs

Überschriftenebenen verwenden

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Überschriftenebenen innerhalb eines HTML5-Abschnitts haben teilweise eine andere Position in der globalen Rangordnung, als das noch unter älteren HTML-Versionen der Fall war. Insofern ist hinsichtlich der Kompatibilität mit älteren Browsern Vorsicht geboten.
04:30

Transkript

Erweitern wir nun noch ein bisschen dieses Dokument, das wir ja sukzessive zusammenstellen. Wir haben einen Abschnitt und dieser Abschnitt hätte ein Header-Bereich. In dem Header-Bereich gibt es eine Hauptüberschrift. Jetzt ist es aber so, dass auch das komplette Dokument so ein Header-Bereich hat, und in diesem Header-Bereich gibt es möglicherweise auch eine Hauptüberschrift ''Meine Seite''. Ich habe also hier Headerbereich ''h1'', also oberste Überschriftenebene, ''Meine Seite'', und da habe ich innerhalb der Seite selber noch einen Abschnitt, dieser hat wiederum einen Header-Bereich, und dieser hat wiederum oberste Überschriftenebene ''h1''. In dem Fall "Mein Abschnitt". Schauen wir uns das mal an, beispielweise in dem Internet Explorer. Geben die Datei wieder an ''semantik.html'', ich kopiere es gleich in Zwischenablage. Und jetzt sehen sie das, was wir eigentlich erwartet hätten. ''Meine Seite'', ''h1'' also Überschrift ganz groß. ''Mein Abschnitt'', auch ''h1'', Überschrift ganz groß. Keine Überraschung, die Frage ist also: "Sollte ich wirklich zweimal ''h1'' haben auf der Seite?". Kann man so oder so sehen. Schauen wir uns das mal woanders an, zum Beispiel im Google Chrome, da haben wir die Seite hier noch offen. Ich lade neu. Und das ist jetzt ganz interessant, denn meine Seite erscheint wieder als ''h1'' sehr sehr groß, mein Abschnitt allerdings ist kleiner. Sieht man hier - denke ich - relativ gut. Die Höhe entspricht hier bei ''Mein Abschitt'' so ungefähr meinem Mauszeiger, und ''Meine Seite''... da ist es schon ein bisschen mehr. Und das ist tatsächlich gewollt so, der Chrome macht das sozusagen richtig, der Internet Explorer macht das sozusagen nicht richtig. Möglicherweise auch aus Gründen der Abwärtskompatibilität, und zwar ist es so, dass jeder Abschnitt für sich Überschriftslevel enthält. Das heißt, innerhalb dieses Abschnittes ist - dies ist 'Mein Abschnitt' - auf der obersten Überschriftenebene. Jetzt steckt aber dieser Abschnitt in einer Seite, die selber schon die oberste Überschriftsebene gesetzt hat. Das heißt also, da wir hier schon bei Überschriftsebene 1 sind, dieser Abschnitt aber innerhalb der Seite ist, kann das da unten nur noch Überschriftsebene 2 sein. Zumindest in der Anzeige. Ganz ganz wichtiger Punkt. Das heißt, jeder Abschnitt fängt sozusagen für sich selbst zu zählen an. Der Algorithmus, also die Rechenvorschrift, wie die jeweiligen Überschriftsebenen, und zwar die tatsächlichen Überschriftsebenen, berechnet werden, der ist sogar in der Spezifikation ganz gut und eigentlich auch sehr gut verständlich hinterlegt. Das heißt, man kann das sehr gut nachvollziehen, was ein Browser macht. Wir merken uns aber was anderes. Und zwar wir merken uns, dass wir tatsächlich in jedem Abschnitt wieder bei 1 anfangen könnten zu zählen, und ein hinreichend moderner Browser, der das auch so unterstützt, kümmert sich um den Rest. Wir merken uns aber gleichermaßen, dass wir möglichst viele Browser unterstützen möchten, deswegen machen wir das mit Überschriftsebenen genau so, wie wir das auch mit HTML4 gemacht haben und mit XHTML gemacht haben. Wir kümmern uns selber um diese Überschriftsebenen, das heißt, wenn das die oberste Überschrift ist, dann ist das eine Ebene tiefer sozusagen. Das heißt, wir machen daraus ein ''h2'', schauen uns das nochmal an. Im Chrome beispielweise... sieht weiterhin sieht gut aus, genauso wie vorher. Groß und etwas kleiner, und wenn wir jetzt in den Internet Explorer gehen und die URL aufrufen, dann sieht es auch hier so aus, wie wir das eigentlich gern hätten: Hier also oberste Überschriftsebene, und hier etwas kleinere Überschriftsebene. Nutzen wir dann also nicht dieses tolle eingebaute Feature des Algorithmus zur Ermittlung der Überschriftsebene, aber dafür sieht unsere Anwendung selbst im älteren Browser noch quasi so aus, wie wir wollen. Und deswegen lautet eben meine Empfehlung, dass sie bei den Überschriftsebenen immer ganz klassisch selber alles vergeben, von ''h1'' bis ''h6''. Dazu natürlich sorgen sich sie eh durch CSS dafür, dass die Formatierung dann entsprechend im Layout funktioniert, gegebenfalls unterstützt durch CSS Klassen. Aber wie gesagt, die Überschriftsebenen, vergeben sie die selber. Bauen sie aber nicht darauf, dass sie bei der 'Section' sozusagen wieder von 1, oder von vorne anfangen können.

HTML5 Grundkurs

Machen Sie sich mit HTML5 fit für das Webdesign von morgen, angefangen vom Erstellen einfacher HTML-Dokumente bis hin zur Gestaltung anspruchsvoller Layouts.

3 Std. 11 min (29 Videos)
Derzeit sind keine Feedbacks vorhanden...

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!