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?
