In deze tweede post gaan we concreet aan de slag met het bouwen van een website. Ik ga het vandaag hebben over de opzet van een pagina met behulp van de nieuwe tags die bestaan in HTML5 en die nog niet voorkwamen in HTML 4.01 of XHTML 1.
Structuur
De belangrijkste verandering zit hem in de structuurtags die in de plaats zijn gekomen voor de divs, waaraan een ID werd gekoppeld. Zo heb je op veel websites een opzet zoals dit:
<div id="logo"></div> <div id="navigatie"></div> <div id="content"></div> <div id="footer"></div>
In feite zou onze website ook een dergelijke opzet krijgen als er niet gekozen was voor HTML5. Omdat we voor die laatste versie kiezen gaan we werken met de volgende tags.
De elementen
<header> – Hiermee bakenen we de kopsectie af. In ons geval het logo met de titel.
<nav> – Hiermee geven we aan waar de navigatie zich bevindt.
<article> – Hiermee wordt het artikel op de pagina afgebakend.
<aside> – Deze tag is voor het zijblok.
<section> – Een sectie voor de tussenliggende blokken.
<footer> – Hiermee wordt de footer bepaald.
Semantiek
Zoals je ziet zijn de namen van de tags erg voor de hand liggend, en dat maakt het ook eenvoudig om mee te werken. Je kunt op deze manier de webpagina semantisch kloppend maken. Dat wil kortweg zeggen dat je de juiste onderdelen in de juiste volgorde op de juiste plaats zet.
Natuurlijk komen er ook nog bekende elementen terug zoals de paragraaf (<p>), de kopteksten zoals <h1> en <h2> en <img> voor de afbeeldingen.
De eerste opzet
We gaan maar eens een eerste opzet maken. Hier komt de code zoals je die zou moeten schrijven, te beginnen met het doctype:
<!DOCTYPE HTML> <html> <head> <title>Titel van de webpagina</title> </head> <body> <header><h1>HTML5-site.nl</h1></header> <nav>Navigatie</nav> <section id="blokken">De drie nieuwsblokken</section> <article>Het artikel, de tekst</article> <aside>Het zijvlak</aside> <footer>© 2010 - html5-site.nl</footer> </body> </html>
Doctype
Wat als eerste opvalt is het eenvoudige doctype. Deze heet gewoon HTML, niets met strikt, transitional of frames (die zijn sowieso taboe in HTML5).
Tussenblokken
Daarnaast geef ik alleen de tussenblokken die staan tussen de koptekst en het artikel, een id mee, met name omdat een dergelijke sectie vaker terug zou kunnen komen en je met een ID dus een unieke identiteit aan deze sectie mee geeft.
Geen sprake meer dus van divs in dit geval.
De header-tag
De header-tag (niet te verwarren met de head-tag) bevat een koptekst, in ons geval h1. Dit was in html4 al het geval wanneer je een div maakte met id=”head”. De h1 tag bevat de belangrijkste informatie voor een website en daarmee ook voor een zoekmachine.
Er is echter wel een verschil met een div met id=”head”, namelijk dat een header vaker mag voorkomen in een webpagina, namelijk elk kopstukje van een sectie kan een header-tag meekrijgen. Zo kun je de kop van een artikel ook weer een header-tag meegeven. Daar kom ik later nog op terug.
De navigatie
Nu gaan we de navigatie wat invullen. Dat doen we zoals we gewend zijn, heel semantisch met een ongeordende lijst, welke later horizontaal gemaakt wordt met CSS.
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Video</a></li>
</ul>
</nav>
De tussenblokken
Het volgende onderdeel dat we gaan schrijven zijn de tussenblokken. Er komen er drie. Mocht je nog even willen spieken wat de bedoeling is voor deze tussenblokken, kijk dan nog eens in het eerste artikel, daar staat een schets.
Hier de code voor de sectie met uniek ID ‘blokken’.
<section id="blokken"> <div id="bloknieuws"><h2>Nieuws</h2> <p>De inhoud van blok 1 Nieuws</p></div> <div id="blokvideo"><h2>Video</h2> <p>De inhoud van blok 2 Video</p></div> <div id="blokoverig"><h2>Overige zaken</h2> <p>De inhoud van blok 3 Overige</p></div> </section>
Samenvattend
We hebben nu dus de header, de navigatie, de blokken en de algemene opzet. Morgen wil ik ingaan op het onderdeel ‘artikel’ en de footer. Daarna kunnen we de andere twee pagina’s gaan invullen. Op donderdag en vrijdag kunnen we dan CSS gaan toevoegen aan de site zodat we aan het einde van de week een complete website hebben gemaakt die geschreven is volgens de regels van HTML5 en CSS3.
Het bericht Een website maken met HTML5 en CSS3 – deel 2 verscheen eerst op HTML-site.nl.