HTML & CSS · 14-day planAll days
Learn attributes, then use them to link pages together with the anchor element, jump within a page, link to email and phone numbers, and add images with good alt text, sizes and captions.
By the end of today you can
- Write attributes in an opening tag
- Link to other sites and pages with absolute and relative URLs
- Jump to a section of the same page with an id and a hash link
- Add images with src, alt, width and height
- Write useful alt text and caption images with figure
Links are what make the web a web. Today you'll connect pages, and add images that everyone can understand, including people who can't see them.
Attributes
Attributes add information to an element. They go in the opening tag as name="value", separated by spaces:
Some attributes, like reversed, need no value: being there switches them on.
Links
The anchor element, <a>, makes a link. href says where it goes:
Click the links: the preview shows where each would go, underneath.
| href | Goes to |
|---|---|
https://example.com/about | Absolute: a full address, any site |
about.html | Relative: a file in the same folder |
blog/first-post.html | A file inside the blog folder |
../index.html | Up one folder, then index.html |
#contact | The element with id="contact" on this page |
mailto:… / tel:… | Opens email / the phone dialler |
target="_blank" opens a new tab. Use it sparingly, since people can choose that themselves. Add rel="noopener" for safety when you do.
Jumping within a page
Give an element an id (unique on the page), then link to it with #:
Good link text
Screen reader users often skim a list of just the links. "Click here" means nothing out of context; describe the destination instead:
- ❌ To read our pricing, click here.
- ✅ Read our pricing.
(The bold words are the link.)
Images
<img> has no closing tag. src is the image file, alt describes it:
The last image doesn't exist, so the browser shows its alt text instead. That's one job of alt text; the other is telling people who can't see images what they show.
Writing alt text
| Image | Good alt |
|---|---|
| A photo in an article | What it shows that matters: "Volunteers planting trees in the rain" |
| A logo that links home | Where it goes: "Trailhead home" |
| A chart | The point it makes: "Sales doubled from 2022 to 2024" |
| Decoration (swirls, dividers) | Empty: alt="", so screen readers skip it |
Always include width and height too: the browser can then reserve space and the page won't jump as images load.
Captions
<figure> groups an image (or chart, or code) with its caption, <figcaption>:
Image formats
| Format | Best for |
|---|---|
| JPG | Photos |
| PNG | Screenshots, images with transparency |
| SVG | Logos, icons, diagrams: sharp at any size |
| WebP / AVIF | Modern, smaller versions of photos |
Images as links
Put an image inside a link to make it clickable:
Recap
- Attributes go in the opening tag:
name="value". <a href="…">links: absolute URLs, relative paths,#id,mailto:,tel:. Write link text that makes sense on its own.<img src alt width height>: always write alt (oralt=""for decoration) and the size.<figure>+<figcaption>caption an image.
Tomorrow: structuring whole pages with semantic elements, and tables.
Knowledge check
Test what you learned
5 questions · pick an answer to see if you're right
- 1
Which attribute holds a link's destination?
- 2
What's the difference between href="https://example.com/about" and href="about.html"?
- 3
How do you link to the section <h2 id="faq">?
- 4
What should the alt text of a photo of a red bicycle by a lake say?
- 5
Why give an <img> width and height attributes?
Was this lesson helpful?
Need a breather? Take a two-minute break