Attributes

Attributes add information to an element, such as its language, a tooltip or a name for it, written in the start tag as a name, an equals sign and a value in quotes.

Novice · HTML · Updated

After this lesson you can

  • Add an attribute to a start tag as a name, an equals sign and a value in quotes
  • Choose the right attribute for a job, such as id, class, title, lang or a boolean attribute like hidden

Key takeaways

  • An attribute adds information to an element. It goes in the start tag, written as a name, = and a value in quotes, such as title="Open daily".
  • Quote every value. Without quotes, a space ends the value, and the words after it turn into stray attributes.
  • id gives one element a name of its own, used once per page. class puts elements in a group, and many elements can share it.
  • lang says what language the text is in, and title adds a tooltip that appears when you hover.
  • A boolean attribute such as hidden is on when it's there and off when it isn't. Even hidden="false" hides the element.

A tag says what kind of box an element is. Very often you need to say a little more: which language the words are in, what a tooltip should say, which three menu items are vegan. You'll write this extra information on almost every page you build: every link needs to say where it goes, and every picture which file to show. That extra information is an attribute.

A sticker on the box

Think of the moving box again. The label says kitchen, and a sticker on the side adds fragile or this side up. The sticker doesn't change what's in the box; it tells whoever handles it something more.

An attribute is that sticker. It sits inside the start tag, after the tag's name:

<p title="Open seven days a week">7:00 a.m. to 3:00 p.m.</p>
  • title is the attribute's name: what kind of information this is.
  • = is read "equals". It joins the name to its value, with no spaces around it.
  • "Open seven days a week" is the attribute value, in quotation marks.

The title attribute shows its value as a tooltip: hover your mouse over the opening hours and a small box appears with Open seven days a week.

Try it. In your elements.html, add a title to a paragraph, save, and hover over the paragraph on the page until the tooltip appears.

Why the quotes matter

HTML lets you leave the quotes off a value that has no spaces. As soon as a value has a space, the space ends it. Look at what the browser makes of this:

<p title=Open seven days a week>7:00 a.m. to 3:00 p.m.</p>

The tooltip says only Open. The browser reads title=Open, then treats seven, days, a and week as four more attributes with no values. Nothing on the page warns you; the tooltip is wrong, and that's all. Quote every value, and this mistake can't happen. This course uses double quotes ("); single quotes (') work too.

Only in the start tag

Attributes belong in the start tag, never in the end tag. An element can have several, separated by spaces, in any order:

<p id="hours" title="Open seven days a week">7:00 a.m. to 3:00 p.m.</p>

The end tag stays plain: </p>. Writing </p title="..."> is a mistake, and the browser ignores what's in it.

id and class: a name tag and a group sticker

At a coffee shop, each order gets its own number: there's only one order 47. But a sticker that says vegan can go on many items at once.

<p id="special">Today's special: Blueberry Muffin, $3.25</p>
<p class="vegan">Oat Milk Latte: $4.50</p>
<p class="vegan">Cold Brew: $4.00</p>
  • id gives one element a name of its own, like an order number. Each id is used once per page, and has no spaces.
  • class puts elements in a group, like the sticker. Many elements can share a class, and one element can have several, separated by spaces: class="vegan seasonal".

On their own, id and class change nothing you can see. Stylesheets use them to style a group of elements, and links can jump straight to an id, which the lesson Links Within a Page, Email and Phone Links shows.

lang and title: language and tooltips

The lang attribute says what language an element's text is in, using a short code: en for English, es for Spanish, fr for French.

<p>Ask for our <span lang="es">café de olla</span>, made with cinnamon.</p>

A screen reader (software that reads a page aloud for people who can't see it) uses lang to pronounce the words in the right accent, and browsers use it to offer a translation. <span> is a box with no meaning of its own, used here so the Spanish words can carry their own lang. Every page puts lang on its outermost element, which the next lesson, The Page Skeleton, shows.

The title attribute adds a tooltip. It's a nice extra, but phones and tablets have no mouse to hover with, so never put anything important only in a title.

Boolean attributes: on or off

Some attributes are like a light switch: they're on or off, with nothing in between. These are boolean attributes (boolean means "true or false"). You write the name alone, with no value:

<p hidden>Closed on Thanksgiving Day.</p>

hidden hides the element from the page: the shop can keep its holiday notice ready in the HTML and show it only on the day. The attribute being there is what turns it on, so hidden="false" still hides the element: to show it, take the attribute away.

Check yourself

2 questions to try on the lesson page.

So what

Attributes are how every element says more about itself: where a link goes, what a picture shows, what language a page speaks. Write them in the start tag, quote every value, and they'll do exactly what you asked.

Key terms

Cheat sheets

Related