HTML5

HTML5 is de nieuwste evolutie van de standaard die HTML definieërt. De term staat voor twee afzonderlijke concepten:

Een nieuwe versie van de opmaaktaal HTML, met nieuwe elementen, attributen en gedrag,
en een verzameling van technologieën die de ontwikkeling van diversere en krachtigere websites en applicaties mogelijk maakt. Deze verzameling wordt ook wel HTML5 & vrienden genoemd, vaak afgekort tot HTML5.

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.

Semantiek: nauwkeuriger beschrijven van uw content.
Connectiviteit: communiceren met de server op nieuwe en innovatieve manieren.
Offline en opslag: webpagina's lokaal data laten opslaan en deze offline data efficiënt gebruiken.
Multimedia: audio en video op het Open Web.
2D/3D graphics en effecten: grotere variëteit aan presentatiemogelijkheden.
Prestaties en integratie: snelheidsoptimalisatie en slim gebruik van pc hardware.
Toegang tot apparaten: het benutten van verschillende invoer- en uitvoerapparaten.
Styling: ontwerpen van geavanceerde thema's.

SemantIeken

Secties en contouren in HTML5: Een blik op de nieuwe elementen voor contouren en secties in HTML5: <section>, <article>, <nav>, <header>, <footer> en <aside>.
HTML5 audio en video gebruiken: Het inzetten van de elementen <audio> en <video> voor multimedia content.
Formulieren in HTML5: Een blik op de verbeterde webformulieren in HTML5: de voorwaarden validatie API, verscheidene nieuwe attributen, nieuwe waarden voor het <input> attribuut type en het nieuwe <output> element.
Nieuwe semantische elementen: Naast elementen voor secties, media en formulieren, zijn er een aantal nieuwe elementen, zoals <mark>, <figure>, <figcaption>, <data>, <time>, <output>, <progress>, of <meter> en <main>, waardoor het aantal geldige HTML5 elementen is toegenomen.
Verbeteringen in <iframe>: Door de attributen sandbox, seamless, en srcdoc te gebruiken, kunnen ontwikkelaars nu precies het beveiligingsniveau en de gewenste weergave van een <iframe> element bepalen.
MathML: Hiermee kunt u wiskundige formules direct insluiten.
Introductie tot HTML5: In dit artikel wordt beschreven hoe u aan de browser aangeeft dat u HTML5 gebruikt bij uw web design of web applicatie.
HTML5-parser: 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.

Connectiviteit

Web Sockets: Het opzetten van een blijvende verbinding tussen de webpagina en de server, en het uitwisselen van niet-HTML data via deze verbinding.
Door de server verstuurde gebeurtenissen: 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 client.
WebRTC: Met deze technologie, waar RTC staat voor Real-Time Communication, kunnen videovergaderingen direct vanuit de browser worden gehouden zonder plug-ins of externe applicaties.

Offline & Opslag

Offline resources: applicatie cache: Firefox ondersteunt de HTML5-specificatie voor het offline opslaan van hulpmiddelen volledig. Andere browsers hebben veelal een gedeeltelijke ondersteuning.
Online and offline evenementen: 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.
WHATWG client-side sessie en persistent storage (aka DOM storage): Client-side sessie en persistent storage staan webapplicaties meer gestructureerde data-opslag toe aan de client-zijde.
IndexedDB: 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.
Bestanden van webapplicaties gebruiken: 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 multiple van het element <input> met type file. Ook bestaat er de FileReader.

Multimedia

HTML5 audio en video gebruiken: Met de elementen <audio> en <video> kunt u multimedia-inhoud insluiten en manipuleren.
WebRTC: Met deze technologie, waar RTC staat voor Real-Time Communication, kunnen videovergaderingen direct vanuit de browser worden gehouden zonder plug-ins of externe applicaties..
Gebruik van de Camera API: Hiermee kunnen beelden die met de camera van de computer zijn gemaakt worden gebruikt, bewerkt en opgeslagen.
Track en WebVTT: Het <track> element laat toe om ondertitels en hoofdstukken te gebruiken. WebVTT is een standaard om tekst te volgen.

3D graphics AND effects

Canvas instructie: Leer hoe u met het nieuwe element <canvas> grafieken en andere visuele objecten kunt tekenen in Firefox.
HTML5 Text API voor elementen: De HTML5 Text API wordt nu ondersteund door <canvas> elementen.
WebGL: 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 <canvas> elements.
SVG: An XML-based format of vectorial images that can directly be embedded in the HTML.

Performance and Integration

Web Workers: Allows delegation of JavaScript evaluation to background threads, allowing these activities to prevent slowing down interactive events.
XMLHttpRequest level 2: 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 Ajax.
JIT-compiling JavaScript engines: The new generation of JavaScript engines is much more powerful, leading to greater performance.
History API: Laat toe om de browsegeschiedenis te manipuleren. Dit is vooral nuttig voor pagina's die interactief nieuwe informatie laden.
Het contentEditable Attribuut: Verander uw website in een wiki!: HTML5 heeft het contentEditable attribuut gestandaardiseerd. Leer meer over deze functie.
Drag and drop: 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.
Focus management in HTML: The new HTML5 activeElement and hasFocus attributes are supported.
Web-based protocol handlers: You can now register web applications as protocol handlers using the navigator.registerProtocolHandler() method.
requestAnimationFrame: Allows control of animations rendering to obtain optimal performance.
Fullscreen API: Controls the usage of the whole screen for a Web page or application, without the browser UI displayed.
Pointer Lock API: Allows locking the pointer to the content, so games and similar applications don't lose focus when the pointer reaches the window limit.
Online and offline events: 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.

Device TOEGANG


De Camera API gebruiken: Hiermee kunnen beelden die met de camera van de computer zijn gemaakt worden gebruikt, bewerkt en opgeslagen.
Touch events: Handlers to react to events created by a user pressing touch screens.
Geolocatie gebruiken: Laat broweser de locatie van de gebruiker bepalen door middel van geolocatie.
Detecting device orientation: 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).
Pointer Lock API: Allows locking the pointer to the content, so games and similar application don't lose focus when the pointer reaches the window limit.

StylIng

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.

New background styling features: It is now possible to put a shadow to a box, using box-shadow and multiple backgrounds can be set.
More fancy borders: Not only it is now possible to use images to style borders, using border-image and its associated longhand properties, but rounded borders are supported via the border-radius property.
Animating your style: Using CSS Transitions to animate between different states or using CSS Animations to animate parts of the page without a triggering event, you can now control mobile elements on your page.
Typography improvement: Authors have better control to reach better typography. They can control text-overflow and hyphenation, but also can add a shadow to it or control more precisely its decorations. Custom typefaces can be downloaded and applied thanks to the new @font-face at-rule.
New presentational layouts: In order to improve the flexibility of designs, two new layouts have been added: the CSS multi-column layouts and CSS flexible box layout.