← Back to Awesome

Sections

HTML5

GitHub repository ↗ synced 2026/8/9

Awesome HTML5 Awesome Build Status

A curated list of awesome HTML5 resources. Inspired by awesome-php and awesome-python

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

Media Capture

  • Capturing Audio & Video in HTML5
  • Using the media capture API

Picture in Picture

  • Chrome's new Picture in Picture API

Speech Synthesis

  • Intro to the HTML5 Speech Synthesis API
  • Another useful intro

Voice Recognition

  • Web speech API demo
  • Using the Web Speech API
  • Experimenting with the Web Speech API
  • Free voice recognition library (annyang)

Virtual Reality

  • Firefox Reality now available

Web animations

  • Intro to web animations
  • When to Use the Web Animations API

Elements

Canvas

  • Brief description from W3 Schools
  • Tutorial from MDN
  • Various Tutorials
  • Cheat Sheet

Head

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

Sectioning

  • How to Use The HTML5 Sectioning Elements

Media Elements

  • Audio and Video
    • audio tag from W3Schools
    • video tag from W3 Schools
    • Tutorial from MDN
    • Capturing audio and video in HTML5
  • embed tag
    • Brief description from W3 Schools
  • source tag
    • Brief description from W3 Schools
  • track tag
    • Brief description from W3 Schools

Forms

  • Changes to forms in HTML5 from MDN
  • HTML Forms

Details

  • How to Use the Details and Summary Elements
  • Details element polyfill

Time

  • Time element guide

WebVTT

  • First draft from W3C

HTML Imports

  • Introduction to HTML imports

Development APIs

Permissions

  • Permissions API for the Web by Google

Geolocation

  • Using Geolocation
  • HTML5 Apps: Positioning with Geolocation

Cryptography

  • Web Cryptography API draft
  • Table of web cryptography support
  • Window.crypto
  • Cryptography next steps from W3C

File

  • Using files from web applications (MDN)
  • Reading local files in JavaScript
  • File API Draft
  • File system API

Frame timing

  • Video from google developers
  • Draft from W3C

requestIdleCallback

  • On Google developers

requestAnimationFrame

  • Using requestAnimationFrame (CSS Tricks)
  • Great article by Paul Irish

Web payments

  • Web payments API overview

Semantics

  • Semantic elements from W3Schools
  • 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
  • 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
  • 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)

Data Binding

  • Data-binding Revolutions with Object.observe()

Web Components

  • Custom elements v1: reusable web components
  • The power of web components
  • Polymer project
  • 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
  • An Extensive Guide To Progressive Web Applications
  • The Business Case for Progressive Web Apps

Service Workers

  • Service Worker fundamentals
  • ServiceWorkies - Learn SWs playing a game
  • The Service Worker Cookbook
  • Offline content with service workers
  • Making a Service Worker: a case study (Smashing Magazine)
  • Service workers explained
  • Service Worker Libraries, Totally Tooling Tips
  • ServiceWorker: Revolution of the Web Platform

Offline caching

  • The Offline Cookbook
  • Instant-loading Offline-first (Progressive Web App Summit 2016)
  • Offline Storage for Progressive Web Apps (article by Addy Osmani)
  • A Beginner's Guide to Using the Application Cache

Push Notifications

  • Web Push Notifications (Google's Web fundamentals)
  • Push API W3C draft
  • Notifications API spec

Client side storage

  • Client-Side Storage
  • Offline Cookbook
  • 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
  • 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

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
  • Can I use...
  • 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

Game development

  • Getting started with HTML5 Game Development from Mozilla Hacks
  • HTML 5 game development video series by Mozilla
  • Info, news and tutorials
  • Over 380 resources on HTML5 game development
  • Opensource JavaScript game engines
    • Pixi.js
    • Phaser
    • MelonJS
    • Kiwi.js
    • Crafty
    • PhysicsJS
    • Stage.js
    • Cocos2d

Bootcamp

*Learn coding for free online
*Free online cources

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
  • 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

Weekly news

  • HTML5 Weekly
  • Mozilla Hacks Weekly Articles
  • Responsive Design Newsletter

Twitter

  • @html5
  • @html5rock
  • @html5gallery
  • @html5doctor
  • @GameDevHTML5
  • @mozhacks
  • @googlechrome

Other awesome lists

  • awesome-awesomeness
  • lists
  • Community Curated Resources