H
HTML is altijd beperkt geweest in zijn mogelijkheden. Webdevelopers liepen veelvuldig tegen beperkingen aan. Ondertussen wil de gebruiker maximaal gebruik maken van tablet en smartphones. Met HTML4 werd dit vrijwel onmogelijk. Met de komst van HTML5, een uitbreiding op HTML4, is er veel veranderd. Ondanks dat HTML4 niet echt als term gebruikt werd, benoem ik het hier als HTML4. HTML5 is een verzamelnaam voor een uitbreiding op de (X)HTML-standaard, CSS en nieuwe API’s voor en versies van Javascript. HTML5 moet het ontwikkelen van webapplicaties vereenvoudigen en brengt de webapplicatie veel dichter bij het klassieke computerprogramma.
Vernieuwing
Waar er in HTML4 geen mogelijkheden zijn op multimedia-gebied, kon men gebruik maken van Flash. Flash kan onder andere animatie, geluid en video tonen. Echter is Flash een plug-in met alle nadelen van dien. De plug-in gebruikt een hoop rekenkracht, veel Flash op de webpagina maakt de website traag. Wanneer een webpagina volledig of bijna volledig opgebouwd is in Flash, is het vrijwel onbruikbaar voor zoekmachines. Daarbij is er nog een nadeel aan Flash; het is geen tekst. HTML is opgebouwd met verschillende tags bestaande uit tekst, hierdoor ontstaat er semantische HTML. Dit zorgt ervoor dat zowel de gebruiker, developer, als browser de pagina snel kan lezen.
Semantische HTML betreft geen nieuwe HTML-versie, maar het is een manier waarop HTML eigenlijk toegepast kan en zou moeten worden. De voordelen ervan zijn; websites laden sneller, het is flexibeler om mee te werken en het is toegankelijker voor de meeste browsers.
Apple
Steve Jobs vond in 2010 dat Flash niet langer noodzakelijk moest zijn om video’s af te spelen en sloot Flash uit als onderdeel van Apples mobiele IOS besturingssystemen. In 2012 werd HTML5 gelanceerd, wat Flash grotendeels overbodig maakt. Websites worden sneller geladen in je browser, zowel op je computer als op mobiel en tablet. HTML5 introduceert nieuwe tags die ervoor zorgen dat er meer structuur in het document komt. Waar het eerder onmogelijk was om een video af te spelen zonder Flash Player-plugin, kan er nu voor de tag <video> worden gekozen.
Elementen en attributen
Wanneer je gaat beginnen aan je website is het handig om te weten dat een website in HTML5 een vaste structuur heeft. Zo start je je pagina met <!DOCTYPE html>, hierdoor weet de browser aan de hand van het doctype welke tags er allemaal kunnen volgen in je broncode. De semantische HTML is aan de hand van <head> <body> <header> <nav> <footer>, gemakkelijk in te delen en ook gemakkelijk te volgen voor de volgende developer die eventueel aan het document werkt. Hierdoor is het niet meer nodig om <div> na <div> langs te lopen wat elk element exact doet. Wat er ook vernieuwend is aan HTML5 zijn de <header> <nav> <footer> tags.
Naast de tags die gebruikt worden om de basisstructuur van een HTML-pagina te definiëren, zijn er nog heel wat andere HTML-tags die je gebruikt om je webpagina vorm te geven. Deze tags worden binnen <body></body> gebruikt. Er kunnen attributen meegegeven worden bij deze tags, waarmee je elementen kunt stijlen. Deze stijlen (class) van elementen zet je over het algemeen niet in je HTML-bestand, maar in een CSS-bestand (Cascading Style Sheets). Zo kun je met een class gemakkelijk (dezelfde) opties en stijlen meegeven aan verschillende tags.
Volg je het nog? Nu alles op een rijtje;
- Tags worden gebruikt om je pagina in te delen. (zie afbeelding rechts)
- Elementen worden binnen in de tag <body> gebruikt. Bijvoorbeeld <img> voor een afbeelding of <h1> voor een titel.
- Attributen bieden extra informatie over de inhoud van een element.
- Data-attributen geven extra informatie aan een element. Dit kan vervolgens uitgelezen worden door bijvoorbeeld Javascript of CSS.
Video en audio
HTML5 introduceerde ook <video> en <audio> tags, hierdoor is het kinderlijk eenvoudig een video te plaatsen op een website. Plaats hierbij controls in je openingstag, dit zorgt ervoor dat er een play-, pauze- en volumeknop bij de video zitten. Daarbij doe je er verstandig aan om de hoogte en breedte mee te geven in je tag. Al deze opties zijn ook mogelijk bij het plaatsten van audio.
Voor developers is HTML5 een grote vooruitgang. Er zit nu meer structuur in een website. En een website kan sneller worden geladen, doordat HTML5 functies uit Flash kan overnemen.