Reference · module 2
Links and images
Everything this module explains, on one page.
Attributes
Add extra information to a tag with attributes.
- Attributes go inside the opening tag and add details: <p class="note">. Each one is a name, an equals sign and a value in quotes.
- An element can have several attributes separated by spaces: <img src="cat.jpg" alt="A cat">. Their order does not matter, but each name appears only once.
- Two attributes work on every element. class groups elements for styling and can repeat across the page. id names one unique element and must not repeat.
The mistake you are about to make
<p>class="note" Hi</p>
<p class="note">Hi</p>
The attribute looks like part of the content, so it drifts after the >. Attributes only work inside the opening tag, before the >.
Links
Link to other pages and sites with the a element.
- A link is <a href="https://example.com">Example</a>. href holds the address, and the content between the tags is the clickable text the reader sees.
- Write link text that says where it leads. Click here tells nothing out of context; Opening hours tells a screen-reader user exactly what to expect.
- An absolute address includes the site: https://example.com/about. A relative one is inside your own site: href="about.html" opens about.html next to the current page.
The mistake you are about to make
<a>https://example.com</a>
<a href="https://example.com">Example</a>
The address is what matters, so it goes where the text is. The browser only follows href; without it the text is not a link at all.
Images
Put images on a page with a useful text alternative.
- An image is <img src="cat.jpg" alt="A grey cat asleep">. src is the file to load, and alt is the text shown if the image fails and read aloud by screen readers.
- Good alt text describes what matters in the picture for this page. A purely decorative image gets an empty alt="" so screen readers skip it.
- <img> has no closing tag, because it has no content: it is an empty element. The same goes for <br>, a line break, and <hr>, a divider.
The mistake you are about to make
<img src="cat.jpg"></img>
<img src="cat.jpg" alt="A cat">
Every element so far had a closing tag, so img seems to need one too. It is empty and never closes, and it does need alt.