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.

then add data-level=N to H1…