11

I'm currently working on some HTML5 themes for a few of my websites, and I keep running into problems with the way <h1>'s can be used multiple times. I can't seem to predict in what elements the headings will show up, but I do want to try and size them automatically based on their position in the DOM...

I was thinking about using something like

h1 { font-size: 3em; }
h2,
body > * > header h1 { font-size: 2.5em; }
h3,
body > * > header h2,
body > * > * > header h1 { font-size: 2em; }

But obviously that's far from waterproof. Having an extra element around an h1 that doesn't really mean it's deeper in the page structure will tend to pick way too small sizes. For example an unordered list with blocks that each have their own title will have something like

<section>
  <ul>
    <li>
      <header>
        <h1>Title of a block</h1>
      </header>
      content
    </li>
 </ul>
</section>

Which makes the <h1> appear much deeper than it actually is. What are good ways to handle this?

3
  • An H1 inside an H1 should still be an H1 with all associated formatting. Otherwise it should be an H2 or H3 or H4... What's the point in structure if you aren't going to follow it?
    – Lazarus
    Dec 3, 2010 at 12:55
  • 3
    They've changed the rules in HTML 5. Litso is using the correct choice of heading level for the language.
    – Quentin
    Dec 3, 2010 at 12:57
  • @Litso: so <ul>, <li> doesn't increase the page deep, but which tag count? Can you list them all? Jan 20, 2011 at 3:44

7 Answers 7

12
+100

You should style the h1s based on the type of elements they are in, not just the depth.

For example, if you have general headings, article headings and sidebar item headings, you could do this:

h1 { font-size: 3em }
h2 { font-size: 2.5em }
article h1 { font-size: 2em }
article h2 { font-size: 1.5em }
aside h1 { font-size: 2.5em }

You would use whatever selector you use to select the articles or sidebar for layout (in my example, the article and aside tags, it might be section.sidebar or something else) to differentiate between different h1 tags.

There is not much of a connection between the depth of the tag, and the size (although there seems to be a pattern; deeper is smaller). There is however a connection between the convention used for marking up your sidebar, and the size of the headings in the sidebar. The CSS selectors for the headings will match up with the selectors for the layout, which shows the connection.

1
  • Fair enough. After making 3 or 4 HTML5 wordpress themes I've started to see patterns in the usage of articles, sections and asides and I think it's safe enough to use this approach as an initial styling. Some themes will differ a little, but at least this one lays a good foundation for most variants. Here, have a bounty. Jan 26, 2011 at 10:00
6

Firstly I'm a little unsure why you would need a

section -> ul -> li -> header -> h1

Why not just

section -> header -> h1

It seems like an interesting way to set up your styles, but also confusing and possibly unnecessary. I mean HTML doesn't mean the end of class and id, why not use:

body section.class{}
body section.class header h1{}

<section class="class">
 <header>
  <h1>Title</h1>
 </header>
 <content>
  <p>Content</p>
 </content>
 <footer>
  footer
 </footer>
</section>
3
  • 1
    The example I used comes from a wordpress theme. Wordpress often uses blocks in the sidebar that are constructed of an unordered list of widgets. Each widget has a title, and because each is a section of it's own it should have a <h1> or maybe a <h2> if the sidebar itself already has a title... And yeah, I'm currently working with classed but that means that for each template I'm building I have to define all the classes, where I could instead use a general stylesheet that calculates the heading sizes. Dec 3, 2010 at 13:31
  • 3
    I'd go farther and say there's no need for a 'header' element if you're only going to put a single child inside it. 'h1' is all you need.
    – reisio
    Jan 23, 2011 at 21:12
  • I agree reisio. However, in a lot of cases (wordpress posts/pages) I want some metadata in the header as well. But yeah, the sidebars could do without :) Jan 25, 2011 at 8:16
5

It's not going to help you in any practical sense in the near future, but there is a proposal for CSS to make this sort of thing a bit cleaner, the any selector. The general rule for a second level heading would go from this:

section section h1, section article h1, section aside h1, section nav h1,
article section h1, article article h1, article aside h1, article nav h1,
aside section h1, aside article h1, aside aside h1, aside nav h1,
nav section h1, nav article h1, nav aside h1, nav nav h1, {
  font-size: 20px;
}

To this:

any(section, article, aside, nav)
any(section, article, aside, nav) h1 {
  font-size: 20px;
}
1
  • Ahh, I remember reading about that! Sounds like the best solution so far :) Jan 25, 2011 at 8:13
3

If you really can't tell where your h1 elements will appear you have a problem ...

You need to work into your stylesheets the places which affect the resolved level of the h1 in the outlining mechanism. These are the sectioning elements (article, aside, nav, and section) and the sectioning root elements (blockquote, body, details, fieldset, figure, and td)

The other elements don't affect the h1 level so they can be ignored, but might be wrappers like ul and li in your example so your css selectors should use descendent rather than child relationships.

Nevertheless, without building a stylesheet specifically for your page structure, the css rules set spirals out of control very quickly.

You want something like:

body h1 { font-size: 3em; }
body section h1 { font-size: 2.5em; }
body article h1 { font-size: 2.5em; }
body nav h1 { font-size: 2.5em; }
body aside h1 { font-size: 2.5em; }
body section section h1 { font-size: 2em; }
body section article h1 { font-size: 2em; }
body section nav h1 { font-size: 2em; }
body section aside h1 { font-size: 2em; }
body article section h1 { font-size: 2em; }
body article article h1 { font-size: 2em; }
  ...
  ...
  ...

And so on. Repeat for each sectioning root and for each of h1 to h6 and you have a massive css file.

Much easier if you know the structure of your page, at least for the sectioning and section root elements, then you can just write the rules for those combinations actually in use.

1
  • 3
    You can make the CSS slightly less complicated by comma-separating the selectors at the same level, though.
    – mercator
    Jan 22, 2011 at 19:41
2

Another thing you could do would to use an id on the <h1> tag. For example, your HTML would be:

<h1 id="page-title">My Blog</h1>

And then in your CSS, you could use:

h1#page-title { font-size:2.5em; color:#f00; [etc] }

Update: It just got mentioned to me that this may be irrelevant info, so here's my two bits: so the nested <h1> isn't styling properly? This is how I'd fix it, by making it a unique identifier rather than specifying it with each nested tag.

1
  • Though irrelevant to original question; it should be h1#page-title not h1 #page-title # before 2.5em is not a valid value.
    – Shahid
    Jan 21, 2011 at 18:04
2

HTML5 is supposed to make coding simpler and IMO you are taking the header and h1 thing way to far. They are both header tags so spamming both of them all over you page is just redundant.

A page should only have 1 <h1> tag, to show what the entire page is about, each section does not need an h1 tag like I said above

Regardless the easiest way would be to use classes and IDs, just like in the past.

<section class="widget">
  <ul>
    <li>
      <header>
        <h1>Title of a block</h1>
      </header>
      content
    </li>
 </ul>
</section>

Then you can remove all the extra selectors and they can be more generic.

section.widget h1 { }
section.something h1 { }
5
  • 5
    It has never been true that a page should only have one H1 tag, and with the new rules in HTML5 even less so. Anyway, I think you (and the others) are right about the classes/ID's. I hoped to be able to do it more dynamically (see robertc's answer) but that's just not going to happen yet. Jan 25, 2011 at 8:15
  • "It has never been true that a page should only have one H1 tag" -- really? Where are you getting this from? Jan 25, 2011 at 16:37
  • 2
    If you read the HTML spec, you'll see that the headers H1 ... H6 essentially only describe their relative importance in sectioning the content. There's nothing in the spec that requires you to have only one H1. For search engine optmization and marketing purposes it's useful to have only one H1, but Google et. al. can certainly successfully spider pages with multiple H1s with no problem. Jan 25, 2011 at 19:17
  • In fact in new HTML5 it is explicitly allowed to have multiple h1s... They tried to make h1 into a 'relative heading' element, which would become smaller as you go deeper into the document tree. So h1 at the body level would be largest, h1 within article would be smaller and h1 within a section within a article would be smallest still. However, both W3C and WhatWG have now come to the conclusion that their efforts failed and basically the outlining algorithm is dead in the water. So it's back to h1 ... h6. Aug 24, 2019 at 17:38
  • The more important rule is: 'don't skip heading levels'. So if you have <h1>My book</h1><h2>Chapter 1</h2> don't skip h3 and suddenly go to h4. But you can use multiple h1s just fine. In fact, if you want to do this right, look into the definition of the main element... It defines the pages 'main' content and it may appear only once. So place your 'main' h1 inside main and you are free to use h1 again within aside, article etc. Aug 24, 2019 at 17:44
2

Firstly, according to the proper usage nested h1's should be treated exactly according to their significance of nesting (including article, aside, nav, section but not any other elements). This is correct behavior. An h1 nested inside a section element should be the same visually as an h2, and an h1 nested inside two section elements should be visually the same as an h3... Basically, in short, there's an alternative markup floating around that pretty much no-one uses but is really more semantically consistent which is to only use h1 ever, and allow the level of heading to be determined by the document outline.

authors are strongly encouraged to either use only h1 elements, or to use elements of the appropriate rank for the section's nesting level. per Section 4.3.11 of WHATWG

So, I believe you're on the right track with wanting this and I think the chosen correct answer is giving you subjective stylistic advice rather than attempting to answer your question, which is a valid one.

As far as implementation:

For webkit browsers (chrome and safari) and firefox you can use the "-moz-any" and "-webkit-any" css pseudoselectors. This is, in fact, how the default stylesheets in firefox and chrome style these elements perfectly according to the standards already:

For example, at level 3 headings in the firefox default css:

h3, *:-moz-any(article, aside, nav, section) *:-moz-any(article, aside, nav, section) h1 {
    display: block;
    font-size: 1.17em;
    font-weight: bold;
    margin: 1em 0;
}

This greatly simplifies the answer @Alohci rightly suggested.

The problem is, of course, it wont work in IE. One option is to use a CSS pre-processor, such as SASS. I have written the following snippet in SASS which I use to do my header markup and which I use to effectively normalize across browsers the presentation of nested h1 elements. (If you don't want to actively use a CSS pre-processor you can use one a single time to generate your initial template for these values and then modify the values as needed over time -- it will at least save you tons of typing and eliminate potential errors in the process):

@function bb_permute_lists($left_list, $right_list) {
    $permuted_list: ();

    @each $left_item in $left_list {
        @each $right_item in $right_list {
            $permuted_list: append($permuted_list, $left_item $right_item, comma);
        }
    }

    @return $permuted_list;
}

@function bb_html5_header_markup($level) {
  @if (1 == $level) {
    @return h1;
  }

  $header_containers: article, aside, nav, section;
  $header_markup: $header_containers;
  @for $i from 2 to $level {
    $header_markup: bb_permute_lists($header_containers, $header_markup);
  }
  $header_markup: bb_permute_lists($header_markup, h1);

  @return append(h#{$level}, $header_markup, comma);
}

This function can be used as follows:

#{bb_html5_header_markup(1)} { 
  font-size: 2em;
    margin: .67em 0;
}

#{bb_html5_header_markup(2)} { 
    font-size: 1.5em;
    margin: .83em 0;
}

Best of luck in trying to implement this alernative standard. There's plenty of documentation out there about this alternative and more-semantic usage of h1, but based on the fact that I could not find anyone else with a code snippet to help me along in implementing it, I think it's rather rarely used (perhaps because people are working with a lot of mixed content, whereas I am starting from scratch).

2

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.