Heading tags in different parent elements?
Is it ok to use heading tags in different parents? For example inside the
body tag we have two sections. In first one we have a h1 tag and in second one we have a h2 tag.
16 Replies
As long as you're using proper semantic elements (IE not having more than one
H1) and respecting what a section means there's nothing wrong with it.I would do this
h1 should "typically" be a heading for the main content
then a second heading a article/section
though you could have
or
something like this
not sure you even would need main though if you use article since it "can stand on its own"
If you needed something side by side in structure I would use aside prob
Really depends on the content though and how its related to the flow
Usually h1 illustrates the page “title” basically what
you would put in the head <title> tag . Then each section would start with h2 and go down the levels as needed. I’ll often hide the h1, with a .visually-hidden if it doesn’t make sense to be visually shown
It really does not have to match though
I would think of making a better h1 vs matching it to title before hiding it but 🤷♂️
i.e. Lots of titles will still include the website name appended or before the actual page title.
Not match but just trying to illustrate how to think about the top level some h1s can be for this kind of article page . Vs using it as the heading for one article and then an h2 for the rest of the article headings; that hierarchy suggests the article w an h1 is more important than the others .
If I had a page of articles I would still use <main> with a h1 of like "Articles"
then each article would be h2's
Sorry if it came off like I was suggesting title and h1 needs to match ; the comparison was supposed to help OP think about an h1 as what describes the page as a whole not a single article and it can be hidden if it’s not wanted visually
yea fair I don't see hiding a h1 visually as a thing I would do, not saying I wouldn't but xD
Same
Now styling it different sure h1 does not have to be bigger than a h2 visually it can be the smaller size long as it semantically purposeful
Just wanted OP to know it’s an option if they don’t want to include that h1 visually “Articles” since their question was about using the h1 as the first article title so they hadn’t included a heading like “articles” already for a reason
Yea thats why I pointed out I wouldn't probably ever have sections as children of a body
I guess I always think of headings just like indenting too though which is not really a thing you "have" to do.
Step ladder down
This comes into play when you start adding aria-labeledby too.
Which I wish SR's would just see if first child was a hgroup/heading/h2 and use the heading inside to label 🥲
Even though they don't thats still how I write it semantically lol
so like
footers a funny word
So like I'll use main header for a hero maybe with some cta's 🤷♂️ but yea this is what I aim for most the time, no hard absolutes or cares though, just an example.
but again all that is based on context which OP didn't really give. This is what I would do vs two sections #depends with content that needed to be side by side.
I cannot do that on the page
My html structure is something like this:
I just want to know if this html is valid and Accessible
I first came up with the idea of doing what you did (h1 in main tag) but then I saw that I have additional elements for styling as well (some div's and a paragraph) so I thought using section for the hero might be a good idea
Why not change the first section (hero) to a <header> of <main>
Would make more sense imo
this creates an hierarchy where the first slide is the highest hierarchy level, which doesnt make much sense
Good idea