patternhtmlMinor

HTML5 semantic layout (div, article, section) and explicit identifiers

Submitted by: @import:stackexchange-codereview·Mar 10, 2026·

Viewed 0 times

sectiondivexplicitlayouthtml5identifiersandsemanticarticle

Problem

I'm writing a markup for:

And I've split it for these sections:

Is it semantically correct(div, section, article) and are my identifiers explicit?

Solution

#logo → h1

Your ` should be a h1

, otherwise the document outline wouldn't be correct:



See https://stackoverflow.com/a/14920215/1591669 for an explanation.

#banner → header or aside



If your

doesn't contain main content, it should go in an aside element, or, if it can be understood as part of the header (probably on each page of the site), in the header

 element.

#main → section (or article

)

Instead of

you could use a sectioning element here. I assume your div

 contains a heading ("Welcome, dear visitor!"), so you have something like an implict section anyhow. Why not make it explicit? So use a

section instead of the div (depending on the actual content, article

 might be suitable instead).

#content > aside → section



I'd say on the front page the testimonials could be considered part of the main content (in the end it depends on the real content/context), so instead of

aside you could use section

 then.

Each single testimonial should be in its own

article

, of course.

#extra > article → section



I don't think

article elements in the footer

 are suitable for that kind of content (unless your actual page contains something different). (Only the newsletter form could possibly get

article instead of section, but that's not that clear; personally I'd use section

 for it, too).

So, I'd go with

section here. If the contact details listed under "Address" are relevant for the whole page, you should use the address` element, too.


    
    
      Address
      …

Code Snippets

<h1><img id="logo" src="logo.png" alt="Progress Business Company"></h1>

<div id="extra">
    <section class="extra"></section>
    <section class="extra">
      <h1>Address</h1>
      <address>…</address>
    </section>
    <section class="extra"></section>
    <section class="extra"></section>
</div>

Context

StackExchange Code Review Q#22832, answer score: 5

Revisions (0)

No revisions yet.