All notes, in reading order - Page 20

Writing Alt Text That Actually Helps

Alt text is not a caption, not a keyword list and not a file name. Learn the decision tree that tells you what to write, and when to write nothing at...

HTML

figure and figcaption: Images With Captions

A figure is self contained content referred to from the main text. figcaption attaches a visible caption that stays associated with it in the accessib...

HTML

Audio and Video in HTML

Native media playback with no plugin. Learn the controls, the source fallback pattern, autoplay rules that will catch you out, and why captions are no...

HTML

Responsive Images: srcset, sizes and picture

Stop sending a 2000 pixel photograph to a phone. Learn width descriptors, the sizes attribute the browser cannot work out for itself, and when picture...

HTML

Embedding External Content with iframe

An iframe puts another page inside yours. Learn the YouTube and maps patterns, the title attribute screen readers need, and the sandbox and loading at...

HTML

Lazy Loading and Image Performance

Images are usually the heaviest thing on a page. loading, decoding, fetchpriority and preload are four attributes that decide how fast it feels.

HTML

Ordered and Unordered Lists

ul when the order does not matter, ol when it does. Plus the start, reversed, type and value attributes that most people never discover.

HTML

Description Lists: dl, dt and dd

The third list type, and the most misunderstood. A description list pairs terms with descriptions, which makes it right for glossaries, metadata and s...

HTML

Nested Lists and Multi Level Menus

A sublist goes inside the li it belongs to, not beside it. That one rule fixes almost every broken nested list, and it is what makes a multi level men...

HTML

Table Structure: table, tr, th and td

A table is for two dimensional data, never for layout. Learn the four core elements, the difference between th and td, and the test that tells you whe...

HTML

Table Sections: caption, thead, tbody, tfoot and colgroup

Row groups give a table a header, a body and a summary. They are what make long tables printable, scrollable and understandable.

HTML

Spanning Cells with colspan and rowspan

One cell covering several columns or rows. Simple to write, easy to get wrong, and the arithmetic has to balance or the whole grid tears.