HyperText Markup Language (HTML)

Standard (PDF)

Reading

Books

A beginner's guide to HTML&CSS
A free guide to learn HTML and CSS
Adaptive Web Design - Aaron Gustafson
An advanced guide to HTML&CSS
Atomic Design - Brad Frost
Canvassing
Code Guide: Standards for developing flexible, durable, and sustainable HTML and CSS - Mark Otto
Dive Into HTML5 - Mark Pilgrim (PDF)
DOM Enlightenment - Cody Lindley (HTML)
GA Dash
Google's HTML/CSS Style Guide
How To Build a Website with HTML - Erin Glass (PDF, EPUB)
How to Code in HTML5 and CSS3 - Damian Wielgosik (PDF)
HTML Canvas Deep Dive - Josh Marinacci
HTML Dog Tutorials
HTML5 Canvas - Steve Fulton & Jeff Fulton
HTML5 Canvas Notes for Professionals - Compiled from StackOverflow documentation (PDF)
HTML5 for Publishers - Sanders Kleinfeld
HTML5 For Web Designers - Jeremy Keith
HTML5 Notes for Professionals - Compiled from StackOverflow documentation (PDF)
HTML5 Quick Learning Guide - HTML5Templates (PDF)
HTML5 Shoot 'em Up in an Afternoon - Bryan Bibat (HTML)
Interneting is Hard (But it Doesn't Have to Be) - Oliver James
Learn to Code HTML & CSS - Shay Howe
Pocket Guide to Writing SVG - Joni Trythall
Pro HTML5 Programming - Jen Simmons, Chris O'Connor, Dylan Wooters, Peter Lubbers
Resilient Web Design - Jeremy Keith
RTL Styling 101 - Ahmad Shadeed
The HTML Handbook - Flavio Copes (PDF, EPUB, Kindle) (email address requested)
Web Audio API - Boris Smus
Web Visual Effects with CSS3 - Thomas Mak

Articles

"HTML5 Elements You Didn't Know You Need"
Replacing JS with just HTML (Accordions / Expanding Content Panels; Input with Autofilter Suggestions Dropdown; Modals / Popovers; Offscreen Nav / Content)
Masonry: Things You Won’t Need A Library For Anymore:
- Popovers And Dialogs: The Popover API, the <dialog> HTML element, and the ::backdrop pseudo-element can help you get rid of dependencies on popup, tooltip, and dialog libraries. They handle accessibility and focus management for you, out of the box, are highly customizable by using CSS, and can easily be animated.
- Accordions: The <details> element, its name attribute for mutually exclusive elements, and the ::details-content pseudo-element remove the need for accordion components.
- CSS Syntax: Cascade layers, for a more organized CSS codebase, CSS nesting, for more compact CSS, new color functions, relative colors, and color-mix, new Maths functions like abs(), sign(), pow() and others help reduce dependencies on CSS pre-processors, utility libraries like Bootstrap and Tailwind, or even runtime CSS-in-JS libraries. The game changer :has(), one of the most requested features for a long time, removes the need for more complicated JS-based solutions.
- JS Utilities: Modern Array methods like findLast(), or at(), as well as Set methods like difference(), intersection(), union() and others can reduce dependencies on libraries like Lodash.
- Container Queries: Container queries make UI components respond to things other than the viewport size, and therefore make them more reusable across different contexts. No need to use a JS-heavy UI library for this anymore, and no need to use a polyfill either.
- Layout: Grid, subgrid, flexbox, or multi-column have been around for a long time now, but looking at the results of the State of CSS surveys, it’s clear that developers tend to be very cautious with adopting new things, and wait for a very long time before they do.
Things you might not need anymore in the near future:
- Anchor Positioning: CSS anchor positioning handles the positioning of popovers and tooltips relative to other elements, and takes care of keeping them in view, even when moving, scrolling, or resizing the page. This is a great complement to the Popover API mentioned before, which will make it even easier to migrate away from more performance-intensive JS solutions.
- Navigation API: The Navigation API can be used to handle navigation in single-page apps and might be a great complement, or even a replacement, to React Router, Next.js routing, or Angular routing tasks.
- View Transitions API: The View Transitions API can animate between the different states of a page. On a single-page application, this makes smooth transitions between states very easy, and can help you get rid of animation libraries such as Anime.js, GSAP, or Motion.dev. Even better, the API can also be used with multiple-page applications.
- Scroll-driven Animations: Scroll-driven animations run on the user’s scroll position, rather than over time, making them a great solution for storytelling and product tours.
- Customizable Selects: A customizable select is a normal <select> element that lets you fully customize its appearance and content, while ensuring accessibility and performance benefits.
- CSS Masonry: CSS Masonry is another upcoming web platform feature that I want to spend more time on. With CSS Masonry, you can achieve layouts that are very hard, or even impossible, with flex, grid, or other built-in CSS layout primitives. Developers often resort to using third-party libraries to achieve Masonry layouts, such as the Masonry JS library. "Masonry is a type of layout that was made popular by Pinterest years ago. It creates independent tracks of content within which items pack themselves up as close to the start of the track as they can."

Tags: presentation format browser

Last modified 03 April 2026

HyperText Markup Language (HTML)

The OG.

Reading

Books

Articles