HTML Notes - Page 9

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

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

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

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

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

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

The img Element: Putting Pictures on a Page

src, alt, width and height. Four attributes, and three of them are doing more work than most people realise.

HTML

Building a Navigation Menu

A menu is a list of links inside a nav element. Learn the markup that makes it accessible, how to mark the current page, and how a dropdown should be...

HTML

Email, Telephone and Download Links

The href attribute understands more than web pages. mailto, tel and the download attribute turn a link into an email draft, a phone call or a saved fi...

HTML

Fragment Links and In Page Navigation

Link to a spot on the same page with an id and a hash. The basis of tables of contents, skip links, footnotes and back to top links.

HTML

Absolute, Relative and Root Relative URLs

The same page, three ways to point at it. Learn how a browser resolves each form, when a leading slash saves you, and why one broken dot breaks an ent...

HTML

The Anchor Element: Turning Text Into a Link

One element built the web. Learn the href attribute, what makes link text good or useless, the target and rel attributes, and why a link is not a butt...