Target logical heading level with CSS?

In the following HTML,

<body>
  <h1>heading 1</h1>
  <section>
    <h1>heading 2</h1>
    <aside>
      <h2>heading 3</h2>
    </aside>
  </section>
</body>

<body>
  <h1>heading 1</h1>
  <section>
    <h1>heading 2</h1>
    <aside>
      <h2>heading 3</h2>
    </aside>
  </section>
</body>

…heading 1 has a "resolved" heading depth of 1, and heading 3 of 4. However, the latter is not styled using the h4 selector, and still responds to the h1 selector. Is there a way to target headings by their logical level rather than their tag name?

7 Replies

clevermissfox•5mo ago

You should only have one h1 on a page . so heading2 and heading 3 can both be h2s but styled differently if you need heading2 to match the font-size of an h1

jcayzacOP•5mo ago

@clevermissfox not according to the html living standard, no. The examples in the standard frequently have multiple h1s…

jcayzacOP•5mo ago

Hmm this is useful: https://adrianroselli.com/2016/08/there-is-no-document-outline-algorithm.html 👀

Adrian Roselli

There Is No Document Outline Algorithm

I figured I would state the entire argument in the title. After all, as of this writing and the last seven-plus years, the statement is accurate as far as the browsers are concerned. I am penning this as sort of a follow-up to my post from 2013, The Truth about…

jcayzacOP•5mo ago

I can't believe xhtml2 had this and html5 doesn't: https://www.w3.org/TR/xhtml2/mod-structural.html#sec_8.5.

clevermissfox•5mo ago

While the HTML living standard may show examples with multiple <h1> tags, these are theoretical examples that don't reflect real-world best practices for accessibility and SEO. Screen readers and other assistive technologies rely on a clear heading hierarchy to navigate content. Multiple <h1> tags can confuse this hierarchy and make navigation difficult for assistive technology users. Using anything as a tag is valid HTML but your SEO and screen reader users will suffer. But people put out improper and confusing code every day so whatever you want to do. Your post title was “target LOGICAL heading level in CSS” so just sharing information. What you choose to do with that information is your prerogative.

jcayzacOP•5mo ago

Thanks @clevermissfox, it's a really big mess and I was misinformed —still remembering the official whatwg recommendation of only using h1 everywhere on the page and rely on the outline algorithm. I'm caught up now.

Dean Leigh•5mo ago

100% real world use only one H1 per page for all the reasons mentioned already. There is a lot wrong with HTML that has never been addressed due to legacy sites and browser differences.

Gaming

Programming

Target logical heading level with CSS?