Streaming live at 10am (PST)

How to correctly use headings for semantic structure and accessibility?

I am looking for clarity on the use of headings.

I am using one h1 per page.

This is my question. What is the rule for the use of headings on a page with so much content that you run through six levels of headings in the first section?

I have been using h2 through h6 to order the headings from top left to bottom right within sections. But this strategy runs out of headings as well. I am considering swapping out some headings for text blocks to avoid running out of headings within a section.

As an example… I have a section that has columns. There are six columns per row and three rows of these columns. Each has a heading. I begin with say and h3 and go on down to h6 but this leaves several of the lower headings in the section as h6. When I do this I get an error in the audits panel.

Looking for a better, right way of ordering content.

Thanks!


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

hi @bcombs1 here are some links that hopefully will make it more clear for you.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements

https://webaim.org/techniques/semanticstructure/

but there is much more :wink:

you can also look what is difference between article and section

1 Like

I see. Within a section, I can begin with an H2 and use H3s for all of the headings for a series of columns. So long as I don’t have a second heading within a column there is no need for an H4.

hi @bcombs1 look on this problem form side of visitor, in 96% they do not know what HTML heading tags are and they only scan website. So visitors understand visual feedback (size, color, contarst) so theoretically you don’t need any headings tags and you can use only text elements with different size and for visitors will not change anything from visual feedback point .

HTML Tags (any) are only for search engines to understand site structure. This mean that if you use h1 and make it 16px or 10px high nothing change for search engines as they still will understand that h1 is more important than h2 as they do not care about font sizing.

So in summary you actually in 90% cases do not need in more than h1 - h3 to get search engines understand your text structure and rest can be done just with bold text that visitors will have visual feedback.

If you do not have any further questions to this topic feel free to close it.