Attributes

Extra information for an element

Tags say what an element is. Attributes add details about it. A link needs to know where it goes; an image needs to know which file to show; a form field needs to know what kind of data it accepts.

<a href="https://example.com">Visit the example site</a>

Here href is the attribute name and https://example.com is its value. Together they tell the link where to send the visitor.

The rules of the syntax

• Attributes go in the opening tag, after the element name.
• Each one is written as name="value".
• Several attributes are separated by spaces, in any order.

<p title="Shown when you hover over the paragraph" lang="en">
  Hover over this paragraph to see its title attribute.
</p>
<img src="https://picsum.photos/seed/learn/320/180" alt="A random landscape photo" width="320" height="180">

Press Try it and change the width and height values to see the image resize.

Always use quotes

HTML lets you leave out quotes when a value has no spaces, so width=320 works. But class=main card does not do what you expect: the browser reads class="main" and then a second, meaningless attribute called card.

Quoting every value removes a whole category of bugs. Single quotes work too, but double quotes are the near-universal convention. If a value itself contains a double quote, wrap it in single quotes or write the quote as ".

Boolean attributes

Some attributes are simple switches. They are on when present and off when absent:

<label>Name <input type="text" required></label>
<label>Customer ID <input type="text" value="C-1042" disabled></label>
<button disabled>Submit</button>

A trap catches many beginners here: writing disabled="false" does not enable the field. Any value, even "false", counts as present. To switch a boolean attribute off, remove it.

id and class: names for elements

Two attributes work on almost every element and you will use them constantly once you start writing CSS and JavaScript.

id gives one element a unique name. It must not appear twice on the same page. Typical uses are jumping to a section with a link (href="#pricing") and connecting a label to a form field.

class puts an element into a group. Many elements can share a class, and one element can belong to several classes, separated by spaces.

<section id="pricing">
  <div class="card">Basic plan</div>
  <div class="card featured">Pro plan</div>
  <div class="card">Team plan</div>
</section>

All three plans share the card class, so one CSS rule can style them all. The Pro plan also has featured, so it can be highlighted. The section has a unique id, so a link elsewhere on the page can jump straight to it.

A good rule of thumb: use classes for styling, and ids for single, unique targets.

Naming tips

Names are for humans. Describe what something is, not what it looks like: class="warning" stays correct when you later change warnings from red to orange, while class="red-text" becomes misleading. Use lowercase letters and hyphens, such as product-card. Spaces are not allowed inside a single class name, because a space starts the next class.

Common mistakes

• Putting attributes in the closing tag, such as </a href="...">. Closing tags never have attributes.
• Forgetting the space between attributes: src="a.jpg"alt="..." happens easily when typing fast.
• Reusing an id. Duplicate ids cause subtle bugs: links jump to the wrong place and labels point to the wrong field.
• Using disabled="false" to enable something.

Exercise

Write three paragraphs about three different fruits. Give every paragraph the class fruit, give the one about your favourite fruit an extra class favourite, and give the first paragraph the id first-fruit. Then add a title attribute to one paragraph and hover over it in the result.

<p id="first-fruit" class="fruit">Mangoes are sweet and best in early summer.</p>
<p class="fruit favourite" title="My favourite">Guavas are crunchy and full of vitamin C.</p>
<p class="fruit">Bananas are the easiest snack to carry.</p>