Attributes

We have already met attributes: href on a link, src and alt on an image. An attribute is an extra setting of an element. Some attributes exist only on certain tags, others fit any tag — they are called global.

Syntax

An attribute is written in the opening tag: a name, an equals sign and a value in quotes. Attributes are separated by spaces, and their order does not matter:

<p title="This is a tooltip">Hover over this paragraph.</p>

The value of the title attribute appeared as a tooltip. You can use double or single quotes — as long as they match on both sides.

Global attributes

id and class

An id must be unique on the page: anchor links and scripts rely on it. A class can be given to many elements, and one element can have several classes separated by spaces:

<style>
  .note { padding: 8px; background: #eef; }
  .warning { background: #fee; color: #900; }
</style>
 
<p id="intro">The introduction — it has a unique id.</p>
<p class="note">A regular note.</p>
<p class="note warning">A note with two classes.</p>

The third paragraph got the styles of both classes: the padding from note and the red colour from warning.

Boolean attributes

Some attributes need no value — all that matters is whether they are present. Such attributes are called boolean:

<p>A visible paragraph.</p>
<p hidden>This paragraph is hidden by the hidden attribute.</p>
<ol reversed>
  <li>Two</li>
  <li>One</li>
</ol>

Writing hidden="false" does not cancel hiding: the attribute is still present. To show the element, remove the attribute entirely.

The lang and style attributes

lang changes the language for part of the page, style styles a single element:

<p>The French say <span lang="fr">bon appétit</span> before a meal.</p>
<p style="color: teal; font-size: 20px;">Large teal text.</p>

style is handy for quick experiments, but styles usually live in a CSS file — that way they are easier to change across the whole site at once.

Your own data: data attributes

You can invent attributes that start with data- yourself. The browser leaves them alone, while scripts and CSS can read them:

<style>
  [data-status="sold"] { color: gray; text-decoration: line-through; }
</style>
 
<ul>
  <li data-status="available">Blue sweater</li>
  <li data-status="sold">Red sweater</li>
</ul>

CSS found the element by its data-status value and struck out the sold item.

Common mistake

Two elements with the same id are an error: a #name link and scripts will only find the first one. If you need to repeat styling, use class. And remember that a space in class separates classes: class="main title" is two classes, main and title, not one.