10 HTML5 technieken en tips
- Image via Wikipedia
10 jaar naar HTML4 is er nu HTML5. Veel ontwikkelaars laten HTML5 liggen omdat er nog een discussie bestaat over de implementatie en acceptatie door browsers, maar gezien de enorme druk vanuit ontwikkelaars op de browsermarkt kan de implementatie op wel eens erg snel gaan. Omdat er nogal wat veranderd hierbij 10 technieken en tips die je op weg helpen om HTML5 te gaan gebruiken.
1. De DOCTYPE van HTML5
Ook al gebruik ik die XML doctype bijna elke dag, ik gebruik nog steeds een knip-plak techniek omdat ik die oude doctype maar niet kan onthouden.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
En daarom komt HTML5 nu met een uitkomst, een DOCTYPE die iedereen begrijpt
<!DOCTYPE html>
2. Geef een subtext bij een plaatje
Heb je ooit een website gezien met nette teksten bij elk plaatje, maar is het te veel gedoe om nou eens al die plaatjes te voorzien met een mooie subtekst? Dan is er nu een uitkomst. De figcaption tag gebruik je namelijk om je plaatje van een text te voorzien.
<figure> <img src="path/to/image" alt="About image" /> <figcaption> <p>This is an image of something interesting. </p> </figcaption> </figure>
3. Geen types meer voor de script tag in html5
Veel gebruikten ze niet meer, maar dit gaf wel validatie fouten. Nu zijn we er dus vanaf. Dus de volgende code is geheel juist
<link rel="stylesheet" href="path/to/stylesheet.css" /> <script src="path/to/script.js"></script>
4. Gebruik van quotes om je attributen
HTML5 is geen XML, dus je attributes hoeven niet ingesloten te worden door quotes. Het mag wel maar onderstaande code is goed weer volledig valide. Persoonlijk houd ik me toch aan de XML structuur, maar de keuze is dus volledig aan je zelf.
<p id=someId>Dit mag ook gewoon.</p>
5. Maak je inhoud inline aanpasbaar met contenteditable
Door het gebruik van het contenteditable attribuut maak je onderdelen binnen je html aanpasbaar inline. Dit is natuurlijk goed nieuws voor CMS ontwikkelaars onder ons. Probeer de volgende code maar eens in een nieuwere browser.
<!DOCTYPE html> <html lang="nl"> <head> <meta charset="utf-8"> <title>Mijn boodschappen lijst</title> </head> <body> <h2>Mijn boodschappen lijst</h2> <ul contenteditable="true"> <li>Shampoo </li> <li>Brood</li> <li>Koffie</li> </ul> </body> </html>
6. Het e-mail input type
Met HTML5 komt er een stuk validatie van je formulieren naar de front-end. Zo kan het input type “email” er voor zorgen dat er allen amar e-mail adressen ingevuld kunnen worden. Natuurlijk blijft het zaak om je formulier in de back-end te valideren. Op deze manier wordt het wel een stuk makkelijker om de meeste fouten op te vangen.
<!DOCTYPE html> <html lang="nl"> <head> <meta charset="utf-8"> <title>E-mail input</title> </head> <body> <form action="" method="get"> <label for="email">E-mail:</label> <input id="email" name="email" type="email" /> <button type="submit">Verstuur</button> </form> </body> </html>
7. Placeholder: de tijdelijke text
We konden al een standaard value meegeven bij input. Maar deze moest verwijderd worden door de gebruiker om de eigen tekst in te voeren. Ook als het veld leeg was moest deze weer (vaak met javascript) gevuld worden met de standaard tekst. De placeholder attribuut vooorziet in deze irritatie en kan de tijdelijke test weergeven. Ook zal de placeholder inhoud niet meegestuurd worden met het formulier, zodat er niet een aparte controle op plaats hoeft te vinden.
<input name="email" type="email" placeholder="mijn@gmail.com" />
8. Localstorage
Lang tijd zat localstorage in de HTML5 specificaties maar is er nu dan uitgehaald. De verschillende opslag methoden hebben namelijke en eigen specificatie groep gekregen en zullen niet onder HTML5 komen te hangen. Toch is het zeer interessant om naar localstorage te kijken. In mijn eerdere artikelen heb ik een snelle introductie over localstorage gegeven en de manieren om deze te gebruiken.
9. Semantische markup met headers en footers
De html header kennen we al lang, maar nu zijn er ook header en footer elementen die aangeven op de site waar de header en footer zijn. Niet de header en footer van de code, maar van de layout. Zo bestaat de header meestal uit een banner en menu. Daarnaast kan je het copyright en credentials meestal in de footer vinden. Dit lijkt in de eerste instantie niet erg zinvol te zijn. Maar het kent wel meerdere goede implementaties. Je zou bijvooorbeeld in de browser een functie kunnen krijgen om headers en footers te negeren bij het printen. Daarnaast kunnen zoekmachines de header en de footer als elementen zien die duplicate content mogen dragen omdat deze op elke pagina hetzelfde zijn. Ook voor slechtzienden en blinden kan dit een hele vooruitgang zijn omdat de voorleesapperatuur deze onderdelen dan niet steeds hoeft voor te lezen als de persoon alleen maar content wilt horen.
<header> ... </header> <footer> ... </footer>
10. Internet explorer en HTML5
Van Internet explorer is bekend dat deze vrij voorzichtig omgaan met het implementeren van standaarden. Hierdoor zijn er wat problemen in IE met het renderen van HTML elementen. Zo heeft elke element een display:inline, terwijl alle andere browsers uitgaan van een display block. De problemen zijn grotendels op te lossen door de volgende CSS te gebruiken.
header, footer, article, section, nav, menu, hgroup {
display: block;
}
Controleer je nieuwe HTML5 code
Als laatste nog 1 extra tip: De validator van het W3C heeft nu ook de HTML5 toevoeging gekregen. HIermee kan je de html bestanden met het html5 doctype controleren. De Doctype kan automatisch worden herkent, of je kiest deze uit de lijst van document types op http://validator.w3.org