1. What is this?
An attribute is extra information inside an opening tag, written as name="value". For example, a link needs to know where to go, so the <a> tag carries an href attribute: <a href="https://example.com">. An image needs a source file, so <img> carries src.
2. Why do we use it?
The web is pages connected by links, illustrated with images. Without attributes you cannot navigate anywhere or show any media.
3. Syntax breakdown
<a href="https://example.com">Visit</a>
a = anchor (a link). href = destination. The text between tags is what the user clicks.
<img src="photo.jpg" alt="A dog">
img has no closing tag. src = file path. alt = text shown if the image fails, read by screen readers.
5. Common mistakes
- Forgetting quotes around attribute values: href=https://... breaks on special characters.
- Leaving out alt on images — screen-reader users get nothing.
- Linking to a file path that does not exist, giving a broken-image icon.
Practice task
Add a second link that opens your favourite site, and change the image alt text to describe it accurately.
Hint
Duplicate the <a ...> line and change the href and the text.
Try it below — tests run automatically when you press Run.
Live preview (sandboxed)
Output
Press Run to see output.
Mini quiz
3 questions. Answer, then check.
1. What is an attribute?
2. Which attribute tells a link where to go?
3. Why does <img> need alt?