I have a component that needs header text like this
<div class="custom-component">
<h?>MY COMPONENT HEADER</h?>
<p>My component content</p>
</div>
What element should i use here (in place of <h?>)?
If I use <h3> or <h4> or whatever, i risk breaking the header tree because this component may be used anywhere on the page and could be below an <h1>, <h2>, <h3> or something else. (Note: The HTML spec requires that an <h3> not follow an <h1> unless there is an <h2> in between)
Is there any generic way to define a header element that appropriately defines its content as a header without needing to know beforehand where on the page it will appear in relationship to the other <h#> elements?
To clarify, I'm not needing any CSS advice. I want a semantic HTML header tag that indicates itself as a header (for my component) that doesn't require any foreknowledge of other <h#>'s within the document -- i.e. it should be flexible to be used in a variety of places or pages.
I found the answer to my question!
The answer is: there is currently no solution using plain HTML. :(
Interestingly, Tim Berners-Lee (founder of the world wide web) actually proposed a generic <h> tag as early as 1991! But it was never adopted formally or used by any major browsers yet.
If you're using React or Vue, here is a decent solution that will probably work in most cases.