Darstellung einer Überschrift

[Rolf B]

Hallo Hierarch,

„Vererben“ von h1 auf h2 geht nicht, richtig, aber du kannst jederzeit Selektorlisten für mehr als eine Überschrift verwenden. Entweder nackig, mit :is() oder mit :where()

:heading() ist Selectors Level 5 und bisher nur im Firefox Nightly verfügbar.

Unterschied 1 zwischen :heading(2,3) und h2,h3 ist, dass :heading eine Klasse ist und darum höhere Spezifität hat als die Typselektorliste h2,h3.

Unterschied 2 wird sein, dass :heading() das headingoffset Attribut unterstützt. Mit Typselektoren geht das nicht.

headingoffset? Wird bald in Chrome und Firefox ankommen, aber hinter dem Experimental-Flag versteckt. MDN hat dazu noch keine Artikel.

Was das soll?

<section headingoffset="1">
   <!-- #include file="tutorials.inc" -->
</section>
<h2>Referenz</h2>

tutorials.inc wird als Server Side Include eingebunden und kann ein <h1>Tutorials</h1> enthalten. Wird tutorials.inc direkt aufgerufen (naja, fast direkt, es braucht schon ein Rahmen-HTML), ist das h1 auf Level 1. Wird es wie gezeigt inkludiert, ist das h1 durch den headingoffset auf Level 2.

Wer kein SSI auf seinem Server hat, nimmt <?php include "tutorials.html"; ?> oder schreibt ein JavaScript, das den Tutorials-Teil per fetch nachlädt.

Aktueller Stand ohne headingoffset ist, dass man per PHP oder JavaScript die Heading-Elementtypen je nach Kontext zurechtpatchen muss. Oder man verwendet Markdown und gibt dem Markdown-to-HTML Compiler mit, welchen Headingstufe er für # generieren soll. Hier im Forum ist # = h3.

Rolf