HTML5 sectioning for my design

Question 1

I've designed my new website:

Now I want to build up my HTML as semantic as possible.

Here's my first attempt / set-up:

<html>
 <head>
 ...
 </head>
 <body>
 <nav id="menu" role="navigation">
 <ul>
 <li>Home</li>
 <li>Het park</li>
 <li>...</li>
 </ul>
 </nav>
 <header>
 <img src="logo.png">
 <nav id="quick-links" role="navigation">
 <ul>
 <li>Log in</li>
 <li>Register</li>
 <li>Forum</li>
 <li>Contact</li>
 </ul>
 </nav>
 <form>
 ...
 </form>
 <section role="banner">
 <article>
 <header>
 <h1>Hommage aan Los Piratas</h1>
 </header>
 <p>Zondag 2 september 2012, omstreeks 18u. Voor de laatste keer...</p>
 <img src="slide1.jpg">
 </article>
 <article>
 ... slide 2 ...
 </article>
 <article>
 ... slide 3 ...
 </article>
 <article>
 ... slide 4 ...
 </article>
 </section>
 </header>
 <main>
 <section id="highlights">
 <article>
 <header>
 <h1>Hommage aan Los Piratas</h1>
 </header>
 <p>Lorem ipsum...</p>
 <footer>
 <a href="#" role="button">Lees meer</a>
 </footer>
 </article>
 <article>
 <header>
 <h1>Meer dan 100 postkaarten</h1>
 </header>
 <p>Lorem ipsum...</p>
 <footer>
 <a href="#" role="button">Lees meer</a>
 </footer>
 </article>
 <article>
 <header>
 <h1>Onride: Het Zoemende Ei</h1>
 </header>
 <p>Lorem ipsum...</p>
 <footer>
 <a href="#" role="button">Lees meer</a>
 </footer>
 </article>
 </section>
 <section id="latest-news">
 <article>
 <header>
 <h1>Halloween in Bellewaerde Park, een totaalbeleving voor de hele familie</h1>
 <p>Persbericht</p>
 <time>Dinsdag 15 oktober 2016</time>
 </header>
 <img><p>Lorem ipsum...</p>
 <footer>
 <a href="#" role="button">Lees meer</a>
 </footer>
 </article>
 <article>
 <header>
 <h1>Bellewaerde Park blaast 59 kaarsjes uit</h1>
 <p>Persbericht</p>
 <time>Donderdag 4 juli 2016</time>
 </header>
 <img><p>Lorem ipsum...</p>
 <footer>
 <a href="#" role="button">Lees meer</a>
 </footer>
 </article>
 <article>
 ...
 </article>
 </section>
 <aside>
 <section>
 <h1>Kalender</h1>
 ...
 </section>
 <section>
 <h1>Facebook</h1>
 ...
 </section>
 </aside>
 </main>
 <aside>
 <article>
 <header>
 <h1>Vandaag</h1>
 <p>Zondag 31 augustus 2016</p>
 </header>
 <ul>
 <li>Open van 10u00 - 18u00</li>
 <li>Event 1</li>
 <li>Event 2</li>
 </ul>
 <p>Weather forecast 1</p>
 </article>
 <article>
 <header>
 <h1>Tomorrow</h1>
 <p>Zondag 31 augustus 2016</p>
 </header>
 <ul>
 <li>Open van 10u00 - 18u00</li>
 <li>Event 1</li>
 <li>Event 2</li>
 </ul>
 <p>Weather forecast 2</p>
 </article>
 <section>
 <h1>Log in</h1>
 <form>
 ...
 </form>
 </section>
 </aside>
 <footer>
 <p>BellewaerdeFun © 2016 • <a href="#" title="Sitemap">sitemap</a> • <a href="#" title="Disclaimer">disclaimer</a> • <a href="#" title="Contact">contact</a></p>
 </footer>
 </body>
</html>

I think it's pretty good, but I'm not sure if I'm doing it 100% "right". Does anybody have some best practice experiences to share?

Question 2

My review will be nowhere complete. Here are some points I would change:

With a doctype of <!DOCTYPE html> all browsers will recognize the document as HTML5.

All images should have an alt attribute to aid assistive technologies. Use an empty attribute for only presentational images like the logo. Some software will output the file name otherwise.

Add a datetime attribute to all your <time> elements. If you do so the date will be machine readable for search engines and tools (not sure if there are such tools in practice).

Use h1 to h6 headings. While HTML allows you to only use h1 many tools will still be confused. If the only content of a header element is the h1 you should leave it out.

I would restructure the footer a bit. The 'Vandag', 'Morgen' and 'Login' sections are all part of the footer I think. So wrap them and and the copyright line in a <footer>. They are probably also no articles but either sections or plain old divs. I'd use a <small> tag for the copyright line since it is intended for "side-comments and small print including copyright and legal text, independent of its styled presentation." The links should definitely use an unordered list instead of Unicode bullet points (CSS will format the list as in the screenshot). The title attribute is not necessary if it contains the same content as the anchor element.

 <small>
 BellewaerdeFun &copy; 2016
 <ul>
 <a href="#">sitemap</a>
 <a href="#">disclaimer</a>
 <a href="#">contact</a>
 </ul>
 </small>

Finally I recommend you to use the W3C validator.

Overall this is really nice semantic HTML with the mentioned glitches.

Question 3

Thank you Pyfisch! The <html> doctype was lazy typing, I'm using <!DOCTYPE html> in all my projects. Same with the alt attribute and the time element ;). But how are some tools confused when I use only h1 elements? Is there a global support overview? I'm using the Google Chrome "outline" add-on" and for now it looks good. I will leave the header element on stand-alone h tags and change my footer p element to the small element too + change the article weather tags to section tags. Great hints, great explanation: thank you! :D

Question 4

As far as I know no one really uses h1 only. For this reason many text-to-speech, outline generators or even search engines will be confused.

Question 5

@Sam Here is an article from HTML5 Doctor on outlines. In a nutshell no user-agents implement the new outline algorithm and it has been dropped from the latest revision of the HTML standard.

Question 6

About your roles (`role`)

It’s recommended not to provide WAI-ARIA roles if they are the default anyway. As the nav element has the navigation role as default, you might want to omit it.

Judging from your screenshot, it seems that the "Lees meer" links don’t really act as buttons, so the button role may not be the best choice for them. The link role seems to be more appropriate, which is the default role (so it should be omitted).

The section element can’t have the banner role. In HTML5, only the roles listed under an element’s "Allowed ARIA role attribute values" may be used.

Question 7

Okay, I've removed the role attributes from the <nav>s, buttons and sections. The W3 validator doesn't give me any errors or warnings anymore. Very happy with it! ;)

Question 8

i would have actually advise to use only 1 role="navigation" for home,niews,het parc ... menu wich seems to be the main menu linking to contents where the other menu seems secondary or for familiar visitors

Pyfisch Pyfisch 6614 silver badges11 bronze badges · Answer 1 · 2016-04-24 19:23:12Z

My review will be nowhere complete. Here are some points I would change:

With a doctype of <!DOCTYPE html> all browsers will recognize the document as HTML5.

All images should have an alt attribute to aid assistive technologies. Use an empty attribute for only presentational images like the logo. Some software will output the file name otherwise.

Add a datetime attribute to all your <time> elements. If you do so the date will be machine readable for search engines and tools (not sure if there are such tools in practice).

Use h1 to h6 headings. While HTML allows you to only use h1 many tools will still be confused. If the only content of a header element is the h1 you should leave it out.

I would restructure the footer a bit. The 'Vandag', 'Morgen' and 'Login' sections are all part of the footer I think. So wrap them and and the copyright line in a <footer>. They are probably also no articles but either sections or plain old divs. I'd use a <small> tag for the copyright line since it is intended for "side-comments and small print including copyright and legal text, independent of its styled presentation." The links should definitely use an unordered list instead of Unicode bullet points (CSS will format the list as in the screenshot). The title attribute is not necessary if it contains the same content as the anchor element.

 <small>
 BellewaerdeFun &copy; 2016
 <ul>
 <a href="#">sitemap</a>
 <a href="#">disclaimer</a>
 <a href="#">contact</a>
 </ul>
 </small>

Finally I recommend you to use the W3C validator.

Overall this is really nice semantic HTML with the mentioned glitches.

Thank you Pyfisch! The <html> doctype was lazy typing, I'm using <!DOCTYPE html> in all my projects. Same with the alt attribute and the time element ;). But how are some tools confused when I use only h1 elements? Is there a global support overview? I'm using the Google Chrome "outline" add-on" and for now it looks good. I will leave the header element on stand-alone h tags and change my footer p element to the small element too + change the article weather tags to section tags. Great hints, great explanation: thank you! :D
As far as I know no one really uses h1 only. For this reason many text-to-speech, outline generators or even search engines will be confused.
@Sam Here is an article from HTML5 Doctor on outlines. In a nutshell no user-agents implement the new outline algorithm and it has been dropped from the latest revision of the HTML standard.

unor unor 2,67315 silver badges24 bronze badges · Answer 2 · 2016-04-26 00:32:34Z

About your roles (`role`)

It’s recommended not to provide WAI-ARIA roles if they are the default anyway. As the nav element has the navigation role as default, you might want to omit it.

Judging from your screenshot, it seems that the "Lees meer" links don’t really act as buttons, so the button role may not be the best choice for them. The link role seems to be more appropriate, which is the default role (so it should be omitted).

The section element can’t have the banner role. In HTML5, only the roles listed under an element’s "Allowed ARIA role attribute values" may be used.

Okay, I've removed the role attributes from the <nav>s, buttons and sections. The W3 validator doesn't give me any errors or warnings anymore. Very happy with it! ;)
i would have actually advise to use only 1 role="navigation" for home,niews,het parc ... menu wich seems to be the main menu linking to contents where the other menu seems secondary or for familiar visitors

Stack Exchange Network

HTML5 sectioning for my design

2 Answers 2

About your roles (`role`)

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Hot Network Questions

HTML5 sectioning for my design

2 Answers 2

About your roles (role)

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Related

Hot Network Questions

About your roles (`role`)