Een website maken met HTML5 en CSS3 – deel 2
Dit artikel is bijgewerkt op 10 oktober 2018
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.
Leuke tut. (:
[quote=.] – Hiermee bakenen we de kopsectie af. In ons geval het logo met de titel.[/quote]
Moet niet zijn?
Dus je hebt (behalve je schets) geen ontwerp waar je mee gaat werken?
Vanuit de schets komt het ontwerp voort. Donderdag meer daarover.
*zucht*
Dit reactiesysteempje mag ook wel eens aangepast worden.
Nog 1 keer:
moet <head> niet <header> zijn?
(sorry voor de driedubbele post)
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?
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.
Tot zover duidelijk.
Ben benieuwd naar het volgende deel(:
is het dalijk verplicht om met de nieuwe elemten te werken of mag je nog wel gewoon divs?
Inderdaad duidelijk tot zo ver! Ik ben ook benieuwd vanaf wanneer we dit nu ‘moeten’ toepassen.
Gr. Jeroen
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?
die word niet blij en verkracht je site 🙂
@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)
@Daan:
uuh…wat jij zegt is ook niet waar.
Die site heeft gewoon een javascript dat alle html5 tags omzet in html4 tags.