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...
HTML
A complete HTML path: document structure, text, links, media, tables, forms, semantic markup, HTML5, metadata, accessibility, SEO, tooling, projects and assessment.
113 notes in 20 topics
Topics in HTML
HTML Basics 7
Text and Formatting 5
Links and Navigation 5
Images and Media 7
Lists 3
Tables 5
Forms 9
Semantic HTML 5
HTML5 Features 7
Head and Metadata 5
HTML with CSS 5
HTML with JavaScript 5
Accessibility 6
HTML SEO 10
DevTools and Debugging 4
Editor Productivity 3
HTML Best Practices 4
HTML Projects 6
Advanced Projects 5
Practice and Exams 7
Notes
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
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
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
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
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
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.