02 – HTML5 paginastructuur

De pagina structuur is eenvoudiger dan in vorige versies. Dit komt door de kortere doctype tag, waar het documenttype wordt aangegeven, en kortere meta-tags. De kortere doctype is een uitvloeisel van de richting die is gekozen bij de ontwikkeling van de taal: er worden niet meer complete versies ontwikkeld die als een geheel op een zeker moment worden “uitgegeven”, maar HTML wordt een zich permanent ontwikkelend gebeuren. Zo gauw een feature voldoende ondersteuning heeft in de browsers, kan deze gebruikt worden door makers van websites. Het documenttype is nu dus gewoon “html”. Voor het gemak spreekt iedereen nog gewoon van HTML5, maar eigenlijk bestaat dit helemaal niet.

Als je in Dreamweaver een nieuwe pagina maakt in XHTML 1.01, de laatste versie voor HTML eh, 5, dan krijg je:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>

<body>
</body>
</html>

En in HTML-daarna krijg je:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>

<body>
</body>
</html>

In de <html> tag zie je nu dus geen attribuut meer. Het adres waar de officiële versie van de taal staat, is weggelaten. Geen enkele browser die dat checkte… In de tag is dat dus ook niet nodig. Je ziet ook dat de meta-tag is versimpeld. content=”text/html, dat is niet meer nodig, want een html bestand ís nu eenmaal html-tekst. Overbodig. Dit is ook het geval wanneer je een CSS of Javascript bestand in de pagina wilt opnemen:

HTML4 en XHTML:


<!-- HTML4 and (x)HTML -->
<script type="text/javascript" src="javascript.js"></script>

HTML5:


<script src="javascript.js"></script>

Overbodig: type=”text/javascript”, want dat is het altijd. Ja, HTML wordt eenvoudiger!

Voor de echte beginner is er onderstaande video, die uitlegt wat elke tag in deze structuur betekent, maar ook hoe tags samengesteld zijn.

8 Berichten over “02 – HTML5 paginastructuur”

    • Edwin on

      Sander, dat ligt een beetje aan je smaak natuurlijk. Voor de Mac: Coda of BBedit. Anders Brackets, die heeft een goede live preview en is beschikbaar voor Windows, Mac, en Linux. En helemaal gratis.

      Beantwoorden
    • Edwin on

      Geef je footer in CSS de volgende eigenschapen mee:

      position:fixed;
      bottom:0;

      De footer zal dan altijd aan de onderkant van het scherm blijven plakken, ongeacht andere elementen of scrollen, hij scrollt niet mee. Je moet dan wel de footer ook een breedte en hoogte geven. Het element dat boven de footer staat moet je een padding geven gelijk aan de hoogte van de footer, anders kan de inhoud daarvan onder de footer komen te staan zonder dat de gebruiker kan scrollen om dit zichtbaar te maken.

      Beantwoorden

Stuur een bericht aan Sander

  • (wordt hier niet vertoond)


− zes = 2