path: root/files/nl/web/guide/html/html5/index.html

---
title: HTML5
slug: Web/Guide/HTML/HTML5
tags:
  - HTML
  - HTML5
  - Handleiding
  - Overzicht
  - Web
  - Webontwikkeling
translation_of: Web/Guide/HTML/HTML5
---
<p><strong>HTML5 is de nieuwste evolutie van de standaard die <a>HTML</a> definieërt. De term staat voor twee afzonderlijke concepten:</strong></p>

<ul>
 <li>
  <p style="margin-bottom: 0cm;">Een nieuwe versie van de <em>opmaaktaal</em> HTML, met nieuwe elementen, attributen en gedrag,</p>
 </li>
 <li>
  <p>en <span lang="nl-NL">een verzameling van <strong>technologieën</strong> die de ontwikkeling van diversere en krachtigere websites en applicaties mogelijk maakt. Deze verzameling wordt ook wel <em>HTML5 &amp; vrienden</em> genoemd, vaak afgekort tot <em>HTML5</em>.</span></p>
 </li>
</ul>

<p>Met het idee dat alle Open Web ontwikkelaars deze naslagpagina eenvoudig moeten kunnen gebruiken, is de informatie over de verschillende HTML5-technologiën op deze pagina ingedeeld op basis van hun functionaliteit.</p>

<ul>
 <li>
  <p style="margin-bottom: 0cm;"><em>Semantiek</em>: nauwkeuriger beschrijven van uw content.</p>
 </li>
 <li>
  <p style="margin-bottom: 0cm;"><em>Connectiviteit</em>: communiceren met de server op nieuwe en innovatieve manieren.</p>
 </li>
 <li>
  <p style="margin-bottom: 0cm;"><em>Offline en opslag</em>: webpagina's lokaal data laten opslaan en deze <em>offline</em> data efficiënt gebruiken.</p>
 </li>
 <li>
  <p style="margin-bottom: 0cm;"><em>Multimedia</em>: audio en video op het Open Web.</p>
 </li>
 <li>
  <p style="margin-bottom: 0cm;"><em>2D/3D graphics en effecten</em>: grotere variëteit aan presentatiemogelijkheden.</p>
 </li>
 <li>
  <p style="margin-bottom: 0cm;"><em>Prestaties en integratie</em>: snelheidsoptimalisatie en slim gebruik van pc hardware.</p>
 </li>
 <li>
  <p style="margin-bottom: 0cm;"><em>Toegang tot apparaten</em>: <span lang="nl-NL">het benutten van verschillende invoer- en uitvoerapparaten. </span></p>
 </li>
 <li>
  <p><em>Styling</em>: ontwerpen van geavanceerde thema's.</p>
 </li>
</ul>

<h2 class="western" id="SemantIeken" style="margin-top: 0cm; margin-bottom: 0cm; border: none; padding: 0cm; text-transform: uppercase; letter-spacing: 0.8pt; line-height: 100%;"> <img alt="" src="https://developer.mozilla.org/files/3827/HTML5_Semantics_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;"> <font face="Bebas Neue, League Gothic, Haettenschweiler, Arial Narrow, sans-serif"><font size="5"><span style="font-style: normal;"><span style="font-weight: normal;">SemantIeken</span></span></font></font></h2>

<dl>
 <dt><a>Secties en contouren in HTML5</a></dt>
 <dd>Een blik op de nieuwe elementen voor contouren en secties in HTML5: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}} en {{HTMLElement("aside")}}.</dd>
 <dt><a>HTML5 audio en video gebruiken</a></dt>
 <dd>Het inzetten van de elementen {{HTMLElement("audio")}} en {{HTMLElement("video")}} voor multimedia content.</dd>
 <dt><a>Formulieren in HTML5</a></dt>
 <dd>Een blik op de verbeterde webformulieren in HTML5: de voorwaarden validatie API, verscheidene nieuwe attributen, nieuwe waarden voor het {{HTMLElement("input")}} attribuut {{htmlattrxref("type", "input")}} en het nieuwe {{HTMLElement("output")}} element.</dd>
 <dt>Nieuwe semantische elementen</dt>
 <dd>Naast elementen voor secties, media en formulieren, zijn er een aantal nieuwe elementen, zoals {{HTMLElement("mark")}}, {{HTMLElement("figure")}}, {{HTMLElement("figcaption")}}, {{HTMLElement("data")}}, {{HTMLElement("time")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, of {{HTMLElement("meter")}} en {{HTMLElement("main")}}, waardoor het aantal <a>geldige HTML5 elementen</a> is toegenomen.</dd>
 <dt>Verbeteringen in {{HTMLElement("iframe")}}</dt>
 <dd>Door de attributen {{htmlattrxref("sandbox", "iframe")}}, {{htmlattrxref("seamless", "iframe")}}, en {{htmlattrxref("srcdoc", "iframe")}} te gebruiken, kunnen ontwikkelaars nu precies het beveiligingsniveau en de gewenste weergave van een {{HTMLElement("iframe")}} element bepalen.</dd>
 <dt><a>MathML</a></dt>
 <dd>Hiermee kunt u wiskundige formules direct insluiten.</dd>
 <dt><a>Introductie tot HTML5</a></dt>
 <dd><span lang="nl-NL">In dit artikel wordt beschreven hoe u aan de browser aangeeft dat u HTML5 gebruikt bij uw web design of web applicatie</span>.</dd>
 <dt><a>HTML5-parser</a></dt>
 <dd style="margin-bottom: 0.5cm;">Het programma dat een HTML-bestand omzet naar een Document Object Model (DOM) is uitgebreid. De  weergave van een pagina wordt nu in alle gevallen exact gedefinieerd, zelfs wanneer er ongeldige HTML wordt aangeleverd. Dit zorgt voor een betere voorspelbaarheid en dat browsers die HTML5 ondersteunen op dezelfde manier omgaan met HTML.</dd>
</dl>

<div class="cleared row topicpage-table">
<h2 id="Connectiviteit" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3839/HTML5_Connectivity_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Connectiviteit</h2>

<dl>
 <dt><a href="/en-US/docs/WebSockets" title="WebSockets">Web Sockets</a></dt>
 <dd>Het opzetten van een blijvende verbinding tussen de webpagina en de server, en het uitwisselen van niet-HTML data via deze verbinding.</dd>
 <dt><a href="/en-US/docs/Server-sent_events/Using_server-sent_events" title="Server-sent_events/Using_server-sent_events">Door de server verstuurde gebeurtenissen</a></dt>
 <dd>Staat een server toe om gebeurtenissen naar een client te sturen, in plaats van het traditionele paradigma waarbij de server alleen data verzendt op verzoek van de <em>client</em>.</dd>
 <dt><a href="/en-US/docs/WebRTC" title="WebRTC">WebRTC</a></dt>
 <dd>Met deze technologie, waar RTC staat voor Real-Time Communication, kunnen videovergaderingen direct vanuit de browser worden gehouden zonder plug-ins of externe applicaties.</dd>
</dl>

<h2 id="Offline_Opslag" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3833/HTML5_Offline_Storage_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Offline &amp; Opslag</h2>

<dl>
 <dt><a href="/en-US/docs/HTML/Using_the_application_cache" title="Offline_resources_in_Firefox">Offline resources: applicatie cache</a></dt>
 <dd>Firefox ondersteunt de HTML5-specificatie voor het <em>offline</em> opslaan van hulpmiddelen volledig. Andere browsers hebben veelal een gedeeltelijke ondersteuning.</dd>
 <dt><a href="/en-US/docs/Online_and_offline_events" title="Online_and_offline_events">Online and offline evenementen</a></dt>
 <dd>Firefox 3 ondersteunt WHATWG online en offline events, die applicaties of extensies laat detecteren of er een actieve internetverbinding is of niet en wanneer een verbinding op en neer gaat.</dd>
 <dt><a href="/en-US/docs/DOM/Storage" title="DOM/Storage">WHATWG client-side sessie en persistent storage (aka DOM storage)</a></dt>
 <dd>Client-side sessie en persistent storage staan webapplicaties meer gestructureerde data-opslag toe aan de client-zijde.</dd>
 <dt><a href="/en-US/docs/IndexedDB" title="IndexedDB">IndexedDB</a></dt>
 <dd>IndexedDB is een webstandaard voor de opslag van grote hoeveelheden gestructureerde data in de browser en voor hoge zoekprestaties in deze data door gebruik van indexen.</dd>
 <dt><a href="/en-US/docs/Using_files_from_web_applications" title="Using_files_from_web_applications">Bestanden van webapplicaties gebruiken</a></dt>
 <dd>Ondersteuning van de nieuwe HTML5 File API is toegevoegd aan Gecko, waardoor webapplicaties toegang krijgen tot lokale, door de gebruiker geselecteerde bestanden. Hieronder valt de ondersteuning van het selecteren van meerdere bestanden tegelijk met het nieuwe attribuut <a href="/en-US/docs/HTML/Element/Input#attr-multiple" title="HTML/Element/input#attr-multiple"><strong>multiple</strong></a> van het element <span style="font-family: monospace;">{{HTMLElement("input")}}</span> met  <a href="/en-US/docs/HTML/Element/Input#attr-type" title="HTML/Element/input#attr-type"><strong>type</strong></a> <span style="font-family: courier new;">file</span>. Ook bestaat er de <a href="/en-US/docs/DOM/FileReader" title="DOM/FileReader"><code>FileReader</code></a>.</dd>
</dl>

<h2 id="Multimedia" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3835/HTML5_Multimedia_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Multimedia</h2>

<dl>
 <dt><a href="/en-US/docs/Using_HTML5_audio_and_video" title="Using_audio_and_video_in_Firefox">HTML5 audio en video gebruiken</a></dt>
 <dd>Met de elementen {{HTMLElement("audio")}} en {{HTMLElement("video")}} kunt u multimedia-inhoud insluiten en manipuleren.</dd>
 <dt><a href="/en-US/docs/WebRTC" title="WebRTC">WebRTC</a></dt>
 <dd>Met deze technologie, waar RTC staat voor Real-Time Communication, kunnen videovergaderingen direct vanuit de browser worden gehouden zonder plug-ins of externe applicaties..</dd>
 <dt><a href="/en-US/docs/DOM/Using_the_Camera_API" title="DOM/Using_the_Camera_API">Gebruik van de Camera API</a></dt>
 <dd>Hiermee kunnen beelden die met de camera van de computer zijn gemaakt worden gebruikt, bewerkt en opgeslagen.</dd>
 <dt>Track en WebVTT</dt>
 <dd>Het {{HTMLElement("track")}} element laat toe om ondertitels en hoofdstukken te gebruiken. <a href="/en-US/docs/HTML/WebVTT" title="HTML/WebVTT">WebVTT</a> is een standaard om tekst te volgen.</dd>
</dl>

<h2 id="3D_graphics_AND_effects" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3841/HTML5_3D_Effects_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">3D graphics AND effects</h2>

<dl>
 <dt><a href="/en-US/docs/Canvas_tutorial" title="Canvas tutorial">Canvas instructie</a></dt>
 <dd>Leer hoe u met het nieuwe element <code>{{HTMLElement("canvas")}}</code> grafieken en andere visuele objecten kunt tekenen in Firefox.</dd>
 <dt><a href="/en-US/docs/Drawing_text_using_a_canvas" title="Drawing_text_using_a_canvas">HTML5 Text API voor elementen</a></dt>
 <dd>De HTML5 Text API wordt nu ondersteund door {{HTMLElement("canvas")}} elementen.</dd>
 <dt><a href="/en-US/docs/WebGL" title="WebGL">WebGL</a></dt>
 <dd>WebGL brings 3D graphics to the Web by introducing an API that closely conforms to OpenGL ES 2.0 that can be used in HTML5 {{HTMLElement("canvas")}} elements.</dd>
 <dt><a href="/en-US/docs/SVG" title="SVG">SVG</a></dt>
 <dd>An XML-based format of vectorial images that can directly be embedded in the HTML.</dd>
</dl>

<div class="section">
<h2 id="Performance_and_Integration" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3831/HTML5_Performance_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Performance and Integration</h2>

<dl>
 <dt>Webwerkers</dt>
 <dt></dt>
 <dd>Staat het delegeren van JavaScript evaluatie toe aan achtergrondthreads, waardoor deze activiteiten kunnen voorkomen dat interactieve gebeurtenissen worden vertraagd.</dd>
 <dt><code><a href="/en-US/docs/DOM/XMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a></code> level 2</dt>
 <dd>Allows fetching asynchronously some parts of the page, allowing it to display dynamic content, varying according to the time and user actions. This is the technology behind <a href="/en-US/docs/AJAX" title="AJAX">Ajax</a>.</dd>
 <dt>JIT-compiling JavaScript engines</dt>
 <dd>The new generation of JavaScript engines is much more powerful, leading to greater performance.</dd>
 <dt><a href="https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history" title="DOM/Manipulating_the_browser_history">History API</a></dt>
 <dd>Laat toe om de browsegeschiedenis te manipuleren. Dit is vooral nuttig voor pagina's die interactief nieuwe informatie laden.</dd>
 <dt><a href="/en-US/docs/HTML/Content_Editable" title="HTML/Content Editable">Het contentEditable Attribuut: Verander uw website in een wiki!</a></dt>
 <dd>HTML5 heeft het contentEditable attribuut gestandaardiseerd. Leer meer over deze functie.</dd>
 <dt><a href="/en-US/docs/DragDrop/Drag_and_Drop" title="DragDrop/Drag_and_Drop">Drag and drop</a></dt>
 <dd>The HTML5 drag and drop API allows support for dragging and dropping items within and between web sites. This also provides a simpler API for use by extensions and Mozilla-based applications.</dd>
 <dt><a href="/en-US/docs/Focus_management_in_HTML" title="Focus_management_in_HTML">Focus management in HTML</a></dt>
 <dd>The new HTML5 <code>activeElement</code> and <code>hasFocus</code> attributes are supported.</dd>
 <dt><a href="/en-US/docs/Web-based_protocol_handlers" title="Web-based_protocol_handlers">Web-based protocol handlers</a></dt>
 <dd>You can now register web applications as protocol handlers using the <code>navigator.registerProtocolHandler()</code> method.</dd>
 <dt><a href="/en-US/docs/Web/API/Window/requestAnimationFrame" style="font-weight: bold;" title="Web-based_protocol_handlers">requestAnimationFrame</a></dt>
 <dd>Allows control of animations rendering to obtain optimal performance.</dd>
 <dt><a href="/en-US/docs/DOM/Using_full-screen_mode" title="DOM/Using_full-screen_mode">Fullscreen API</a></dt>
 <dd>Controls the usage of the whole screen for a Web page or application, without the browser UI displayed.</dd>
 <dt><a href="/en-US/docs/API/Pointer_Lock_API" title="API/Pointer_Lock_API">Pointer Lock API</a></dt>
 <dd>Allows locking the pointer to the content, so games and similar applications don't lose focus when the pointer reaches the window limit.</dd>
 <dt><a href="/en-US/docs/Online_and_offline_events" title="Online_and_offline_events">Online and offline events</a></dt>
 <dd>In order to build a good offline-capable web application, you need to know when your application is actually offline. Incidentally, you also need to know when your application has returned to an online status again.</dd>
</dl>

<h2 id="Device_TOEGANG" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3837/HTML5_Device_Access_512.png" style="height: 66px; padding-right: 0.5em; vertical-align: middle; width: 77px;">Device TOEGANG</h2>

<dl>
 <dt></dt>
 <dt><a href="/en-US/docs/DOM/Using_the_Camera_API" title="DOM/Using_the_Camera_API">De Camera API gebruiken</a></dt>
 <dd>Hiermee kunnen beelden die met de camera van de computer zijn gemaakt worden gebruikt, bewerkt en opgeslagen.</dd>
 <dt><a href="/en-US/docs/DOM/Touch_events" title="DOM/Touch_events">Touch events</a></dt>
 <dd>Handlers to react to events created by a user pressing touch screens.</dd>
 <dt><a href="/en-US/docs/Using_geolocation" title="Using geolocation">Geolocatie gebruiken</a></dt>
 <dd>Laat broweser de locatie van de gebruiker bepalen door middel van geolocatie.</dd>
 <dt><a href="/en-US/docs/Detecting_device_orientation" title="Detecting_device_orientation">Detecting device orientation</a></dt>
 <dd>Get the information when the device on which the browser runs changes orientation. This can be used as an input device (e.g., to make games that react to the position of the device) or to adapt the layout of a page to the orientation of the screen (portrait or landscape).</dd>
 <dt><a href="/en-US/docs/API/Pointer_Lock_API" title="API/Pointer_Lock_API">Pointer Lock API</a></dt>
 <dd>Allows locking the pointer to the content, so games and similar application don't lose focus when the pointer reaches the window limit.</dd>
</dl>

<h2 id="StylIng" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3829/HTML5_Styling_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">StylIng</h2>

<p id="CSS_has_been_extended_to_be_able_to_style_elements_in_a_much_more_complex_way._This_is_often_referred_as_CSS3_though_CSS_is_not_a_monolithic_specification_any_more_and_the_different_modules_are_not_all_at_level_3_some_are_at_level_1_and_others_at_level_4_with_all_the_intermediate_levels_covered."><a href="/en-US/docs/CSS" title="CSS">CSS</a> has been extended to be able to style elements in a much more complex way. This is often referred as <a href="/en-US/docs/CSS/CSS3" title="CSS/CSS3">CSS3</a>, though CSS is not a monolithic specification any more and the different modules are not all at level 3: some are at level 1 and others at level 4, with all the intermediate levels covered.</p>

<dl>
 <dt>New background styling features</dt>
 <dd>It is now possible to put a shadow to a box, using {{cssxref("box-shadow")}} and <a href="/en-US/docs/CSS/Multiple_backgrounds" title="CSS/Multiple_backgrounds">multiple backgrounds</a> can be set.</dd>
 <dt>More fancy borders</dt>
 <dd>Not only it is now possible to use images to style borders, using {{cssxref("border-image")}} and its associated longhand properties, but rounded borders are supported via the {{cssxref("border-radius")}} property.</dd>
 <dt>Animating your style</dt>
 <dd>Using <a href="/en-US/docs/CSS/Using_CSS_transitions" title="CSS/Using_CSS_transitions">CSS Transitions</a> to animate between different states or using <a href="/en-US/docs/CSS/Using_CSS_animations" title="CSS/Using_CSS_animations">CSS Animations</a> to animate parts of the page without a triggering event, you can now control mobile elements on your page.</dd>
 <dt>Typography improvement</dt>
 <dd>Authors have better control to reach better typography. They can control {{cssxref("text-overflow")}} and <a href="/en-US/docs/CSS/hyphens" title="CSS/hyphens">hyphenation</a>, but also can add a <a href="/en-US/docs/CSS/text-shadow" title="CSS/text-shadow">shadow</a> to it or control more precisely its <a href="/en-US/docs/CSS/text-decoration" title="SVG/Attribute/text-decoration">decorations</a>. Custom typefaces can be downloaded and applied thanks to the new {{cssxref("@font-face")}} at-rule.</dd>
 <dt>New presentational layouts</dt>
 <dd>In order to improve the flexibility of designs, two new layouts have been added: the <a href="/en-US/docs/CSS/Using_CSS_multi-column_layouts" title="CSS/Using_CSS_multi-column_layouts">CSS multi-column layouts</a> and <a href="/en-US/docs/CSS/Flexbox" title="CSS/Flexbox">CSS flexible box layout</a>.</dd>
</dl>
</div>
</div>