4
\$\begingroup\$

I would like to know if my chosen layout is HTML5 standards compliant, or if I'm using the heading tags incorrectly (or any other tag for that matter)?

Main Header

  • <h1> for website name
  • <h2> for webpage name
  • <h3> for website slogan, or should this be <span> with styling?

Main Content/Sidebar Content

  • <h2> for every first heading in each <section> element (because a level 1 heading is too large), or should this really be <h1> with specific styling; e.g. .panel-ws section h1?
  • .first removes unwanted top margin.
  • .panel-ws adds whitespace (padding).

Example Code Extracts (OLD; Updated Below!)

<header id="page-header" role="banner">
    <div id="logo"></div>
    <div id="header-text">
        <h1>Website Name</h1>
        <h2>Page Title</h2>
        <h3>Slogan</h3>
    </div>
</header>

<main id="content" role="main">
    <div class="panel-ws">
        <section id="name1">
            <h2 class="first">Content 1</h2>
            <p>Lorem ipsum...</p>
            <p>Lorem ipsum...</p>
        </section>
        <section id="name2">
            <h2>Content 2</h2>
            <p>Lorem ipsum...</p>
            <p>Lorem ipsum...</p>
        </section>
        <section id="name3">
            <h2>Content 3</h2>
            <p>Lorem ipsum...</p>
            <p>Lorem ipsum...</p>
        </section>
    </div>
</main>

<aside id="sidebar" role="complementary">
    <div class="panel-ws">
        <section id="sidename1">
            <h2 class="first">Side content 1</h2>
            <p>Lorem ipsum...</p>
            <p>Lorem ipsum...</p>
        </section>
        <section id="sidename2">
            <h2>Side content 2</h2>
            <p>Lorem ipsum...</p>
            <p>Lorem ipsum...</p>
        </section>
    </div>
</aside>

#header-text h1
#header-text h2
#header-text h3
.panel-ws section h2
.first

Example Code Extracts (UPDATED!)

<header id="page-header" role="banner">
    <div id="logo"></div>
    <div id="header-text">
        <h1>Website Name</h1>
        <p>Slogan</p>
    </div>
</header>

<main id="content" role="main">
    <div class="panel-ws">
        <header id="page-title-container">
            <h1 id="page-title">Page Title</h1>
        </header>
        <section id="name1">
            <h1>Content 1</h1>
            <p>Lorem ipsum...</p>
            <p>Lorem ipsum...</p>
        </section>
        <section id="name2">
            <h1>Content 2</h1>
            <p>Lorem ipsum...</p>
            <p>Lorem ipsum...</p>
        </section>
        <section id="name3">
            <h1>Content 3</h1>
            <p>Lorem ipsum...</p>
            <p>Lorem ipsum...</p>
        </section>
    </div>
</main>

<aside id="sidebar" role="complementary">
    <div class="panel-ws">
        <section id="sidename1">
            <h1>Related Content 1</h1>
            <p>Lorem ipsum...</p>
            <p>Lorem ipsum...</p>
        </section>
        <section id="sidename2">
            <h1>Related Content 2</h1>
            <p>Lorem ipsum...</p>
            <p>Lorem ipsum...</p>
        </section>
    </div>
</aside>

#header-text h1
#header-text p
.panel-ws #page-title-container #page-title
.panel-ws section h1
.panel-ws section h2
.panel-ws section h3
\$\endgroup\$
0
2
\$\begingroup\$

Site heading

This is not correct:

<div id="header-text">
    <h1>Website Name</h1>
    <h2>Page Title</h2>
    <h3>Slogan</h3>
</div>

Using h1 for the website heading is good.

But your page heading (h2), which typically is the main content heading, shouldn’t come there, as now everything else in scope of this page heading, not the site heading. The page heading should be part of the main element, and also part of a sectioning content element (article or section).

The slogan should never be a heading (in previous HTML5 version, you could have used a heading together with the hgroup element, but this element is now obsolete). Typically it would be a div or, if appropriate, a p.

Content headings

It doesn’t matter if you use h1 or h2 (or any other appropriate level) for a sectioning content’s main heading. Always using h1 would allow you to move sections without having to adjust the heading levels.

The sidebar

If the aside content is related to the whole website, it should be in scope of the site heading. If it’s related to the specific page only (i.e., the main content), it should be in scope of the page heading (that means: it should be a child of the content’s sectioning element).

\$\endgroup\$
16
  • \$\begingroup\$ I've changed the position of the page title and also swapped the slogan to a <p> element. In response to the sidebar, its content is going to be related to the contents of the <main> element. For example, in #content I have the device specifications for the LG Nexus 5, and in the #sidebar, I would have all devices related to the Nexus 5, such as the Nexus 4, Nexus 10, Nexus 7, other top-tier LG phones, etc. Also, all first headings start with <h1>, and I'm going to follow the model of resetting this with each <section> or <article> element. \$\endgroup\$ – DylRicho Nov 16 '13 at 2:42
  • \$\begingroup\$ @DylRicho: Regarding your page heading: you should use a section (or article, if you think it’s appropriate) explicitly, for example instead of the div.panel-ws. This one would include all your sub-sections (name1, name2, …) then. This, of course, only works if the page heading is appropriate for all these sub-sections. If not, your structure should be changed. -- For discussing these things it would be best to see an example with real content, as the heading outline depends on the actual content. \$\endgroup\$ – unor Nov 16 '13 at 3:06
  • \$\begingroup\$ Here be a semi-real example of this layout in action. The placement of the page title has me undecided as I did like it better in the banner section, even if it doesn't have to be a heading element. \$\endgroup\$ – DylRicho Nov 16 '13 at 16:07
  • \$\begingroup\$ @DylRicho: In this example, "HTC One S (Z520E)" would be a child section of "Device Specifications" -- is this intended? I feel like "HTC One S (Z520E)" should be the page heading (= a section containing all the other content section elements) instead. \$\endgroup\$ – unor Nov 16 '13 at 16:16
  • \$\begingroup\$ "Device Specifications" was intended to be the page heading as it describes the category of the page, while "HTC One S (Z520E)" is supposed to be a subheading as it stems off from the page heading, in order to create a breadcrumb trail. \$\endgroup\$ – DylRicho Nov 16 '13 at 16:26
3
\$\begingroup\$

In HTML5 h1 elements can be treated as relative to their semantic container, so it is not bad practice to have an h1 as the main page header text and further h1's for each section, aside, article, etc.

As you've mentioned you would naturally style this with something like section h1 { ... }. I'd recommend making this more general and not depending on .panel-ws because you may want to hang it off main and aside instead to allow for different header text styling in each?

I found a similar question on stackoverflow which you might want to check out too...

https://stackoverflow.com/questions/7405282/how-to-properly-use-h1-in-html5

For the webpage name and slogan, you could group h1 and h2 elements inside a parent hgroup to ensure that html readers don't parse the slogan as an implicit second level of content.

\$\endgroup\$
1
  • \$\begingroup\$ Thank you Stephen; you answered my original question. :) \$\endgroup\$ – DylRicho Nov 18 '13 at 5:27

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.