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

• ` for website name






• for webpage name






• for website slogan, or should this be with styling?




Main Content/Sidebar Content



• for every first heading in each element (because a level 1 heading is too large), or should this really be 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!)

    
    
        Website Name
        Page Title
        Slogan
    

    
        
            Content 1
            Lorem ipsum...
            Lorem ipsum...
        
        
            Content 2
            Lorem ipsum...
            Lorem ipsum...
        
        
            Content 3
            Lorem ipsum...
            Lorem ipsum...
        
    

    
        
            Side content 1
            Lorem ipsum...
            Lorem ipsum...
        
        
            Side content 2
            Lorem ipsum...
            Lorem ipsum...
        
    

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

Example Code Extracts (UPDATED!)

``



Website Name
Slogan




Page Title


Content 1
Lorem ipsum...
Lorem ipsum...


Content 2
Lorem ipsum...
Lorem ipsum...


Content 3
Lorem ipsum...
Lorem ipsum...





Related Content 1
Lorem ipsum...
Lorem ipsum...


Related Content 2
Lorem ipsum...
Lorem ipsum...



#header-text h1
#header-text p
.panel-ws #page-title-container #page-title
.panel-ws section h1
.pa

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.

StackExchange Code Review Q#35425, answer score: 3