Links and images
This course covers how links and images work in HTML and Rails. It explains why href makes the a tag a link, when to use relative or absolute URLs, and how link_to with named routes keeps paths current. It covers link text that makes sense out of context, target="_blank" and reverse tabnabbing, and the main img attributes. It also covers alt text, responsive images with srcset and picture, and a product card that combines these rules.
What you'll learn
- ✓How href, relative and absolute URLs, anchors, mailto and tel links work
- ✓Writing link text that makes sense in a screen reader's links list
- ✓What target="_blank" and rel="noopener noreferrer" do
- ✓Using src, width, height and loading on img to avoid layout shift
- ✓Writing alt text, or leaving it empty for decorative images
- ✓Serving responsive images with srcset, sizes and picture
The a tag: more than blue underlined text
href isn't one option among several for <a>: it's what makes the tag a hyperlink at all. An <a> with no href isn't keyboard-focusable and gets no link role in the accessibility tree that the last three courses checked in DevTools. It's inline text styled like a link:
Read the full lesson free →Curriculum
7 lessonsThe a tag: more than blue underlined text
How href turns the a tag into a link, plus relative and absolute URLs, named routes, anchors, mailto and tel.
Writing link text that makes sense out of context
Writing link text that works alone in a screen reader's links list, including icon-only links with hidden text.
target="_blank" and the tabnabbing risk
How target="_blank" enabled reverse tabnabbing, what rel="noopener" does, and why current browsers already apply it.
img: the anatomy of an image tag
The src, alt, width, height and loading attributes of img, and the problem each one solves.
alt text: writing it right, or leaving it empty
When an image needs descriptive alt text, when alt should be empty, and how figure and figcaption pair captions.
Responsive and efficient images
Using srcset, sizes and picture so the browser downloads the right image size and a smaller modern format.
Putting it all together: a real product card with links and images
A product card that combines the course's link and image rules, checked in the DevTools Accessibility panel.