HTML5

HTML5 is de laatste evolutie in de standaard die HTML definieërt. De term vertegenwoordigt 2 concepten:

Het is een nieuwe versie van de programmeertaal HTML, met nieuwe elementen, attributen en gedrag.
En een grotere verzameling van technologieën die diversere en krachtigere websites en applicaties mogelijk maakt. Deze set wordt ook wel HTML5 & vrienden genoemd en vaak afgekort tot HTML5.

Ontworpen met het idee dat alle Open Web ontwikkelaars het eenvoudig moeten kunnen gebruiken. Deze referentiepagina linkt naar verschillende bronnen over HTML5 technologiën, ingedeeld in verschillende groepen op basis van hun functie.

Semantiek: zodat uw nauwkeuriger kunt beschrijven wat uw content is.
Connectiviteit: beter communiceren met de server in nieuwe en innovatieve manieren.
Offline en opslag: webpagina's data laten opslaan op lokale client-side en offline functioneren efficiënter maken.
Multimedia: video en audio op het Open Web.
2D/3D graphics en effecten: verscheidene presentatiemogelijkheden toestaan.
Prestaties en integratie: snelheidsoptimalisatie en beter gebruik van de hardware.
Toegang apparaat: rekening houdend met het gebruik van verschillende invoer- en uitvoerapparaten.
Styling: laat auteurs meer geavanceerde thema's schrijven.

SemantIeken

Secties en contouren in HTML5: Een blik op de nieuwe contouren en sectie elementen in HTML5: <section>, <article>, <nav>, <header>, <footer> en <aside>.
HTML5 audio en video gebruiken: Het <audio> en <video> element inzetten voor multimedia content.
Formulieren in HTML5: Een blik op de verbeterde webformulieren in HTML5: de beperkte validatie API, verscheidene nieuwe attributen, nieuwe waarden voor het <input> attribuut type en de nieuwe <output> element.
Nieuwe semantiek elementen: Naast secties, media en formulieren, zijn er veel meer elementen, zoals <mark>, <figure>, <figcaption>, <data>, <time>, <output>, <progress>, of <meter> en <main>, verhogen van de hoeveelheid geldige HTML5 elementen.
Verbeteringen in <iframe>: Door de attributen sandbox, seamless, en srcdoc te gebruiken, kunnen schrijvers nu precies het beveiligingsniveau bepalen en het gewenste renderen van een <iframe> element.
MathML: Staat het inzetten van wiskundige formules toe.
Introductie in HTML5: In dit artikel wordt beschreven hoe HTML5 in uw web design of web applicatie te gebruiken.
HTML5-compliant ontledingsprogramma: Dit programma, wat bytes van een html-bestand in een dom transformeerd, is uitgebreid en kan nu precies het gedrag bepalen in alle gevallen, zelfs wanneer een ongeldige HTML wordt aangeleverd. Dit zorgt voor een betere voorspelbaarheid en gemeenschappelijke verwerkingsmogelijkheid tussen HTML5-compliant browsers.

Connectiviteit

Web Sockets: Staat een permanente verbinding toe tussen webpagina, server en voor niet-HTML data wisselen.
Server-sent evenementen: Staat een server toe om events te pushen naar een client, in plaats van het klassieke paradigm waar de server alleen data verzend op verzoek van de client.
WebRTC: Deze technologie, waar RTC staat voor Real-Time Communication, staat videovergaderingen toe tussen mensen direct vanuit de browser zonder enige plug-ins of externe applicatie.

Offline & Opslag

Offline resources: applicatie cache: Firefox ondersteunt de volledige HTML5 offline resource specificatie. Anderen hebben offline resource ondersteuning op een bepaald niveau.
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 gebruiken van webapplicaties: Support for the new HTML5 File API has been added to Gecko, making it possible for web applications to access local files selected by the user. This includes support for selecting multiple files using the <input> of type file HTML element's new multiple attribute. There also is FileReader.

Multimedia

HTML5 audio en video gebruiken: Met het <audio> en <video> element kunt u multimedia-inhoud insluiten en manipuleren.
WebRTC: Deze technologie, waarbij RTC staat voor Real-Time Communication, laat toe om met andere mensen te communiceren en videovergaderen rechtstreeks in de browser te gebruiken, zonder een plug-in of externe toepassing.
De Camera API gebruiken: Laat het toe om een computer's camera te gebruiken en foto's van de camera te bewaren.
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 tutorial: Learn about the new <canvas> element and how to draw graphs and other objects 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: Laat het toe om een computer's camera te gebruiken en foto's van de camera te bewaren.
Touch events: Handlers to react to events created by a user pressing touch screens.
Using geolocation: Let browsers locate the position of the user using geolocation.
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.