Skip to content
51

Awesome HTML5

:memo: A curated list of awesome HTML5 resources

2.8k stars259 forks182 entriesLast push Sep 26, 2023 (3 years ago)License MIT

This page lists names, links and short descriptions. The original list on GitHub is the source and belongs to its authors.

Articles and standards

HTML 5.3

Current HTML5 spec

Progressive enhancement

The extensible web manifesto

Differences between HTML5 and HTML4 from W3C

Multimedia capabilities >Audio

Getting started with the Web Audio API

Web Audio API at MDN

Making a Guitar Tuner with HTML5

Audio visualisation with the Web Audio API and React

Multimedia capabilities >Media Capture

Capturing Audio & Video in HTML5

Using the media capture API

Multimedia capabilities >Picture in Picture

Chrome's new Picture in Picture API

Multimedia capabilities >Speech Synthesis

Intro to the HTML5 Speech Synthesis API

Another useful intro

Multimedia capabilities >Voice Recognition

Web speech API demo

Using the Web Speech API

Experimenting with the Web Speech API

Free voice recognition library (annyang)

Multimedia capabilities >Virtual Reality

Firefox Reality now available

Multimedia capabilities >Web animations

Intro to web animations

When to Use the Web Animations API

Elements >Canvas

Brief description from W3 Schools

Tutorial from MDN

This tutorial describes how to use the element to draw 2D graphics, starting with the basics. The examples provided should give you some clear ideas what you can do with canvas and will provide code snippets that may get you started in building your own content.

In 2 lists

Various Tutorials

Cheat Sheet

Elements >Head

A list of things that go in your pages' HEAD element

Elements >Sectioning

How to Use The HTML5 Sectioning Elements

Elements >Media Elements

audio tag from W3Schools

video tag from W3 Schools

Tutorial from MDN

Capturing audio and video in HTML5

Brief description from W3 Schools

Brief description from W3 Schools

Brief description from W3 Schools

Elements >Forms

Changes to forms in HTML5 from MDN

HTML Forms

Elements >Details

How to Use the Details and Summary Elements

Details element polyfill

Elements >Time

Time element guide

Elements >WebVTT

First draft from W3C

Elements >HTML Imports

Introduction to HTML imports

Development APIs >Permissions

Permissions API for the Web by Google

Development APIs >Geolocation

Using Geolocation

HTML5 Apps: Positioning with Geolocation

Development APIs >Cryptography

Web Cryptography API draft

Table of web cryptography support

Window.crypto

Cryptography next steps from W3C

Development APIs >File

Using files from web applications (MDN)

Reading local files in JavaScript

File API Draft

File system API

Development APIs >Frame timing

Video from google developers

Draft from W3C

Development APIs >requestIdleCallback

On Google developers

Development APIs >requestAnimationFrame

Using requestAnimationFrame (CSS Tricks)

Great article by Paul Irish

Development APIs >Web payments

Web payments API overview

Semantics

Semantic elements from W3Schools

In 2 lists

Sections and Outlines of an HTML5 from MDN Document

HTML5 Semantics from Smashing Magazine

Lesser known semantics element from W3C & Opera

Accessibility

Excellent intro to accessibility from Google's fundamentals

Accessibility checklist for web developers

ARIA from MDN

In 2 lists

Great Accessibility Style Guide

Designing for Cognitive Differences

Guide on how HTML elements are supported by screen readers

Top 25 Accessibility Testing Tools for Website

Web Accessibility Evaluation Tools List from W3

Pa11y - automated accessibility testing

accessibility testing tool to find issues with your web pages. It runs HTML CodeSniffer from the command line for programmatic accessibility reporting. It's an accessibility developer tool.

In 2 lists

Aria in HTML

Accessible and Responsive HTML5 Video Player

DOM Management >Shadow DOM

Shadow DOM v1: self-contained web components

What's New in Shadow DOM v1 (by examples)

DOM Management >Data Binding

Data-binding Revolutions with Object.observe()

DOM Management >Web Components

Custom elements v1: reusable web components

The power of web components

Polymer project

In 2 lists

A Quick Introduction To Polymer

Building web components using Polymer and ES6 classes

Demythstifying Web Components

HTML imports

Building Webapps with Yeoman and Polymer

Progressive web apps

Intro to PWAs

In 2 lists

An Extensive Guide To Progressive Web Applications

The Business Case for Progressive Web Apps

Progressive web apps >Service Workers

Service Worker fundamentals

ServiceWorkies - Learn SWs playing a game

The Service Worker Cookbook

A collection of recipes for different use cases.

In 3 lists

Offline content with service workers

Making a Service Worker: a case study (Smashing Magazine)

(Lyza Danger Gardner - Feb 1, 2016)

In 2 lists

Service workers explained

Service Worker Libraries, Totally Tooling Tips

ServiceWorker: Revolution of the Web Platform

(Nicolas Bevacqua - Oct 21, 2015)

In 3 lists

Progressive web apps >Offline caching

The Offline Cookbook

Instant-loading Offline-first (Progressive Web App Summit 2016)

Offline Storage for Progressive Web Apps (article by Addy Osmani)

(Addy Osmani - Aug 15, 2016)

In 2 lists

A Beginner's Guide to Using the Application Cache

Progressive web apps >Push Notifications

Web Push Notifications (Google's Web fundamentals)

Push API W3C draft

Notifications API spec

Client side storage

Client-Side Storage

Offline Cookbook

The bible of service worker Patterns by Jake Archibald.

In 3 lists

Introduction to IndexedDB

Real-World Off-Line Data Storage

Local storage tutorial

Performance

Accelerated Mobile Pages (AMP)

Google developers best practices

Optimizing performance from Google Web Fundamentals

In 2 lists

Resource hints draft (preconnect and preload)

Prefetching and prerendeding

Image compression

Text compression

Resource timing spec

Mobile

The Web App Manifest (Google's fundamentals)

Field guide to web applications

Apache Cordova tutorial

PhoneGap from Scratch

Best practices for mobile web apps

Build mobile apps with Kendo UI

HTML5 Vibration API

HTML5 Battery Status API

Privacy analysis of the HTML5 Battery Status API

HTML5 Network Information API

Sencha Touch tutorials

Communications and interoperability >Web Sockets

Introducing Websockets

About HTML5 WebSocket

HTML5 Web Sockets API

Communications and interoperability >WebRTC

What is WebRTC and how does it work

WebRTC made simple

WebRTC data channels tutorial

WebRTC data channels from MDN

Web Workers

Web Worker Basics

How fast are web workers?

Web Workers in MDN

Getting started with Web Workers

WebGL

WebGL Fundamentals

Browser compatibility

I want to use

Figure out the browser support of combinations of features.

In 2 lists

Can I use...

Browser support for CSS, HTML5 and other front-end web technologies.

In 9 listsDetails

W3C quality tools

HTML5 test

HTML5 demos

Books

Dive Into HTML5

HTML5: Up and Running

Using the HTML5 Filesystem API

HTML5 Game Development Insights

Web Design Playground: HTML & CSS The Interactive Way

A step by step guide from writing your first line of HTML to creating interesting, attractive web pages.

In 2 lists

Game development

Getting started with HTML5 Game Development from Mozilla Hacks

HTML 5 game development video series by Mozilla

Info, news and tutorials

In 2 lists

Over 380 resources on HTML5 game development

Pixi.js

A fast lightweight 2D library that works across all devices. The Pixi renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL.

In 6 listsDetails

Phaser

Desktop and Mobile HTML5 game framework. A fast, free and fun open source framework for Canvas and WebGL powered browser games.

In 5 listsDetails

MelonJS

Modern 2D game engine, level editing with Tiled. [Website]

In 6 listsDetails

Kiwi.js

Blazingly fast mobile & desktop browser based HTML5 game framework. It uses CocoonJavaScript for publishing to the AppStore.

In 3 lists

Crafty

JavaScript game library that can help you create games in a structured way.

In 4 listsDetails

PhysicsJS

A modular, extendable, and easy-to-use physics engine for javascript (archived)

In 5 listsDetails

Stage.js

2D Library for cross-platform HTML5 game development.

In 3 lists

Cocos2d

Cocos2d for Web Browsers. Built using JavaScript.

In 5 listsDetails

Bootcamp

Learn coding for free online

*Free online cources

In 7 listsDetails

Videos and Keynotes

HTML5 Developer Conference

Polymer: declarative, encapsulated, reusable components

Making the mobile web fast, feature-rich, and beautiful

Dart: HTML of the Future, Today!

Websites and resources >Websites

HTML official reference

(allows collaborative modification of content like wiki)

HTML5 Rocks

(news, tutorials and updates)

HTML5 Gallery

(a showcase of sites using HTML5 markup and API's)

HTML5 development guide from MDN

Comprehensive HTML learning

In 3 lists

W3C Highlights form June 2014

HTML5 Please

(Know when HTML5 feature are ready to use)

Keen HTML

(Free interactive lessons to learn HTML)

A Complete Guide to the Table Element

Websites and resources >Weekly news

HTML5 Weekly

. A once–weekly HTML5 and Web Platform technology roundup. CSS 3, Canvas, WebSockets, WebGL, Native Client, and more.

In 4 lists

Mozilla Hacks Weekly Articles

Responsive Design Newsletter

. A free, once–weekly round-up of responsive design articles, tools, tips, tutorials and inspirational links.

In 4 lists

Websites and resources >Twitter

@html5

@html5rock

@html5gallery

@html5doctor

@GameDevHTML5

@mozhacks

@googlechrome

See category
93

Awesome Vue

vuejs/awesome-vue

🎉 A curated list of awesome things related to Vue.js

Fresh★ 74k1067 entriesPushed 5 days ago
93

Awesome DESIGN.md

VoltAgent/awesome-design-md

A collection of DESIGN.md files analysis by popular brand design systems. Drop one into your project and let coding agents generate a matching UI.

Fresh★ 119k74 entriesPushed 9 days ago
91

Awesome Angular

PatrickJS/awesome-angular

:page_facing_up: A curated list of awesome Angular resources

Fresh★ 10k1944 entriesPushed today
90

Awesome Blazor

AdrienTorris/awesome-blazor

Resources for Blazor, a .NET web framework using C#/Razor and HTML that runs in the browser with WebAssembly.

Fresh★ 9.4k375 entriesPushed today
88

Must-Watch CSS

AllThingsSmitty/must-watch-css

CSS talks you have to see covering CSS Grid, flexbox, custom variables, performance, frameworks, tooling, and more! 📺

Fresh★ 4.9k70 entriesPushed 6 days ago
87

Awesome React Native

jondot/awesome-react-native

Awesome React Native components, news, tools, and learning material!

Fresh★ 36k194 entriesPushed 1 month ago