Is there anything incorrect about this layout, semantically or otherwise?

Question

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

Answer 1

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).

Answer 2

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.