Verschillen tussen HTML 4 en HTML5 I:

Nieuwe tags in HTML5

HTML5 is de huidige standaard voor HTML. Deze standaard heeft de naam HTML5 gekregen en is de opvolger van HTML 4.01.
Let op de spelling: het is HTML5, zonder spatie. De naam van de oude standaard wordt wel met een spatie gespeld.

Het belangrijkste verschil met HTML 4.01 is de vergaande splitsing tussen inhoud en opmaak van de documenten. Voor de opmaak van het document wordt zwaar geleund op de opmaaktaal CSS3.
CSS3 is nog volop in ontwikkeling; er is wel een specificatie, maar die heeft de status van werkdocument. Er zijn bronnen die stellen dat CSS3, door steeds nieuwe technologieën, het nooit tot standaard zal brengen maar steeds zal worden verbeterd en uitgebreid. De tijd zal het leren.

De betere scheiding van inhoud en opmaak vereist een aantal nieuwe tags, die hieronder in het kort worden besproken. Voor een meer uitgebreide beschrijving verwijs ik naar de webreference op w3schools.com.

Sommige van deze nieuwe tags worden (nog) niet ondersteund door de grote browsers die draaien onder Windows. Dat staat expliciet aangegeven.
Microsoft heeft aangekondigd de ondersteuning voor IE te stoppen. Deze site ondersteunt het als niet meer.

Tag		Beschrijving
<article>		Bevat onafhankelijke content binnen een document. Denk hierbij aan forumberichten, nieuws en commentaar.
<aside>		Bevat content die los staat van de de content van het document zelf. Denk aan een kolom met extra informatie zoals advertenties of links. Is goed te gebruiken in combinatie met <header>, <footer> en <nav>. Zie ook <figure>.
<audio>		Weergave van geluid. Browsers die HTML5 ondersteunen, hebben zelf een mediaspeler aan boord. Constructies met <OBJECT> en <EMBED> zijn in HTML5 dus niet meer nodig. Eigenlijk is <audio> geen "echte" tag, maar meer een container, met een eigen besturing voor diverse soorten audio. Zie ook het artikel Over HTML5 tags en containers.
<bdi>		Bedoeld voor het werken met twee tekst-richtingen tegelijkertijd, bijvoorbeeld een Nederlandse tekst die Arabische woorden bevat.
<canvas>		Real-time beeldbewerking en tekenen met behulp van scripts die draaien op de gebruikers-PC. Om dit te bereiken wordt WebGL ingezet, vaak in combinatie met JavaScript. De figuren zijn bitmap-geöriëntreerd, daardoor moet de figuur steeds opnieuw worden opgebouwd als er wordt in- of uitgezoomd. Eigenlijk is <canvas> geen "echte" tag, maar meer een container, met een eigen besturing voor diverse soorten graphics. Zie ook het artikel Over HTML5 tags en containers.
<datalist>		Hiermee geef je een lijst van mogelijke invoeren aan die in een tekstveld zou kunnen zetten. De lijst is gekoppeld (via id="abcd") aan een invoerveld: <input list="abcd".
<details>		Dit blok bevat gegevens die in principe niet zichtbaar zijn voor de bezoeker van de website. <details> bevat geldige HTML (tekst, plaatjes, video, enz.), waaronder ook een verplichte tag <summary>. De inhoud van <summary> is zichtbaar voor de bezoeker. Als de bezoeker op de summary-tekst klikt wordt de gehele inhoud van <details> zichtbaar.
<dialog>		Hiermee kun je een modal dialog maken. Zie de items Modal dialogs en Modal dialogs II: browseronafhankelijk voor meer informatie. Deze tag wordt alleen ondersteund door Edge en Chrome. In FireFox hangt het af van een instelling van de browser. Als <dialog> niet wordt ondersteund verschijnt de <dialog>-tekst in het document.
<embed>		Bedoeld voor het opnemen van een niet-HTML toepassing (plugin) in een HTML-document, bijvoorbeeld een mediaspeler. Deze tag is al sinds jaar en dag beschikbaar in veel browsers, maar heeft nooit deel uitgemaakt van de HTML 4.01-standaard. Vandaar dat deze tag wordt aangemerkt als nieuw.
<figcaption>		Bijschrift voor tekst of afbeelding die met <figure> in een document is opgenomen.
<figure>		Container voor een op zichzelf staande figuur, al of niet met een <figcaption>. De inhoud van <figure> heeft een relatie met de rest van het document. Denk aan een foto bij een artikel in de krant. Het verwijderen van de <figure>-tag verandert de betekenis van de pagina echter niet. De inhoud van <figure> is niet beperkt tot afbeeldingen. Er kan bijvoorbeeld tekst of een data-tabel in staan (eigenlijk alle geldige HTML). Zie ook <aside>.
<footer>		Definieert een voettekst. Typische data in een <footer> zijn: Copyright info, datum van de laatste wijziging van het document, link naar gebruiksvoorwaarden, contactinformatie, enz. Een HTML-document kan meerdere <footer>-tags bevatten.
<header>		Definieert een koptekst of paragraaf-kop. Typische data in een <header> zijn: Navigatie-links, Paragraaf-koppen, inleidende tekst, enz. <header>-tags mogen niet worden genest. Ze mogen niet voorkomen in <footer> en <address>.
<keygen>		Wordt gebruikt om tekst-invoer te versleutelen. Deze tag wordt niet ondersteund door Edge.
<main>		Hiermee geef je aan wat de hoofdtekst van het document is. De toepassing wordt beperkt door een aantal regels: <main> mag maar éénmaal voorkomen binnen een document. De content binnen <main> moet uniek zijn. Dat wil zeggen dat de inhoud van <main> niet geheel of gedeeltelijk mag worden herhaald in andere delen van het document, zoals een kader, een logo of navigatie. Verder mag <main> alleen voorkomen op het hoogste niveau, dus als kind van de <body>-tag. <main> mag geen kind zijn van andere blokken zoals <article>, <aside>, <footer>, <header> of <nav>.
<mark>		Met <mark> kun je stukken tekst markeren, net zoals met de bekende gele viltstift. Vreemd genoeg is er geen attribuut om de standaardkleur (geel) te veranderen. Dat doe je dus met CSS.
<menuitem>		Dit kun je gebruiken om een popup-menu te maken, zoals het bekende context-menu onder de rechter muisknop. De ondersteuning is beperkt to FireFox. Dat maakt deze tag eigenlijk onbruikbaar. Deze tag heeft de status 'deprecated' (afgeraden) en zal naar verwachting uit de HTML5-standaard verdwijnen.
<meter>		Dit lijkt op een progress-bar, maar is het niet! Er verschijnt een balkje op je scherm dat de waarde aangeeft tussen een minimum en een maximum, bijvoorbeeld de hoeveelheid gebruikte schijfruimte (zoals die te zien is in "Mijn Computer" onder Windows). Om een echte progress-bar te maken gebruik je <progress>.
<nav>		In een <nav>-blok zet je de hoofd­navigatie van je site. Het bevat bijvoorbeeld links of de JavaScript-code voor een afrolmenu.
<output>		Deze tag toont de resultaten van een berekening in een <form>. Zodra er iets in de invoervariabelen wordt gewijzigd wordt het resultaat van de berekening bijgewerkt.
<progress>		Deze tag toont de voortgang van een (langdurig) berekenings­proces. Een (grijze) balk wordt van links naar rechts gevuld met groen. De groene balk bevat de in Windows gebruikelijke animatie. Bijwerken van de progress-bar gebeurt met JavaScript.
<rp>		Met deze tag geef je aan hoe een browser moet reageren als de tag <ruby> niet wordt ondersteund. Dat kan ook voorkomen als op de PC van de bezoeker geen Oost-Aziatische fonts zijn geïnstalleerd (Voor Chinees, Japans, …). Voor westerlingen is dit meestal niet interessant. Gebruik deze tag samen met <ruby>.
<rt>		Hiermee geef je aan hoe bepaalde Oost-Aziatische karakters (Chinees, Japans, …) laten zien hoe ze moeten worden uitgesproken. Voor westerlingen is dit meestal niet interessant. Gebruik deze tag samen met <ruby>.
<ruby>		Met <ruby> kun je van Oost-Aziatische karakters (Chinees, Japans, …) laten zien hoe ze moeten worden uitgesproken. Dat doe je met behulp van <rt>. Voor westerlingen is dit meestal niet interessant. <ruby> moet worden gebruikt samen met <rp> en/of <rt>.
<section>		Hiermee maak je een verdeling in je document. Denk hierbij aan hoofdstukken, paragrafen, etc.
<source>		Specificeert de bron (filmpje, geluidsbestand) binnen <audio> en <video>. Als je meerdere bronnen opgeeft (meerdere <source>, bijvoorbeeld geluid in .wma- en in .mp3-formaat) kiest de browser de meest geschikte uit.
<summary>		Dit is het altijd zichtbare deel van een <details>-blok.
<svg>		De tag <svg> is nieuw in de HTML5-standaard. De <svg>-tag wordt door alle grote browsers ondersteund. Binnen deze tag kun je zelf in real time SVG-graphics maken. De figuren zijn vector-graphics. Dat betekend dat er kan worden in- en uitgezoomd zonder resolutieverlies. Eigenlijk is <svg> geen "echte" tag, maar meer een container, met een eigen besturing voor het maken van graphics. Zie ook het artikel Over HTML5 tags en containers.
<time>		Hiermee markeer je een tijdstip (24-uurs klok) en/of een datum (Gregoriaanse kalender), eventueel aangevuld met een tijdzone aanduiding. Het gaat hier alleen om een markering die kan worden gebruikt door gebruikers- en serversoftware, bijvoorbeeld voor het weergeven van een verjaardag op een kalender of het versturen van een herinnering. De inhoud van deze tag mag leeg zijn. De aanwezigheid van deze tag in een document is niet zichtbaar op het scherm.
<track>		Hiermee geef je aan welke taal in een video moet worden gebruikt, of welke taal de ondertiteling moet gebruiken.
<video>		Weergave van video. Browsers die HTML5 ondersteunen, hebben zelf een mediaspeler aan boord. Constructies met <OBJECT> en <EMBED> zijn in HTML5 dus niet meer nodig. Eigenlijk is <video> geen "echte" tag, maar meer een container, met een eigen besturing voor diverse soorten video. Zie ook het artikel Over HTML5 tags en containers.
<wbr>		Hiermee geef je aan waar de browser een lang woord mag afbreken. Dit is dezelfde functionaliteit als &shy;. Deze tag wordt niet ondersteund door oudere browsers. Gebruik dus altijd &shy;.

Zie ook:

• Verschillen tussen HTML 4 en HTML5 II: Verdwenen HTML 4-tags
• Verschillen tussen HTML 4 en HTML5 III: Gewijzigde tags

Behalve nieuwe tags, bevat HTML5 een aantal nieuwe (globale) attributen. Zie het item: Globale attributen in HTML5 I: Nieuw.