Een website maken met HTML5 en CSS3 – deel 2

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:

 
 
 

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:




Titel van de webpagina



HTML5-site.nl

De drie nieuwsblokken
Het artikel, de tekst
© 2010 - html5-site.nl

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.

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’.

Nieuws

De inhoud van blok 1 Nieuws

Video

De inhoud van blok 2 Video

Overige zaken

De inhoud van blok 3 Overige

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.

Iedere week probeer ik minimaal een artikel te plaatsen zoals je zojuist gelezen hebt.
Wanneer je op de hoogte wilt worden gehouden van deze artikelen,
Meld Je Dan Aan Voor De Nieuwsbrief.
Ik stuur je dan regelmatig een update (niet te vaak natuurlijk!!)
Klik hier om je aan te melden >>

13 Reacties

  1. *zucht*
    Dit reactiesysteempje mag ook wel eens aangepast worden.

    Nog 1 keer:
    moet <head> niet <header> zijn?

    (sorry voor de driedubbele post)

  2. Loes heeft wel gelijk, dit moet header zijn. Head is voor de head die je ook uit de oudere HTML kent.

    Maar, is het niet een beetje een rare volgorde? Schets > code > ontwerp?

  3. Je hebt gelijk Loes, ik pas het aan.
    Wat betreft de reactiemogelijkheid zal ik eens aanpassen.
    Daan, De schets is het ontwerp, daarna de basisopzet in HTML, vervolgens de uiteindelijke versie afmaken met CSS. Lijkt me goed toch?
    Maar goed het gaat me om de kennismaking met HTML5 en CSS3.

  4. Vraag die nu bij mij op komt: stel ik besluit nu een HTML5/CSS3 website te maken voor iemand. Wat gebeurd er met een browser die het niet ondersteund?

  5. @hatredkeys
    Dit is dus totaal niet waar. HTML5 is backwards compatible, dus qua structuur zal het wel meevallen. De echt nieuwe dingen in CSS3 zullen een aantal details van je site afhalen.

    Voorbeeldje:
    http://www.analog.coop is opgebouwd met HTML5, en ziet er nog steeds goed uit in IE7 (een browser zonder native html5 support)

Een reactie achterlaten

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *