# 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 October 31, 2026

## 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:

```html
<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:

```html
<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:

```html
<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.

```html
<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.

```html
<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:

```html
<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

- [Attribute](https://www.ask-codey.com/glossary/attribute-html)
- [Attribute value](https://www.ask-codey.com/glossary/attribute-value)
- [Boolean attribute](https://www.ask-codey.com/glossary/boolean-attribute)
- [id](https://www.ask-codey.com/glossary/id)
- [class attribute](https://www.ask-codey.com/glossary/class-attribute-html)
- [lang attribute](https://www.ask-codey.com/glossary/lang-attribute)

## Cheat sheets

- [Attributes](https://www.ask-codey.com/cheat-sheets/html-attributes-cheat-sheet)

## Related

- [Elements and Tags](https://www.ask-codey.com/lessons/html-elements-and-tags)
- [The Page Skeleton](https://www.ask-codey.com/lessons/html-the-page-skeleton)

Source: https://www.ask-codey.com/lessons/html-attributes