HTML Notes - Page 5

ARIA Basics: Roles, States and Properties

ARIA fills gaps that HTML cannot. It also breaks pages when used carelessly. The rules, the attributes worth knowing, and the ones to leave alone.

HTML

Keyboard Navigation, Focus and tabindex

If it cannot be reached with the Tab key it does not work. Focus order, visible focus indicators, the three values of tabindex and the traps to avoid.

HTML

Accessible Names and the Accessibility Tree

Every control has a name, a role and a state, and the browser works them out in a fixed order. Knowing that order explains almost every screen reader...

HTML

Accessibility: What It Means and Where HTML Fits

Most of accessibility is choosing the right element. The rest is a short list of habits. Here is the framework and the small number of things that fix...

HTML

Forms and JavaScript

Read values, submit without a page reload, validate with the built in API, and handle errors accessibly. All of it built on a real form element.

HTML

Events and Event Delegation

How a click travels through the DOM, why one listener can serve a thousand elements, and the keyboard events that inline handlers always forget.

HTML

Selecting and Changing Elements

querySelector, classList, dataset and the methods that actually get used. The small set of DOM operations that covers most day to day work.

HTML

The DOM: What the Browser Builds From Your Markup

Your file is text. The DOM is the live tree the browser built from it, and they are not the same thing. Knowing the difference is what makes debugging...

HTML

Loading Scripts: defer, async and type=module

Where a script tag sits and which attribute it carries decides whether your page paints in half a second or four. Three loading behaviours, and when e...

HTML

Responsive Design Starts in the Markup

The viewport tag, flexible images, relative units and the mobile first habit. Half of responsive design is decided before a single media query is writ...

HTML

Writing Markup That CSS Can Lay Out

Grid and flexbox changed what markup a layout needs. Fewer wrappers, source order that matches reading order, and the reorder trap that breaks keyboar...

HTML

CSS Selectors Your Markup Makes Possible

The structure you write decides which selectors are available. Attribute selectors, sibling combinators and structural pseudo classes can replace a su...