4

Usually when I code HTML5 documents I use the following syntax: 

<header class="site-header">
    <hgroup class="site-brand">
        <h1 class="brand-name">
            Brand Name
        </h1>
        <h2 class="brans-slogan">
            Awesome Slogan
        </h2>
    </hgroup>
</header>
<article>
    <header class="article-header">
        <h1 class="article-title">Article Header</h1>
    </header>
    [... content ...]
</article>

It seemed to be header the right tag for site header, but after reading the spec and outlining this code, I saw two drawbacks

  • header tag make its content first level, and article title 2nd
  • Site headers might not contain headings at all, since its purpose is to tell the user who the page belongs to.

What would be the best approach?

César
  • 1,608
  • 1
  • 18
  • 23

2 Answers2

1

Your first problem is that you have two h1 tags. This is NOT proper semantic mark-up. You are correct about the header tag and it would be preferable to put you high level h tags in that area.

That being said, your original question is a design and content architecture problem. If you are going to use an h1 in your article body then you should choose a different tag to use in the header of you page.

The spec says,"The header element typically contains the headings for a section (an h1-h6 element or hgroup element), along with content such as introductory material or navigational aids for the section."

It does not have to, though. The h1 tag (and title tag) are your main semantic indicies for a page. You do NOT want 2 h1 tags or header tags, but these two tags do not have to go together ... but its nice if you can architecture it that way.

cliffbarnes
  • 1,396
  • 11
  • 21
  • 2
    Semantically, it's totally fine to use several (or only!) `h1` in a HTML5 page with sectioning elements. – unor Feb 01 '13 at 16:31
  • Can you reference that assertion? Because I can show where any kind of document reader for the blind (a device that depends on semantic mark up) will throw errors with more than one h1 in a single page. You may have multiple h tags, but not h1. Even then, the h2-6 must be correctly arranged. – cliffbarnes Feb 01 '13 at 16:38
  • I agree with unor: I have never seen any documentation that h1's should only be used once per page. I think it is more logical that you give us some reference on this point. – Bram Vanroy Feb 01 '13 at 16:49
  • 1
    As I said, *semantically*. The HTML5 spec [says](http://www.w3.org/TR/html5/sections.html#headings-and-sections): "Sections may contain headings of any rank, but authors are strongly encouraged to either use only `h1` elements, or to use elements of the appropriate rank for the section's nesting level." Accessibility is another concern. HTML5-capable screenreaders shouldn't have a problem with `h1`-only. Older screenreaders would need the `h2`-`h6` too, because they don't know/understand the HTML5 outlining. Note: a certain version of JAWS could only work with `h1`-only for HTML5 docs (bug). – unor Feb 01 '13 at 16:49
  • LOL...that was definitely a trick question...there is no SEMANTIC STANDARD yet agreed upon by the WHATWG...all you've done is quote the current (and changing) html5 spec. WebAIM, one of the main companies involved in assistive tech says this "Pages should be structured in a hierarchical manner, with 1st degree headings (

    ) being the most important (usually page titles or heading)". How many page titles should your single html page have? Becuz u CAN do something, based off the evolving standard, doesn't mean you should and doesn't mean it is SEMANTICALLY STRUCTURED. http://bit.ly/cssdCC

     – cliffbarnes Feb 01 '13 at 18:36
  • @cliffbarnes I concur with unor and Bram. The hierarchy of headings (h1 - h6) should reset with each applicable section. Think of how you'd write an essay using a word processing software. It's asinine and structurally debilitating to expect the said hierarchy to permeate the document irrespective of sectioning. The same logic applies to HTML. If accessibility readers are failing to interpret the resetting of the headings on a per-section basis, it should be abundantly obvious that the reader is discrepant or outmoded. – Clarus Dignus Feb 24 '15 at 22:57
0

Your usage of header in this example is okay.

However, it's not really needed here. If you only include h1-h6 and hgroup, you don't need to specify that it's a header, because it is already clear by definition. header is useful if you want to include additional content for which it's not necessarily clear that it should belong to the header vs. the main content.

But there is no harm in using header for headings only, so go on with it if you like it, need it for CSS/JS hooks, might include additional header content in the future, etc.

header tag make its content first level, and article title 2nd

I don't understand what you mean by that. The header element doesn't influence the document outline. It's a way to differentiate between introductory content and main content.

Site headers might not contain headings at all, since its purpose is to tell the user who the page belongs to.

The header element doesn't have to contain a heading. E.g. this example would be fine:

<article>
  <header>I visited Berlin last week and in this post I document what I liked about it.</header>
  <p>…</p>
</article>

The footer element is similar, and for some content both elements could be suitable.

If you'd want to attribute the article author, it would go into a footer.

unor
  • 92,415
  • 26
  • 211
  • 360