Solution 1 :

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.

Solution 2 :

I believe that you are in a situation where you can benefit from using the BEM conventions.

In BEM you have block, elements and modifiers.

For this specific case I would do this.

<div class="custom-component">
  <div class="custom-component__header">MY COMPONENT HEADER</div>
  <div class="custom-component__content">My component content</div>
</div>

Just define the styles needed for you to make the component look the way you want to.

But what about you need a specific case where the text needs to be slightly different in the header? Let’s say, make it bigger?

<div class="custom-component">
  <div class="custom-component__header custom-component__header--big">MY COMPONENT HEADER</div>
  <div class="custom-component__content">My component content</div>
</div>

You would just need to write all the css in an appropiate way. I can recommend you to read this documentation:

http://getbem.com/

Problem :

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.

Comments

Comment posted by Frank Furter

Are the components being rendered dynamically? If so, can you pass the heading level to the component as required?

Comment posted by Jeremy Moritz

@FrankFurter The header is not rendered dynamically. But even if it were, that doesn’t address the issue. I am looking for a semantic HTML tag.

Comment posted by Frank Furter

glad you’ve found an answer – I was going to suggest the section-specific header element but I believe this was eventually deemed to be bad practice, at least where SEO is concerned (I didn’t get a chance to research it before answering)

Comment posted by Jeremy Moritz

Thank you for your efforts. But in my case, I’m wanting semantic HTML tags. I would have no trouble using CSS to make my component look any way I need it to. But this approach is not semantic HTML and, as an aside, also does not provide any SEO benefit.

By

Leave a Reply

Your email address will not be published. Required fields are marked *