Post

Ever struggled to get heading tags right in includes/components? headingoffset could be the answer…

Am I correct in assuming <div> <h1></h1> <h2></h2> <h3></h3> <div headingoffset=“1”> 👉🏻<h1>This will be H2 not H4</h1> <h2> H3 not H5 </h2> <h3> H4 not H6 </h3> </div> </div> To get the second you would need headingoffset=“3” Also this makes the :heading() selector make sense 😊

Side question (extremely very rare use case) but could this potentially be used for out of range headings (yes I’ve needed a <h7> in the past - thread sealing for engineers can be very specific 😅) I used aria-level=“7” though I don’t think it would actually validate anywhere Likely not but 🤞🏻

Yes headingoffset can push headings up to level 9 (clamped), so `<div headingoffset=9001><h6>I'm level 9!</h6></div>`. Why 9? Because aria-level also goes up to 9.