Skip to main content

Attributes

beginner10 min readLesson 7 of 143

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 lives
  • alt — text describing the image (screen readers and broken images rely on it)
  • width / height — size hints that stop layout jumping
  • id — a unique name for one element on the page
  • class — 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
  • id is unique per page; class is shareable
  • Boolean attributes exist (disabled, required)
  • Quote every attribute value — consistency is a feature