Überschriftsebenen richtig zuweisen

Wenn wir uns dieses Markup hier noch mal anschauen, dann sehen Sie vielleicht auch etwas, was irgendwie ein bisschen komisch wirkt. Wir haben ja hier in unserem Abschnitt eine h1-Überschrift, HTML 5, oberste Überschriftsebene. Und in dem Abschnitt haben wir das auch. Das ist ja noch okay, die Seite selber hat allerdings auch eine h1-Überschrift, oberste Überschriftsebene. Das ist doch ein bisschen merkwürdig, denn Abschnitte stehen ja logisch eine Ebene tiefer. Wir haben aber immer dieselbe oberste Überschriftenebene. Wenn man sich das so anschaut, ist eigentlich relativ klar, wir haben hier einen Abschnitt und das ist die oberste Überschriftsebene in dem Abschnitt und das ist die oberste Überschriftsebene auf der gesamten Seite. Aber trotzdem, verschiedene h1 mit unterschiedlichen Zwecken, das kann eigentlich nicht sein. Wie sahen den gleich noch mal diese drei Überschriftenebenen im Browser aus? Wir hatten ja das vorher uns angeschaut. Hier noch mal, okay. Das ist die h1 für die gesamte Seite, das ist die h1 für den ersten Abschnitt, das ist die h1 für den zweiten Abschnitt. Und ich denke, man sieht das hier auch relativ gut, ich kann es auch noch ein bisschen größer machen, diese h1 ist größer als die beiden h1 hier unten. Die sind gleich groß, aber die hier oben ist deutlich größer. Das sieht eher aus wie eine h2, weil kleiner als diese h1 hier. Und in der Tat, das ist auch das Verhalten, wie der Chrome es macht und auch, wie HTML 5 es vorschreibt. sections haben ihre eigene Überschriften-Hierarchie. Das heißt, innerhalb dieser section beginnt die Zählung wieder, zumindest ist es möglich, bei h1. Es gibt in der HTML 5-Spezifikation dann einen eigenen Abschnitt, indem der Algorithmus erklärt wird, nach welchem dann der Browser die tatsächlichen Überschriftsebenen berechnen kann. Und hier lautet die Berechnung ja im Wesentlichen, okay, wir haben außen, also auf der eigentlichen Seite, Überschriftsebene 1, das heißt, hier innerhalb des Abschnitts geht es erst bei Überschriftsebene 2 weiter. Wir sehen so ein bisschen die Grenze des Ganzen, wenn wir einen anderen Browser ausprobieren, vielleicht einen, der etwas älter ist. Der Internet Explorer 11 kommt mir da spontan in den Sinn. Gehen wir mal auf localhost/html5 und dann index.html. Da sehen wir die selbe Seite und Sie sehen auch, dass so was, wie beispielsweise aside, section et cetera, wird schon erkannt; sind alles Block-Elemente. Aber diese drei Überschriften sind jetzt gleich groß. Das heißt, der Internet Explorer 11 unterstützt eben noch nicht diese neu berechnete Überschriften-Hierarchie. Und das ist natürlich unschön, weil es jetzt im Internet Explorer 11 anders aussieht als in den anderen Browsern. Wenn wir uns das hier ansehen, was wir auf dieser Seite finden, dann ist es schon logisch so. Wir haben also eine Hauptüberschrift, die Seite, und wir haben eine Hauptüberschrift für den Abschnitt und eine Hauptüberschrift für diesen Abschnitt. Aber der maximalen Browserkompatibilität wegen -- und der Internet Explorer 11, für den gibt es ja noch Sicherheitspatches, das heißt, der ist auch noch im Einsatz, den Edge-Browser gibt es ja dann auch erst mit Windows 10 --, sollten wir uns vielleicht eine Alternative überlegen. Und die Alternative besteht einfach darin, zu sagen, na ja, wenn das Überschrift 1 ist und das eigentlich eine Überschrift 2 ist, dann machen wir daraus doch einfach eine Überschrift 2. Ich tippe hier 2, ändere dann das schließende Tag auch noch, speichere das Ganze, gehe wieder in den Internet Explorer, lade dort neu und jetzt sehen Sie, die Überschriften sind ein bisschen kleiner. Doch was ist jetzt mit dem Chrome und allen anderen modernen Browsern? So war das vorherige Aussehen. Ich habe noch nicht auf Neu laden geklickt. Achten Sie ganz genau auf die Größen. Auch hier nutze ich den Platz etwas besser aus, indem ich zoome, Neu laden und Sie sehen, sieht genau so aus wie vorher, keine Veränderung. Obwohl wir jetzt h2-Elemente verwenden. Das ist also ein wichtiger Aspekt. Das ist auch so ein HTML 5-Feature, was wir eben wegen Browsern nicht direkt nutzen und stattdessen wieder die richtigen und auch die gedachten Überschriftsebenen vergeben sollten. Noch dazu, bedenken Sie, dass Sie ja in aller Regel die Überschriften, die h-Tags, mit CSS stylen und Sie stylen eine h1 möglicherweise anders als eine h2. Wenn jetzt aber hier in der Überschrift h1 steht, dann wird auch der CSS-Stil für h1 verwendet, auch wenn der Algorithmus dazu führt, dass eigentlich eine h2 gestylt werden würde, aber hier steht h1. Und deswegen ist es prinzipiell eine ganz gute Idee, wenn man hier die tatsächlichen Überschriftsebenen angibt, denn dann klappt es auch mit allen Browsern.