HTML5 - Deel 1 'De basis'
Het leren van HTML5 is makkelijker dan gedacht! Het opzetten van de pagina gaat bijna hetzelfde als je al gewend zal zijn binnen HTML4 alleen in plaats van allemaal losse Div tags te definiëren maak je nu gebruik van een aantal voorgeselecteerde tags om de structuur van je pagina op de bouwen. Ik zal in dit artikel beginnen met de basis elementen van HTML5. We zullen dan ook niet alle nieuwe tags behandelen maar genoeg om een standaard W3C valid website te ontwikkelen. Hierna zullen meerdere blog artikelen volgen met aanvullende elementen die nieuw zijn in HTML5.
Het gebruik van sommige elementen is nog open voor discussie en staan nog niet vast. De volgende uitleg genereert op het moment van schrijven een W3C valid HTML5 bestand en omschrijft de verschillende nieuwe elementen op een manier zodat deze duidelijk worden gemaakt voor beginners van HTML5.
Mag ik nog wel Div tags gebruiken in HTML5?
Ja! In HTML5 mag je nog steeds gewoon Div tags gebruiken. Sterker nog, je mag zelfs ook gewoon alleen Divs gebruiken (zoals je waarschijnlijk ook al bent gewend in HTML4) alleen gaat hierdoor de sterke structuur van HTML5 verloren en maak je geen gebruik van de voordelen die HTML zal bieden. Div tags zullen in de meeste gevallen eigenlijk nog steeds gebruikt mogen worden zoals dat eerst ook gebeurde alleen is het niet aan te raden om de voorgedefinieerde tags niet te gebruiken in verband met de goede structuuropbouw. In de meeste gevallen zullen Divs gebruikt worden als 'content wrappers' en/of om de positie of style van een bepaald element te bepalen.
Gebruik een Div dus eigenlijk alleen als je de content niet in de HTML5 specifieke tags kan plaatsen.
Beginnen in HTML5
We beginnen met het instellen van de doctype;
1 |
<!DOCTYPE html>
|
Dat was makkelijk! HTML5 kent maar één soort doctype, je hoeft dus nu niet meer te kiezen voor een Strict of Transitional variant. Het zetten van de doctype in HTML5 is trouwens niet meer verplicht maar wel zo netjes om te gebruiken.
Na het zetten van de doctype kunnen we verder met de rest;
1 |
<!DOCTYPE html> |
De nieuwe elementen
Binnen HTML5 zijn er een aantal nieuwe standaarden voor het opbouwen van de pagina. In HTML4 wordt de opmaak van een document meestal gedaan door Div tags die vervolgens in de CSS gestyled en gepositioneerd worden. In HTML5 gaat dit op bijna dezelfde manier, het grootste verschil is alleen dat de Div tags in de meeste gevallen (het liefst alle) komen te vervallen en er gebruik gemaakt wordt van een aantal vooraf bepaalde tags zoals;
- Header tag <header>
- Nav tag <nav>
- Article tag <article>
- Footer tag <footer>
- Section tag <section>
- Aside tag <aside>
In HTML4 is de indeling van een pagina door iedereen vrij te bepalen. Hierdoor is het vaak moeilijk(er) voor een zoekmachine of een nieuwe webdesigner om de code te lezen en wat precies waar begint en welk doel het heeft, er zit geen duidelijke (algemene) structuur in. In HTML5 maken we hier structuur in om de voorafingestelde elementen te gebruiken voor de opbouw van de pagina.
Om dit in HTML5 beter te regelen moet je dus goed bedenken wanneer je de bovengenoemde tags gaat gebruiken. Hieronder volgt een korte omschrijving over de tag en een voorbeeld hoe je deze in je code moet opnemen.
Header tag <header>
De header tag wordt gebruikt voor de pagina header (niet te verwarren met de <head> tag!) en voor het aangeven van bijvoorbeeld een Article of Section header. Er kunnen dus meerdere Header tags per pagina aanwezig zijn. De Header tag bevat op zijn minst altijd een H tag (H1, H2 etc.).
Voorbeeld van de Header tag als pagina header:
1 |
<header><h1>Bedrijfsnaam</h1></header>
|
Voorbeeld van Header tags in zowel Section als Article tags (deze tags worden verderop in het artikel besproken):
1 |
<section> |
Wat kan en mag je gebruiken in de Header tag:
- Figure tag
- H1, H2 etc. tags
- Zoekbalk
- Nav tag
- Tekst
Let op: een Header tag mag zelf niet nog een Header tag bevatten dus bij het toevoegen van een Nav tag mag hier zelf weer geen header tag in terugkomen.
Nav tag <nav>
De Nav tag geeft aan dat hier binnen de navigatie is aangegeven. Deze wordt dus vooral gebruikt voor de hoofd navigatie maar kan ook een sub menu bevatten. Deze tag kan dus meerdere keren op een pagina voorkomen.
Voorbeeld van de Nav tag:
1 |
<nav> |
Article tag <article>
Een Article tag gebruik je voor het aangeven van content. Omdat dit een ruim begrip is moet je jezelf afvragen of de content die in de tag zal verschijnen op zichzelf gelezen kan worden. Als dit zo is dan kan deze dus in een Article tag gezet worden. Denk hierbij bijvoorbeeld aan een artikel, nieuwsitem, forum post of een geplaatste comment.
Voorbeeld:
1 |
<article> |
Footer tag <footer>
De Footer tag geeft de footer weer van de pagina zelf of van de Section of Article waar deze zich in bevindt. Net als bij de Header tag kan deze tag dus meerdere keren voorkomen. De inhoud van de Footer tag kan variëren. Binnen de pagina kan de Footer tag bijvoorbeeld een Nav tag voor een menu bevatten of de copyright informatie. Enkele voorbeelden voor het gebruik van de Footer tag binnen een Article tag zijn; aanmaakdatum van het artikel of blog post, auteur, artikel tags, artikel sectie etc.
Bij gebruik van de Footer tag voor de pagina zelf kan deze in de Body tag geplaatst worden als:
1 |
<footer> |
Binnen een Article ziet dit er als volgt uit:
1 |
<article> |
De Footer tag hoeft niet onderaan de pagina of onderaan een artikel te staan! Deze is vrij te plaatsen binnen de tag waarvoor deze bestemd is.
Ook goed om te weten is dat een Footer tag geen Header tag mag bevatten! Ook een header tag binnen een andere tag (zoals de Nav tag) mag niet in de footer terugkomen.
Section tag <section>
Deze tag is moeilijk te definiëren. Het grootste gedeelte zou je namelijk eigenlijk al kwijt kunnen in een Article, Nav of Aside tag.
Als je een Section alleen gebruikt om een bepaalde groep artikelen te groeperen zou je dit beter kunnen oplossen door hier een Div omheen te zetten in plaats van een Section tag. Daarnaast is het bij een Section meestal de bedoeling om op zijn minst een Header te hebben en eventueel nog een begeleidende (intro)tekst en/of Footer.
Voorbeeld van een Section is een groep nieuwsartikelen met een Header en een inleidende tekst;
1 |
<section> |
Aside tag <aside>
De Aside tag is bedoeld voor een tweetal opties. De eerste optie is om deze te gebruiken in de body tag zelf om een column neer te zetten naast (of onder, boven etc.) het artikel van de pagina die bijvoorbeeld (sub)navigatie of banners toont, voorbeeld;
1 |
<aside> |
Daarnaast kan je Aside gebruiken binnen een Article tag voor content die direct gerelateerd is aan de content van het artikel zelf, denk hierbij bijvoorbeeld aan gerelateerde content (specifiek aan het artikel), social media knoppen, tag clouds en comments. Voorbeeld;
1 |
<article> |
HTML5 ondersteuning in oudere browsers
Een groot nadeel van HTML5 is dat de oudere browser versies, zoals Internet Explorer 7 en 8, de tags niet zullen herkennen en hierdoor de pagina niet kunnen renderen. Dit probleem kan opgelost worden door gebuik te maken van het Javascript 'html5shiv'.
Meer informatie hier over kan je vinden op: http://code.google.com/p/html5shiv/
Het zal niet alle problemen oplossen maar voor het grootste gedeelte zal de pagina in ieder geval wel geladen kunnen worden. Let op: de video en audio tag worden niet ondersteund!
Download HTML5 voorbeeld
De behandelde elementen van dit artikel zijn terug te vinden in bijgevoegde download; HTML5 Basis opzet W3C valid
Meer HTML5 elementen
Zoals eerder vermeld zijn er nog een aantal leuke nieuwe features binnen de HTML5 standaard, zoals oa. de Video tag, Figure tag en de nieuwe Form elementen. Deze zal ik in komende blog artikelen gaan behandelen.