Is there anything incorrect about this layout, semantically or otherwise? 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


&lt;h1&gt; for website name
&lt;h2&gt; for webpage name
&lt;h3&gt; for website slogan, or should this be &lt;span&gt; with styling?


Main Content/Sidebar Content


&lt;h2&gt; for every first heading in each &lt;section&gt; element (because a level 1 heading is too large), or should this really be &lt;h1&gt; 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!)

&lt;header id="page-header" role="banner"&gt;
    &lt;div id="logo"&gt;&lt;/div&gt;
    &lt;div id="header-text"&gt;
        &lt;h1&gt;Website Name&lt;/h1&gt;
        &lt;h2&gt;Page Title&lt;/h2&gt;
        &lt;h3&gt;Slogan&lt;/h3&gt;
    &lt;/div&gt;
&lt;/header&gt;

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

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

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


Example Code Extracts (UPDATED!)

&lt;header id="page-header" role="banner"&gt;
    &lt;div id="logo"&gt;&lt;/div&gt;
    &lt;div id="header-text"&gt;
        &lt;h1&gt;Website Name&lt;/h1&gt;
        &lt;p&gt;Slogan&lt;/p&gt;
    &lt;/div&gt;
&lt;/header&gt;

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

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

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