When combined, these technologies form the core of modern user experience on the web. Modern browsers support many HTML5 features for developers and web designers to build a common experience across devices.
HTML5 is huge! Formally defined by an international standards body known as the World Wide Web Consortium (W3C), HTML5 consists of more than 100 specifications that relate to the next generation of Web technologies.
Technologies include new HTML tags, Canvas, Scalable Vector Graphics (SVG), Audio and Video, Geolocation, Web Storage and many new CSS3 modules.
On 28 October 2014, the specification for the core HTML5 was released as a W3C Recommendation, which means that the specification process is complete. In this version, new features are introduced to help Web application authors, new elements are introduced based on research into prevailing authoring practices, and special attention has been given to defining clear conformance criteria for user agents in an effort to improve interoperability.
Other parts of the specification are at other stages. But what matters is to developers… does it work?
To get a good idea of what features are available for which browsers and devices, see CanIUse.com.
When I was learning, I found snippets to be helpful, but I also wanted the context of how and where the feature fits into a project. That’s the goal of the code that is the DevDays GitHub repository.
- Changes between HTML4 and HTML5. What are the key changes between HTML4 and HTML5?
- Semantic Tags. The new tags (and the old ones) available in HTML5.
- CSS3 Introduction. Quick introduction to the features of Cascading Style Sheets (CSS)
- CSS Positioning. How all those nagging positioning attributes work to place your elements on the page.
- CSS3, JQuery Selectors. How to use selectors with both CSS3 and jQuery.
- Boilerplates. Getting started using a baseline for your Web page.
- <Custom Fonts. How to embed custom fonts in your Webpage.
- CSS3: Which Style Wins. How your browser chooses which style to use.
- Modernizr, Polyfills, and YepNope. Provide backward compatibility to your pages.
- HTML5 Form Tags. New tags help you build forms for user input.
- WebSocket on the Client. WebSocket standard simplifies much of the complexity around bi-directional web communication and connection management.
- WebSocket on the Server. What to do on the server to facilitate WebSocket.
- SignalR. Introduction to SignalR, which offers a simple and clean API to write real time web applications where the server needs to continuously push data to clients.
- Web Workers. How you can allow running scripts in the background without blocking or freezing the user interface.
- Getting Started with SVG. Introduction to SVG, what it is, how it works.
- SVG Shapes, Path, Text, Viewport, Fonts. Basic introduction to how you can build basic shapes and text in SVG.
- SVG Eventing. How your users can interact with SVG.
- SVG Clipping and Gradients. How to use clipping and gradients in your SVG.
- SVG Filter Effects & Animation. Introduction to using filter effects and animation for SVG.
- Local Storage. Store data on the client.
- AppCache for Offline Apps. Provide a good experience for users even when they are not online.
- Video, Audio Multimedia. Incorporate video and audio using HTML5 standards with fallbacks to Flash.
- Custom Controls. Create your own controls to play video and audio.
- Captioning for Video. How to provide captions for your multimedia.
- Asynchronous Script Execution. Use the async attribute in HTML to run your scripts asynchronously.
- Geolocation. Find the user location (or other locations using longitude and latitude).
- Introduction to Mapping. Learn how to incorporate maps in your page using Bing Maps and Google Maps.
- Drag and Drop. How to drag and drop elements on the client.
- Uploading Files Using Drag and Drop. How to upload a file from the HTML client to the server using ASP.NET with links to other servers.
- Messaging. Provides you a way to communication between web applications (and iFrames).