Search code examples
htmltagscomponentselement

What element for a component's header text

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.

Solution

  • 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.