What's new in HTML 5 1

HTML5

HTML5 is the latest evolution of the web standard that defines HTML. The term represents two different concepts:

  • It's a new version of the language HTML, with new elements, attributes and behaviors,
  • and a larger collection of technologies that enable more diverse and powerful websites and applications. This combination sometimes becomes HTML5 & friends called and often to HTML5 abbreviated.

This reference page is designed to be of use by any open web developer and links numerous resources across HTML5 technologies, grouped into several categories based on their role.

  • semantics: Allows to describe more precisely what the content is.
  • Connectivity: Enables new and innovative ways to communicate with the server.
  • Offline & storage: Allows websites to store data locally on the client side and work more efficiently offline.
  • multimedia: Makes video and audio first-class citizens of the open web.
  • 2D / 3D graphics & effects: Allows a much more complex amount of presentation options.
  • Performance & integration: Offers greater speed optimizations and better access to computer hardware.
  • Device access: Allows the use of a wide variety of input and output devices.
  • styling: Lets authors write more sophisticated designs.
Outlines and sections in HTML5
A look at the new structure and section elements in HTML5:,,,,, and
(en-US).
Use HTML5 audio and video
The
Forms in HTML5
A look at improvements to forms in HTML5: the constraint validation API (Review of value restrictions), several new attributes, new values ​​for the attribute and the new (en-US) element.
New semantic elements
In addition to section, media and form elements, a number of new elements such as (en-US),
(en-US),
(en-US),,, ( en-US), or (en-US), the amount of valid HTML5 elements.
Improvement at
Using the, and attributes, authors can now specify the security level and the desired rendering of elements.
MathML
Allows direct integration of mathematical formulas.
Introduction to HTML5
This article introduces the use of HTML5 for your web design or web application.
HTML5 compliant parser
The parser, which generates a DOM from the bytes of an HTML document, has been expanded and now precisely defines the behavior in all cases, even for invalid HTML. This results in much greater predictability and collaboration between HTML5-compliant browsers.

Connectivity

Web sockets
Allows to create a permanent connection between the page and the server and to exchange non-HTML data about it.
Server-sent events
Allows the server to send events directly to the client instead of just being able to send data in response to a request from the client, as is the case with the classic model.
WebRTC
This technology, where RTC stands for real-time communication (Real-time communication), allows you to connect with others and control video conferences directly from the browser without the need for a plug-in or external program.

Offline & storage

Offline resources: the application cache
Firefox fully supports the HTML5 offline resource Specification. Most of the others offer varying support for offline resources.
Online and offline events
Firefox 3 supports the WHATWG online and offline events, which let applications and extensions recognize whether or not there is an active Internet connection and whether a connection is being established or terminated.
WHATWG client-side session and persistent storage (also known as DOM storage)
Client-side session and persistent storage allow web applications to store structured data on the user side.
IndexedDB
Is a web standard for storing large amounts of structured data in the browser and for high-performance searching of this data using indexes.
Use files from web applications
Support for the new HTML5 file API has been added to Gecko, which allows web applications to access user-selected local files. That includes support for selecting multiple files over the new one multiple Attribute of elements of the Typefile. There is also .

multimedia

Use HTML5 audio and video
The
WebRTC
This technology, where RTC stands for real-time communication (Real-time communication), allows you to connect with others and control video conferences directly from the browser without the need for a plug-in or external program.
Use the Camera API
Allows the use, manipulation and saving of images from the computer camera.
Subtitle and WebVTT
The (en-US) element allows subtitles and chapters. WebVTT is a text title format.

3D, GRAPHICS & EFFECTS

Canvas tutorial
Learn more about the new element and how it can be used to draw diagrams and other objects in Firefox.
HTML5 text API for elements
Elements now support the HTML5 Text API.
WebGL
WebGL brings 3D graphics to the web by introducing an API based on OpenGL ES 2.0, which can be used in HTML5 elements.
SVG
An XML-based format of vector images that can be embedded directly into HTML.
 

Performance & integration

Web worker
Allows the execution of JavaScript to be delegated to background threads so that these activities do not slow down interactive events.
Level 2
Allows some parts of the page to be loaded asynchronously so that dynamic content can be shown depending on the time and behavior of the user. That's the technology behind Ajax.
JIT compiling JavaScript engines
The new generation of JavaScript engines are much more powerful, which leads to significantly higher performance.
History API
Allows manipulation of the browser history. This is particularly useful for pages that load new information interactively.
The contentEditable attribute: turn your website into a wiki!
The contentEditable attribute was standardized in HTML5. Learn more about this feature.
Drag and drop
The HTML5 Drag and Drop API allows support for dragging and dropping objects within and between web pages. There is also a simpler API for use in extensions and Mozilla-based applications.
Focus control in HTML
The new HTML5 and attributes are supported.
Web based protocol handler
You can now register web applications as protocol handlers with the method.
Allows you to control the rendering of animations for optimal performance.
Full screen API
Controls the use of the entire screen for a website or application without displaying the browser elements.
Pointer Lock API
Allows the pointer to be limited to the area of ​​the content so that games and similar applications do not lose focus when the pointer reaches the window limits.
Online and offline events
To develop a good offline-capable web application, you need to know when your application is actually offline. You should also know when your application will be back online.

Device access

Use the camera API
Allows the use, manipulation and saving of images from the computer camera.
Touch events
Processing of events triggered by tapping on touchscreens.
Use geolocation
Lets the browser find out the position of the user using geolocation.
Determine device orientation
Allows you to find out when the browser device changes orientation. This can be used as an input device (e.g. to develop games that react to the orientation of the device) or to adapt the layout of one side to the orientation of the screen (portrait or landscape).
Pointer Lock API
Allows the pointer to be limited to the area of ​​the content so that games and similar applications do not lose focus when the pointer reaches the window limits.

styling

CSS has been extended to allow elements to be decorated in much more complex ways. This is often referred to as CSS3, although CSS is no longer a monolithic specification and the different modules are not all at level 3: some are at level 1 and others at level 4, and all levels in between are represented.

New features for backgrounds
It is now possible to cast boxes over a shadow and to set multiple backgrounds.
Fancier edges
Now it is not only possible to decorate borders with pictures above and associated written out properties, but also round borders are supported via the property.
Make styles animatable
With CSS transitions to animate between different states, or CSS animations to animate parts of the page without a triggering event, you can now control mobile elements of your page.
Typography improvements
Authors have more control to achieve better typography. You can control text overflow and hyphenation, but you can also apply shadows and control its decorations more precisely. Custom fonts can be downloaded and applied through the new (en-US) at rule.
New presentation layouts
To improve the flexibility of designs, two new layouts have been added: the CSS multi-column layout and the CSS flexible box layout.