CSS : Transparent
2 augustus
CSS: font shorthand cheatsheet
3 augustus
Laat alles zien

HTML5 features, tips en technieken (deel 1)

"_blank" mag weer in html 5

1. Een nieuw Doctype

Gebruik je nog steeds die onmogelijk te onthouden xhtml-doctype ?

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Waarom ebruik gewoon de html 5 doctype.

< !DOCTYPE html>

Sertker nog, eigenlijk is het niet eens nodig voor HTML5 om een doctype te gebruiken, maar huidige en oudere browsers hebben het dus nog wel nodig dat er een doctype wordt gedeclareerd. De browsers die dit niet herkennen renderen de pagina hierdoor in de standaard-modus. Dus , omarm de nieuwe doctype en ben klaar voor de toekomst.

2. het ‘figure’ element

Dit is de manier waarop je op dit moment een afbeelding in een document zet.

	mijn afbeelding

Dit is een mooie afbeelding.

het nadeel van dit is dat het niet semantisch is, de relatie tussen de afbeelding en de caption is onduidelijk.
Hiervoor introduceert HTML5 de

tag met de bijbehorende

tag .
We kunnen hierdoor de relatie tussen de elementen weergeven

	About image

This is an image of something interesting.

3. Nooit meer ‘types’ voor scripts en links

Je zult waarschijnlijk nog steeds een type aangeven waneer je een link of script in je pagina zet.

Met HTML5 is dit niet meer nodig, je kunt gewoon het volgende doen.

	

4. Nooit meer quotes ?

Html5 is geen xhtml, je hoeft dus geen quotes te gebruiken , je hoeft zelfs je elementen niet meer af te sluiten.
Dit is dus correct HTML5

 Start de reactor.

Persoonlijk blijf ik quotes gebruiken en mijn elementen afsluiten, vind het netter staan en het maakt mijn code makkelijker leesbaar vind ik, maar het is helemaal aan je zelf.

5. Maak de content bewerkbaar

Een erg handige nieuwe functie is het contentedible atribuut. Deze kun je toevoegen aan elk element en wordt dan ook toegepast op de onderliggende (children) elementen.
Deze functie maakt gebruik van de localstorage functie in de nieuwe browsers.

< !DOCTYPE html>

To-Do List

  • Instaleer videocamera.
  • Fiets van het dak
  • Bekijk de video

6. De Header en Footer tag

Met de intrede van HTML5 is het afgelopen met de volgende code.






Een div heeft van nature geen symantische waarde , zelfs met een ID. We krijgen nu de mogelijkheid om de volgende elementen te gebruiken.

	...

	...

let op: verwar deze niet met de header en footer van je website, ze kunnen ervoor gebruikt worden, maar je kunt ze bijvoorbeeld ook gebruiken om metainformatie in je blogpost neer te zetten.

7. de hgroup tag

Stel je voor , in de header van je website heb je titel en een subtitel. Je gebruikt hiervoor de

en de

tag. Voor HTML5 was het niet mogelijk om symantisch aan te geven dat ze bij elkaar horen.
Nu hebben we de nieuwe tag

.

Mijn mooie site

Voor mensen die graag naar een mooie site kijken.


origineel artikel staat op http://net.tutsplus.com/tutorials/html-css-techniques/25-HTML5-features-tips-and-techniques-you-must-know/

Vincent Hofman
Vincent Hofman
Sinds 1998 bezig met het maken van webpagina's , muzikant en levensgenieter. Ik vertaal veel Engelse artikelen in het Nederlands en zoek het web af voor interessante sites en weetjes. Heb sinds 2013 mijn eigen bedrijf voor web-consulting en web-developement

Geef een reactie

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.

%d bloggers liken dit: