Attributes
Give elements extra information: ids, classes, and the attributes you will use every day.
Attributes add information about an element, written inside the opening
tag as name="value" pairs:
<a href="https://example.com">Visit example.com</a>
href is an attribute of the a element. Without it, the link has nowhere
to go.
Attributes you will use every day
<img src="cat.png" alt="A sleepy orange cat" width="320" />
<p id="intro" class="highlight">Hello!</p>
src— where an image livesalt— text describing the image (screen readers and broken images rely on it)width/height— size hints that stop layout jumpingid— a unique name for one element on the pageclass— a group name an element can share with others
Booleans and quotes
Some attributes need no value — their presence is the value:
<input disabled />
Values go in quotes (single or double — pick one style and stay consistent). Technically some simple values can go unquoted, but quoting everything is the habit that never bites you.
Why ids and classes matter
You will use id and class constantly in CSS (Phase: styling) and
JavaScript (later phases). id finds one element; class styles
many. A page where two elements share an id is invalid HTML —
browsers will not stop you, but your own code will get confusing fast.
What you learned
- Attributes configure elements:
name="value"inside the opening tag idis unique per page;classis shareable- Boolean attributes exist (
disabled,required) - Quote every attribute value — consistency is a feature