Attributes Explained: id, class, and title

You have already used attributes like href and src. This lesson explains what attributes are and introduces three general-purpose attributes you will use on almost every project.

What is an attribute?

An attribute adds information to an element. It lives inside the opening tag, never the closing tag.

<a href="about.html">About</a>

Here href is the attribute name and "about.html" is its value.

Attribute syntax

All attributes follow the same pattern:

name="value"

The name and value are separated by =
The value is wrapped in double quotes
No spaces around the =

<!-- Correct -->
<img src="photo.jpg" alt="A sunset">

<!-- Also valid (single quotes) — less common -->
<img src='photo.jpg' alt='A sunset'>

Multiple attributes

An element can have any number of attributes, separated by spaces:

<a href="https://example.com" target="_blank" title="Opens in new tab">Visit</a>

Order does not matter.

The `id` attribute

id gives an element a unique identifier on the page. No two elements should share the same id.

<h2 id="contact">Contact Us</h2>
<p id="intro">Welcome to the site.</p>

Common uses:

Linking directly to a section of a page: <a href="#contact">Jump to contact</a>
Targeting elements with CSS or JavaScript

The `class` attribute

class assigns an element to a named group. Unlike id, a class can be used on many elements.

<p class="note">Remember to save your work.</p>
<p class="note">Back up your files regularly.</p>

An element can also belong to multiple classes (space-separated):

<p class="note highlight">This is both a note and highlighted.</p>

Classes are the primary way CSS selects and styles elements.

The `title` attribute

title provides tooltip text — a small pop-up that appears when the user hovers over the element.

<abbr title="HyperText Markup Language">HTML</abbr>
<a href="glossary.html" title="View the full glossary">Glossary</a>

title is informational, not critical — many mobile users never see tooltips.

`id` vs `class` — a quick comparison

	`id`	`class`
Uniqueness	One per page	Reusable across elements
Purpose	Unique identification	Grouping by type or role
CSS/JS targeting	`#intro`	`.note`

Exercise

Open index.html in VS Code. Add attributes to the elements you have already built:

1. Give your <h1> an id of "page-title":

<h1 id="page-title">Mountain Hiking</h1>

2. Give each of your <p> elements the class "content". If you have two paragraphs, both get the same class:

<p class="content">Hiking is one of the best ways...</p>
<p class="content">Good boots and a reliable pack...</p>

3. Find the external link you added in the links lesson and add a title attribute so hovering over it shows a tooltip:

<a href="https://wikipedia.org" title="Opens Wikipedia in this tab">Wikipedia</a>

Save and reload in your browser. Hover over the link — you should see the tooltip text appear after a moment.

These attributes do not visually change anything yet. You will use id and class extensively when you reach CSS.

Recap

Attributes appear inside opening tags in name="value" format.
Elements can have multiple attributes separated by spaces.
id is a unique identifier — one per page.
class groups elements — reusable and stackable.
title adds hover tooltip text.