[tyingq]

Because you can manipulate attributes without destroying and recreating elements. Changing <h level=1> to <h level=2> is a much simpler and different thing to changing <h1> to <h2>.

An alternative approach to 100% trusting the browser to calculate the level. You can calculate and adjust as needed.

[esrauch]

Can you explain in what ways it is simpler to change 1 to 2 in the first case? Is it that you are mutating them via script and it seems more "normal" to mutate a property of a tag instead of the tagname?

Or is it because it might have a named closing tag and you have to update both?

[tyingq]

You can't change a tag name with a script. You have to destroy it and create a new one, being sure to copy attributes and the inner html, then, inserting the new one in the right spot. That's not only more work at a script level, I assume it's much more disruptive at a browser internals perspective regarding reflow, etc.

Using an attribute would also allow you to programmatically get the nested level from the dom if the browser had "levelled" the <h> tags on it's own. Lacking that, I don't think you could tell what the browser ended up doing.

Edit: It basically comes down to whether you're okay with the browser auto calculating the level of <h>, and then not having any programmatic access to what it decided. If you don't care, then <h> without an attribute works fine.

[walterstucco]

then add data-level=N to H1…