Attributes

An element says what something is. An attribute adds detail to it: which image, which language, which one of several. You have already used a few without stopping to look at them.

<html lang="en">
<meta charset="utf-8">
<img src="canteen.jpg" alt="The counter at lunchtime">

The shape

An attribute is a name, an equals sign, and a value in quotes, written inside the opening tag:

<p id="opening-hours">Open from eight until six.</p>

Rules worth getting right immediately:

Attributes go in the opening tag only. Never in the closing tag.
Separate multiple attributes with a space.
Put the value in double quotes.

<img src="biryani.jpg" alt="A plate of chicken biryani" width="400">

Three attributes, one space between each.

Quote your values

HTML will forgive you for leaving quotes off a value with no spaces in it:

<img src=biryani.jpg>

That works. This does not:

<img alt=A plate of biryani>

The browser reads the value as A, then treats plate, of and biryani as three more attributes it does not recognise. Your alternative text is now the single letter A, and nothing warns you.

So: always quote. It costs two characters and removes a whole category of silent bug.

Some attributes have no value

A few are just present or absent:

<input type="checkbox" checked>
<script src="app.js" defer></script>
<button disabled>Sold out</button>

checked, defer and disabled are boolean attributes. Writing the name switches it on; leaving it out switches it off. There is no checked="false" — if you do not want it checked, remove the attribute entirely. Writing checked="false" switches it on, because the attribute is present.

id: one element, one page

id gives an element a unique name:

<h2 id="opening-hours">Opening hours</h2>

Now you can link straight to it from anywhere:

<a href="#opening-hours">Jump to opening hours</a>

That # means an id on this page. Click it and the browser scrolls to that element. It works in an address bar too, which is how you send someone a link to one section of a long page.

An id must be unique in the document. Not "should be" — must. It is the whole point: an id names one specific element.

Duplicate one and things break, quietly and confusingly. Two elements share id="menu"; the link jumps to the first and appears to ignore the second. A form label points at the wrong field, so tapping the label focuses something else. Nothing errors. The page simply behaves oddly in ways that are miserable to track down.

Choose ids that describe the thing, in lowercase with hyphens:

<section id="todays-menu">
<footer id="site-footer">

Not id="div2".

class: as many as you like

A class labels an element as one of a kind:

<p class="price">350 rupees</p>
<p class="price">280 rupees</p>
<p class="price">40 rupees</p>

Three elements, same class, and that is entirely correct. Classes are for grouping — "these are all prices" — so CSS can style all of them at once.

The split is worth stating plainly, because it is the thing people muddle:

id — this one specific element. Once per page.
class — this kind of element. As often as you like.

An element can have several classes, separated by spaces:

<p class="price discounted">280 rupees</p>

That is two classes, price and discounted, not one class called "price discounted". CSS can then style everything with price, and additionally style the discounted ones.

Attributes every element can take

Some attributes work on any element at all. These are the global attributes, and you have met three:

id and class, as above.

lang, which you put on <html> for the whole page but can also use on one element when it switches language:

<p>The sign outside says <span lang="ur">خوش آمدید</span>.</p>

A screen reader will switch pronunciation for that phrase and back again.

title, which supplies advisory text most browsers show as a tooltip on hover:

<abbr title="Pakistan Standard Time">PST</abbr>

Be careful with title: it does not appear on touchscreens, where there is no hover, and screen reader support is inconsistent. It is a nice extra, never the only place information lives.

Attributes specific to one element

Most attributes belong to particular elements. src and alt mean something on <img> and nothing on <p>. You will meet them as you meet the elements — href with links, type with form inputs.

Two on <img> are worth flagging now, since you will use images early:

<img src="canteen.jpg" alt="The canteen counter at lunchtime">

src is which file. alt is what the image shows, in words, for anyone who cannot see it — a blind reader, or anyone at all when the file fails to load. It is not optional and it is not a caption. Describe the content: alt="The canteen counter at lunchtime", never alt="image" or alt="photo1".

Together

<body>
  <h1>Lahore Canteen</h1>

  <nav>
    <a href="#todays-menu">Menu</a>
    <a href="#opening-hours">Hours</a>
  </nav>

  <section id="todays-menu">
    <h2>Today's menu</h2>
    <p class="price">Biryani — 350 rupees</p>
    <p class="price discounted">Pulao — 280 rupees</p>
  </section>

  <section id="opening-hours">
    <h2>Opening hours</h2>
    <p>Eight until six, closed Friday.</p>
  </section>
</body>

Two ids, each used once, each linked to from the navigation. One class used twice, plus a second class on the discounted item. Every attribute quoted.

Next: comments and checking your work — because a page that looks fine in your browser can still be broken, and there is a free tool that tells you. If you have not read attributes' companion lesson on text, it pairs well with this one.