nieuwe elementen in HTML5

nieuwe elementen in HTML5

Hieronder worden de nieuwe elementen van HTML5 en hun beschrijvingen opgesomd.

nieuwe semantische/structuur-elementen

De nieuwe elementen van HTML5 kunnen een betere documentstructuur opbouwen:

Tag Beschrijving
<article> definieer een artikel binnen het document.
<aside> definieer inhoud buiten de pagina.
<bdi> definieer een tekstrichting die anders is dan de overige tekst.
<details> definieer extra details die de gebruiker kan bekijken of verbergen.
<dialog> definieer een dialoogvenster of venster.
<figcaption> definieer de titel van het <figure> element.
<figure> definieer zelfstandige inhoud, zoals illustraties, grafieken, foto's, code-lijsten, enz.
<footer> definieer de voet van een document of sectie.
<header> definieer de kop van een document of sectie.
<main> definieer de hoofdinhoud van het document.
<mark> definieer belangrijk of benadrukt materiaal.
<menuitem> definieer de commando's/keuzepunten die de gebruiker kan oproepen via een pop-upmenu.
<meter> definieer een schaalmaat (schaal) binnen een bekend bereik.
<nav> definieer een navigatielink binnen het document.
<progress> definieer de voortgang van een taak.
<rp> definieer wat wordt weergegeven in browsers die ruby-commentaar niet ondersteunen.
<rt> definieer de uitleg/uittoon van een karakter (voor Oost-Aziatische lettertypen).
<ruby> definieer een ruby-commentaar (voor Oost-Aziatische lettertypen).
<section> definieer een sectie in het document.
<summary> definieer de zichtbare titel van het <details> element.
<time> definieer datum/tijd.
<wbr> definieer mogelijke regeleindeling (line-break).

Lees meer over HTML5 semantiekinhoud.

nieuwe formulierelementen

Tag Beschrijving
<datalist> definieer de vooraf ingestelde opties van de invoercontrole
<keygen> definieer het veld van de sleutelgenerator (voor formulieren).
<output> definieer het berekende resultaat.

Lees meer over HTML Form Elementsnieuwe, oude en oude elementen.

nieuwe invoertype

nieuwe invoertype nieuwe invoer-eigenschappen
  • kleur
  • datum
  • datumtijd
  • datumtijd-lokaal
  • email
  • maand
  • getal
  • bereik
  • zoek
  • tel
  • tijd
  • url
  • week
  • autovolgorde
  • autofocus
  • form
  • formactie
  • formenctype
  • formmethode
  • formgeenvalideer
  • formdoel
  • hoogte en breedte
  • lijst
  • min en max
  • meerdere
  • patroon (regexp)
  • placeholder
  • verplicht
  • stap

Leren HTML Input Typenvan alle nieuwe en oude invoertypen.

Leren HTML Input Attributesvan alle invoereigenschappen.

HTML5 - Nieuwe eigenschapsyntaxis

HTML5 staat vier verschillende eigenschapsyntaxis toe.

Dit voorbeeld demonstreert de verschillende syntaxis die in het <input>-tag wordt gebruikt:

Tag Beschrijving
Leeg <input type="text" value="Bill Gates" disabled>
Geen aanhalingstekens <input type="text" value=Bill>
Dubbele aanhalingstekens <input type="text" value="Bill Gates">
Enkele aanhalingstekens <input type="text" value='Bill Gates'>

In HTML5 kan mogelijk alle vier grammatica's worden gebruikt, afhankelijk van de vereisten van de eigenschappen.

HTML5 Afbeelding

Tag Beschrijving
<canvas> Definieer het tekenen van afbeeldingen met JavaScript.
<svg> Definieer het tekenen van afbeeldingen met SVG.

Lees meer over HTML5 Canvas inhoud.

Lees meer over HTML5 SVG inhoud.

Nieuwe media-elementen

Tag Beschrijving
<audio> Definieer geluid- of muziekinhoud.
<embed> Definieer de container van externe toepassingen (bijvoorbeeld plugins).
<source> Definieer de bron van <video> en <audio>.
<track> Definieer de sporen van <video> en <audio>.
<video> Definieer video- of filminhoud.

Lees meer over HTML5 Videoinhoud.

Lees meer over HTML5 Audioinhoud.