Correct HTML5 outline for site

Question

Well, I've got a site and brand new HTML5 tags to make semantic web pages. However, all the info is messed up in my head.

My site has:

a header with banner and navigation;
contents block (some promo-text separated by small headers) with tabs and tab headers (could be more than one tab header in a single tab)
footer

Well, I see, the main navigation should be in the <nav> block, header — in the <header>, footer — in the <footer>.

What should be a tab? Is it a <section>? Or one tab has as much <section>s as tab headers? Which tag should be used for the tabs selection panel? Is it just a <div> or another <nav>?

The next headache is headers. Well, I suppose the site header (which is in the <header> tag with banner) should be <h1>. But what to do with sections? If I have one section per tab, there will be more than one equal level headers and it would be incorrect to make them <h1>s, so they'll become <h2>s. But is it correct for section not to have a <h1> header?

The next thing — the ARIA roles. Should I write roles for page header, content and footer (banner, contentinfo, main), navigation?

Read [the-importance-of-sections](http://coding.smashingmagazine.com/2013/01/18/the-importance-of-sections/)... that can answer your question — Black Sheep, Oct 06 '13 at 03:01
Mark up content, not presentation. Tabs are a method of presentation. — Alohci, Oct 06 '13 at 19:57
@Alohci However, tabs can be marked with `role="tab"`, but I don't know at this time is ARIA important for search engines or they are just for screen readers (wat?). — efpies, Oct 06 '13 at 20:32
I'm not a SEO expert, but I think in general search engines try to score the contents of page to match what a sighted user sees when they first visit it. It seems unlikely that aria attributes would have much effect on them. But personally, I'd rather build a page to help human beings than bots, so I whole-heartedly encourage you to use aria attributes appropriately. Note that many elements have [default implicit ARIA semantics](http://www.w3.org/html/wg/drafts/html/master/dom.html#sec-strong-native-semantics) — Alohci, Oct 06 '13 at 20:49

score 1 · Answer 1 · answered Oct 06 '13 at 12:52

The HTML5 semantic tags don't do anything different than Div tags. They just look more semantic. So can hold all stuff in header section as you say like nav and logo. so would be

<header>
<nav>
    <ul>
        <li>Link 1</li>
        <li>Link 2</li>
        <li>Link 3</li>
        <li>Link 4</li>
    </ul>
</nav>
</header>

As for sections its your choice i usually use a section for a section of my site and if i break this down to sub sections i would use tags or for a side bar.

You still need to format these with CSS like you would a DIv but is easier to follow.

Hope this makes sense

score 1 · Answer 2 · edited May 23 '17 at 12:30

What should be a tab? Is it a <section>? Or one tab has as much <section>s as tab headers?

It doesn’t matter how you display your content (e.g. tabbed); it depends on your actual content.

Think of having your page content in a word processor file, without any layout. Now you need to structure it, so that you get a nice outline or TOC at the beginning of the document. This structure/outline gets represented with headings (h1-h6) and sectioning elements (section, article, nav, aside) in HTML5 (and headings only in HTML 4.01).

Everything that has a heading (h1-h6) + corresponding content can be enclosed in a section (resp. in a more specific article/aside/nav, if it matches their definition). See my answer to a related question.

Which tag should be used for the tabs selection panel? Is it just a <div> or another <nav>?

You can use nav if it represents the navigation for that tab section, and if it’s included in that section. An intuitive example would be a table of contents in an article (e.g. a Wikipedia article). The site-wide navigation is a nav as a child of body. The article-wide navigation (= the TOC) is a nav as a child of article.

If I have one section per tab, there will be more than one equal level headers and it would be incorrect to make them <h1>s, so they'll become <h2>s. But is it correct for section not to have a <h1> header?

It wouldn’t be incorrect to use h1.

All sectioning elements (section, article, nav, aside) as well as sectioning roots (e.g. body) "have" a heading (if you don’t provide one explicitly, it will be untitled). The highest-rank heading is used. So you can use h1 in every section, or you can adjust the heading level so that it corresponds the calculated outline (unless you need more than 6 levels).

Should I write roles for page header, content and footer (banner, contentinfo, main), navigation?

Some HTML5 elements come mapped with default WAI-ARIA roles. For user-agents that support WAI-ARIA but don’t support HTML5, or for user-agents that don’t have implemented the latest role mappings yet, you may want to add these already mapped roles explicitly.

Correct HTML5 outline for site

2 Answers2