Tags tell the browser what an element is. Attributes tell it more about that element — where a link goes, which image to show, what a section is called. They are how you turn a plain tag into something useful.
1How an attribute is written
Attributes always go inside the opening tag, after the tag name, written as name="value":
- The name says which attribute it is (here,
href— the link's destination). - The value goes in quotes after an equals sign.
- You can add several attributes, separated by spaces:
<img src="cat.jpg" alt="A cat">.
Always wrap values in quotes.
<a href=/about> may sometimes work, but a value with a space — like a title — will break without quotes. Quote everything and you will never get caught out.Key points
- Attributes go inside the opening tag as
name="value". - Separate multiple attributes with spaces.
- Always wrap the value in quotes — it avoids a whole class of bugs.
2The attributes you'll use most
| Attribute | Used on | What it does |
|---|---|---|
href | <a> | The address a link points to. |
src | <img>, media | The file source to load. |
alt | <img> | Text description of an image (vital for accessibility and SEO). |
id | any element | A unique name for one element on the page. |
class | any element | A shared label you can reuse on many elements (mainly for CSS). |
id vs class — the one thing to remember
An id must be unique — only one element on the whole page may have a given id, like a passport number. A class can be reused on as many elements as you like, like a job title. You will lean on class constantly once you reach CSS.
HTML
CSS
Live preview
What's happening: The href attribute decides where the link goes. Edit its value and the link in the preview updates. The title attribute is the little tooltip you see on hover.
Key points
hrefsets a link's destination;srcsets a file to load;altdescribes an image.idis unique (one per page);classis reusable across many elements.- You will use
classheavily once you start writing CSS.
★ Practical: a described image link
Using what you know, write (in any playground):
- An
<a>element with anhrefpointing to a website you like. - Add a
titleattribute so a tooltip appears on hover. - Give the link a
class="cta"so you could style it later. - Confirm every attribute value is wrapped in quotes.
Ready to test yourself?
Take the short quiz. Score 60% or more to mark this lesson complete.
Start the quiz →💡 Log in to save your progress and earn the certificate.