HTML Deep
Tags: html
Published: 2021-02-24 12:59:54

Whatever you do on HTML, you have to understand the roots and focus on the basic knowledge.


# 1. Articles and standards
* [HTML 5.3](https://w3c.github.io/html/) - Current HTML5 spec
* [Progressive enhancement](https://www.smashingmagazine.com/2009/04/progressive-enhancement-what-it-is-and-how-to-use-it/)
* [The extensible web manifesto](https://extensiblewebmanifesto.org/)
* [Differences between HTML5 and HTML4 from W3C](https://www.w3.org/TR/html5-diff/)

# 2. Multimedia capabilities
## 2.1. Audio
* [Getting started with the Web Audio API](https://www.html5rocks.com/en/tutorials/webaudio/intro/?redirect_from_locale=es)
* [Web Audio API at MDN](https://developer.mozilla.org/es/docs/Web_Audio_API)
* [Making a Guitar Tuner with HTML5](https://jonathan.bergknoff.com/journal/making-a-guitar-tuner-html5)
* [Audio visualisation with the Web Audio API and React](https://www.twilio.com/blog/audio-visualisation-web-audio-api--react)

## 2.2. Media Capture
* [Capturing Audio & Video in HTML5](https://www.html5rocks.com/es/tutorials/getusermedia/intro/)
* [Using the media capture API](https://www.sitepoint.com/using-the-media-capture-api/)

## 2.3. Picture in Picture
* [Chrome's new Picture in Picture API](https://developers.google.com/web/updates/2018/10/watch-video-using-picture-in-picture)

## 2.4. Speech Synthesis
* [Intro to the HTML5 Speech Synthesis API](http://creative-punch.net/2014/10/intro-html5-speech-synthesis-api/)
* [Another useful intro](https://shapeshed.com/html5-speech-recognition-api/)

## 2.5. Voice Recognition
* [Web speech API demo](https://www.google.com/intl/en/chrome/demos/speech.html)
* [Using the Web Speech API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API)
* [Experimenting with the Web Speech API](https://www.sitepoint.com/experimenting-web-speech-api/)
* [Free voice recognition library (annyang)](https://www.talater.com/annyang/)

## 2.6. Virtual Reality
* [Firefox Reality now available](https://blog.mozilla.org/blog/2018/09/18/firefox-reality-now-available/)

## 2.7. Web animations
* [Intro to web animations](http://danielcwilson.com/blog/2015/07/animations-intro/)
* [When to Use the Web Animations API](http://danielcwilson.com/blog/2016/08/why-waapi/)

# 3. Elements

## 3.1. Canvas
* [Brief description from W3 Schools](https://www.w3schools.com/tags/tag_canvas.asp)
* [Tutorial from MDN](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial)
* [Various Tutorials](https://www.html5canvastutorials.com/)
* [Cheat Sheet](https://simon.html5.org/dump/html5-canvas-cheat-sheet.html)

## 3.2. Head
* [A list of things that go in your pages' HEAD element](https://gethead.info/)

## 3.3. Sectioning
* [How to Use The HTML5 Sectioning Elements](https://blog.teamtreehouse.com/use-html5-sectioning-elements)

## 3.4. Media Elements
* Audio and Video
  - [audio tag from W3Schools](https://www.w3schools.com/tags/tag_audio.asp)
  - [video tag from W3 Schools](https://www.w3schools.com/tags/tag_video.asp)
  - [Tutorial from MDN](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content)
  - [Capturing audio and video in HTML5](https://www.html5rocks.com/en/tutorials/getusermedia/intro/)
* embed tag
  - [Brief description from W3 Schools](https://www.w3schools.com/tags/tag_embed.asp)
* source tag
  - [Brief description from W3 Schools](https://www.w3schools.com/tags/tag_source.asp)
* track tag
  - [Brief description from W3 Schools](https://www.w3schools.com/tags/tag_track.asp)

## 3.5. Forms
* [Changes to forms in HTML5 from MDN](https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms)
* [HTML Forms](https://www.w3schools.com/html/html_forms.asp)

## 3.6. Details
* [How to Use the Details and Summary Elements](https://blog.teamtreehouse.com/use-details-summary-elements)
* [Details element polyfill](https://www.smashingmagazine.com/2014/11/complete-polyfill-html5-details-element/)

## 3.7. Time
* [Time element guide](https://www.sitepoint.com/html5-time-element-guide/)

## 3.8. WebVTT
* [First draft from W3C](http://www.w3.org/TR/2014/WD-webvtt1-20141113/)

## 3.9. HTML Imports
* [Introduction to HTML imports](https://www.webcomponents.org/community/articles/introduction-to-html-imports)

# 4. Development APIs

## 4.1. Permissions
* [Permissions API for the Web by Google](https://developers.google.com/web/updates/2015/04/permissions-api-for-the-web)

## 4.2. Geolocation
* [Using Geolocation](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API)
* [HTML5 Apps: Positioning with Geolocation](https://code.tutsplus.com/tutorials/html5-apps-positioning-with-geolocation--mobile-456)

## 4.3. Cryptography
* [Web Cryptography API draft](http://www.w3.org/TR/WebCryptoAPI/)
* [Table of web cryptography support](http://diafygi.github.io/webcrypto-examples/)
* [Window.crypto](https://developer.mozilla.org/en-US/docs/Web/API/Window/crypto)
* [Cryptography next steps from W3C](http://www.w3.org/2012/webcrypto/webcrypto-next-workshop/report.html)

## 4.4. File
* [Using files from web applications (MDN)](https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications)
* [Reading local files in JavaScript](https://www.html5rocks.com/en/tutorials/file/dndfiles/)
* [File API Draft](https://w3c.github.io/FileAPI/)
* [File system API](http://www.w3.org/TR/file-system-api/)

## 4.5. Frame timing
* [Video from google developers](https://www.youtube.com/watch?v=4zoC3eaa9z0)
* [Draft from W3C](https://w3c.github.io/frame-timing/)

## 4.6. requestIdleCallback
* [On Google developers](https://developers.google.com/web/updates/2015/08/using-requestidlecallback)

## 4.7. requestAnimationFrame
* [Using requestAnimationFrame (CSS Tricks)](https://css-tricks.com/using-requestanimationframe/)
* [Great article by Paul Irish](https://medium.com/@paul_irish/requestanimationframe-scheduling-for-nerds-9c57f7438ef4#.9gev5fdub)

## 4.8. Web payments
* [Web payments API overview](https://developers.google.com/web/fundamentals/payments/)

# 5. Semantics
* [Semantic elements from W3Schools](https://www.w3schools.com/html/html5_semantic_elements.asp)
* [Sections and Outlines of an HTML5 from MDN Document](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines)
* [HTML5 Semantics from Smashing Magazine](https://www.smashingmagazine.com/2011/11/html5-semantics/)
* [Lesser known semantics element from W3C & Opera](https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting)

# 6. Accessibility
* [Excellent intro to accessibility from Google's fundamentals](https://developers.google.com/web/fundamentals/accessibility/)
* [Accessibility checklist for web developers](https://webaim.org/standards/wcag/checklist)
* [ARIA from MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA)
* [Great Accessibility Style Guide](https://a11y-style-guide.com/style-guide/)
* [Designing for Cognitive Differences](https://alistapart.com/article/designing-for-cognitive-differences)
* [Guide on how HTML elements are supported by screen readers](https://thepaciellogroup.github.io/AT-browser-tests/)
* [Top 25 Accessibility Testing Tools for Website](https://dynomapper.com/blog/27-accessibility-testing/246-top-25-awesome-accessibility-testing-tools-for-websites)
* [Web Accessibility Evaluation Tools List from W3](http://www.w3.org/WAI/ER/tools/)
* [Pa11y - automated accessibility testing](http://pa11y.org/)
* [Aria in HTML](https://developer.paciellogroup.com/blog/2014/10/aria-in-html-there-goes-the-neighborhood/)
* [Accessible and Responsive HTML5 Video Player](https://2017.ind.ie/blog/accessible-video-player/)

# 7. DOM Management
## 7.1. Shadow DOM
* [Shadow DOM v1: self-contained web components](https://developers.google.com/web/fundamentals/web-components/shadowdom)
* [What's New in Shadow DOM v1 (by examples)](https://hayato.io/2016/shadowdomv1/)

## 7.2. Data Binding
* [Data-binding Revolutions with Object.observe()](https://www.html5rocks.com/en/tutorials/es7/observe/)

## 7.3. Web Components
* [Custom elements v1: reusable web components](https://developers.google.com/web/fundamentals/web-components/customelements)
* [The power of web components](https://hacks.mozilla.org/2018/11/the-power-of-web-components/)
* [Polymer project](https://github.com/polymer)
* [A Quick Introduction To Polymer](https://www.webcomponents.org/community/articles/a-quick-polymer-introduction)
* [Building web components using Polymer and ES6 classes](https://www.polymer-project.org/blog/es6)
* [Demythstifying Web Components](http://www.backalleycoder.com/2016/08/26/demythstifying-web-components/)
* [HTML imports](https://www.html5rocks.com/en/tutorials/webcomponents/imports/)
* [Building Webapps with Yeoman and Polymer](https://www.html5rocks.com/en/tutorials/webcomponents/yeoman/)

# 8. Progressive web apps
* [Intro to PWAs](https://developers.google.com/web/progressive-web-apps/)
* [An Extensive Guide To Progressive Web Applications](https://www.smashingmagazine.com/2018/11/guide-pwa-progressive-web-applications/)
* [The Business Case for Progressive Web Apps](https://cloudfour.com/thinks/the-business-case-for-progressive-web-apps/)

## 8.1. Service Workers

* [Service Worker fundamentals](https://developers.google.com/web/fundamentals/primers/service-workers/)
* [ServiceWorkies - Learn SWs playing a game](https://serviceworkies.com/)
* [The Service Worker Cookbook](https://serviceworke.rs/)
* [Offline content with service workers](https://www.madebymike.com.au/writing/service-workers/)
* [Making a Service Worker: a case study (Smashing Magazine)](https://www.smashingmagazine.com/2016/02/making-a-service-worker/)
* [Service workers explained](https://github.com/w3c/ServiceWorker/blob/master/explainer.md)
* [Service Worker Libraries, Totally Tooling Tips](https://www.youtube.com/watch?v=IIRj8DftkqE)
* [ServiceWorker: Revolution of the Web Platform](https://ponyfoo.com/articles/serviceworker-revolution)

## 8.2. Offline caching

* [The Offline Cookbook](https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/)
* [Instant-loading Offline-first (Progressive Web App Summit 2016)](https://www.youtube.com/watch?v=qDJAz3IIq18)
* [Offline Storage for Progressive Web Apps (article by Addy Osmani)](https://medium.com/dev-channel/offline-storage-for-progressive-web-apps-70d52695513c#.jsbxgywzz)
* [A Beginner's Guide to Using the Application Cache](https://www.html5rocks.com/en/tutorials/appcache/beginner/)

## 8.3. Push Notifications

* [Web Push Notifications (Google's Web fundamentals)](https://developers.google.com/web/fundamentals/push-notifications/)
* [Push API W3C draft](http://w3c.github.io/push-api/)
* [Notifications API spec](https://notifications.spec.whatwg.org/)

# 9. Client side storage
* [Client-Side Storage](https://www.html5rocks.com/en/tutorials/offline/storage/)
* [Offline Cookbook](https://jakearchibald.com/2014/offline-cookbook/)
* [Introduction to IndexedDB](https://www.codemag.com/Article/1411041)
* [Real-World Off-Line Data Storage](https://code.tutsplus.com/tutorials/real-world-off-line-data-storage--net-34063)
* [Local storage tutorial](https://developer.mozilla.org/en-US/docs/Archive/Add-ons/Overlay_Extensions/XUL_School/Local_Storage)

# 10. Performance
* [Accelerated Mobile Pages (AMP)](https://www.ampproject.org/learn/overview/)
* [Google developers best practices](https://developers.google.com/speed/docs/insights/rules)
* [Optimizing performance from Google Web Fundamentals](https://developers.google.com/web/fundamentals/performance/why-performance-matters/)
* [Resource hints draft (preconnect and preload)](http://www.w3.org/TR/2014/WD-resource-hints-20141021/)
* [Prefetching and prerendeding](https://medium.com/@luisvieira_gmr/html5-prefetch-1e54f6dda15d)
* [Image compression](https://www.html5rocks.com/en/tutorials/speed/img-compression/)
* [Text compression](https://www.html5rocks.com/en/tutorials/speed/txt-compression/)
* [Resource timing spec](http://www.w3.org/TR/resource-timing/)

# 11. Mobile
* [The Web App Manifest (Google's fundamentals)](https://developers.google.com/web/fundamentals/web-app-manifest/)
* [Field guide to web applications](https://www.html5rocks.com/webappfieldguide/toc/index/)
* [Apache Cordova tutorial](http://ccoenraets.github.io/cordova-tutorial/)
* [PhoneGap from Scratch](https://code.tutsplus.com/tutorials/phonegap-from-scratch-introduction--mobile-9171)
* [Best practices for mobile web apps](https://www.html5rocks.com/en/tutorials/speed/quick/)
* [Build mobile apps with Kendo UI](https://docs.telerik.com/kendo-ui/controls/hybrid/introduction)
* [HTML5 Vibration API](https://code.tutsplus.com/tutorials/html5-vibration-api--mobile-22585)
* [HTML5 Battery Status API](https://code.tutsplus.com/tutorials/html5-battery-status-api--mobile-22795)
* [Privacy analysis of the HTML5 Battery Status API](https://eprint.iacr.org/2015/616.pdf)
* [HTML5 Network Information API](https://code.tutsplus.com/tutorials/html5-network-information-api--cms-21598)
* [Sencha Touch tutorials](https://docs.sencha.com/)

# 12. Communications and interoperability
## 12.1. Web Sockets
* [Introducing Websockets](https://www.html5rocks.com/en/tutorials/websockets/basics/)
* [About HTML5 WebSocket](https://www.websocket.org/aboutwebsocket.html)
* [HTML5 Web Sockets API](http://www.tutorialspark.com/html5/HTML5_WebSockets.php)

## 12.2. WebRTC
* [What is WebRTC and how does it work](https://www.innoarchitech.com/what-is-webrtc-and-how-does-it-work/)
* [WebRTC made simple](https://blog.carbonfive.com/2014/10/16/webrtc-made-simple/)
* [WebRTC data channels tutorial](https://www.html5rocks.com/en/tutorials/webrtc/datachannels/)
* [WebRTC data channels from MDN](https://developer.mozilla.org/en-US/docs/Games/Techniques/WebRTC_data_channels)

# 13. Web Workers
* [Web Worker Basics](https://www.html5rocks.com/en/tutorials/workers/basics/)
* [How fast are web workers?](https://hacks.mozilla.org/2015/07/how-fast-are-web-workers/)
* [Web Workers in MDN](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers)
* [Getting started with Web Workers](https://code.tutsplus.com/tutorials/getting-started-with-web-workers--net-27667)

# 14. WebGL
* [WebGL Fundamentals](https://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals)

# 15. Browser compatibility
* [I want to use](http://www.iwanttouse.com/)
* [Can I use...](https://caniuse.com/)
* [W3C quality tools](http://w3c.github.io/developers/tools/)
* [HTML5 test](http://beta.html5test.com/)
* [HTML5 demos](https://bestvpn.org/html5demos/)

# 16. Books
* [Dive Into HTML5](http://diveinto.html5doctor.com/)
* [HTML5: Up and Running](https://www.amazon.com/HTML5-Running-Dive-Future-Development/dp/0596806027)
* [Using the HTML5 Filesystem API](http://shop.oreilly.com/product/0636920021360.do)
* [HTML5 Game Development Insights](https://www.apress.com/us/book/9781430266976)
* [Web Design Playground: HTML & CSS The Interactive Way](https://www.manning.com/books/web-design-playground)

# 17. Game development
* [Getting started with HTML5 Game Development from Mozilla Hacks](https://hacks.mozilla.org/2013/09/getting-started-with-html5-game-development/)
* [HTML 5 game development video series by Mozilla](https://hacks.mozilla.org/2016/02/html-5-game-development-video-series/)
* [Info, news and tutorials](http://html5gamedevelopment.com/)
* [Over 380 resources on HTML5 game development](https://html5-game-development.zeef.com/andre.antonio.schmitz)
* Opensource JavaScript game engines
  - [Pixi.js](https://github.com/pixijs/pixi.js)
  - [Phaser](https://github.com/photonstorm/phaser)
  - [MelonJS](https://github.com/melonjs/melonJS)
  - [Kiwi.js](https://github.com/gamelab/kiwi.js)
  - [Crafty](https://github.com/craftyjs/Crafty)
  - [PhysicsJS](https://github.com/wellcaffeinated/PhysicsJS)
  - [Stage.js](https://github.com/shakiba/stage.js)
  - [Cocos2d](https://github.com/cocos2d/cocos2d-html5)

# 18. Bootcamp
* [Learn coding for free online](https://www.freecodecamp.org/)
* [Free online cources](https://www.khanacademy.org/)

# 19. Videos and Keynotes
* [HTML5 Developer Conference](https://html5devconf.com/videos.html)
* [Polymer: declarative, encapsulated, reusable components](https://www.youtube.com/watch?v=DH1vTVkqCDQ)
* [Making the mobile web fast, feature-rich, and beautiful](https://www.youtube.com/watch?v=EXjPsvwIDwU)
* [Dart: HTML of the Future, Today!](https://www.youtube.com/watch?v=euCNWhs7ivQ)

# 20. Websites and resources
## 20.1. Websites
* [HTML official reference](https://webplatform.github.io/docs/Main_Page/index.html) (allows collaborative modification of content like wiki)
* [HTML5 Rocks](https://www.html5rocks.com/en/) (news, tutorials and updates)
* [HTML5 Gallery](http://html5gallery.com/) (a showcase of sites using HTML5 markup and API's)
* [HTML5 development guide from MDN](https://developer.mozilla.org/en-US/docs/Learn/HTML)
* [W3C Highlights form June 2014](http://www.w3.org/2014/06/w3c-highlights/)
* [HTML5 Please](https://html5please.com/) (Know when HTML5 feature are ready to use)
* [Keen HTML](https://keenhtml.com) (Free interactive lessons to learn HTML)
* [A Complete Guide to the Table Element ](https://css-tricks.com/complete-guide-table-element/) 
* [Community Curated Resources](https://hackr.io/tutorials/learn-html-5)

## 20.2. Weekly news
* [HTML5 Weekly](https://frontendfoc.us/)
* [Mozilla Hacks Weekly Articles](https://hacks.mozilla.org/category/mozilla-hacks-weekly/)
* [Responsive Design Newsletter](http://responsivedesignweekly.com/)

## 20.3. Twitter
*  [@html5](https://twitter.com/html5)
*  [@html5rock](https://twitter.com/html5rock)
*  [@html5gallery](https://twitter.com/html5gallery)
*  [@html5doctor](https://twitter.com/html5doctor)
*  [@GameDevHTML5](https://twitter.com/GameDevHTML5)
*  [@mozhacks](https://twitter.com/mozhacks)
*  [@googlechrome](https://twitter.com/googlechrome)

# 21. HTML Style Guide and Coding Conventions

* [W3 school](ttps://www.w3schools.com/html/html5_syntax.asp)
* [Google HTML Guide Style](https://google.github.io/styleguide/htmlcssguide.html)
* [Code Standard](
https://gist.github.com/ryansechrest/8693303)

# 22. HTML Security

* https://html5sec.org/
* [HTML security checklist](https://www.sqreen.com/checklists/html-css-security-checklist)
* [Web security coding tip](https://futureboy.us/security/)

<a href="https://dev.to/haunt_hcm2015">
  <img src="https://d2fltix0v2e0sb.cloudfront.net/dev-badge.svg" alt="Nguyễn Trung Hậu's DEV Community Profile" height="30" width="30">
</a>