Attributes

Attributes go inside the opening tag — they configure how the element behaves. `href`, `src`, `id`, `class`, `alt` are the ones you'll see every day.

3 min read Level 1/5 #html#attributes#id

What you'll learn

Read and write attributes
Use `id` and `class`
Recognize global attributes

An attribute is a name="value" pair inside an opening tag. Attributes tell the browser more about the element — where a link goes, where an image lives, what role this element plays.

The Shape

<a href="/about" target="_blank" rel="noopener">About</a>
<img src="/photo.jpg" alt="A sunset" width="800" height="600" />
<input type="email" name="email" required />

Multiple attributes are separated by spaces. Quotes can be single or double — be consistent.

Boolean Attributes

Some attributes have no value — their presence alone means “true”:

<input type="checkbox" checked />
<button disabled>Wait</button>
<input required />
<video controls></video>

checked, disabled, required, controls, autoplay, hidden — all are toggles.

Global Attributes — On Every Element

A few attributes work on virtually every element. The most common:

Attribute	What it does
`id`	A unique identifier (one per page)
`class`	One or more class names for styling
`style`	Inline CSS (use sparingly)
`title`	Tooltip text on hover
`lang`	Override the document language for this element
`data-*`	Custom data (e.g., `data-user-id="42"`)
`hidden`	Hide the element from rendering

`id` vs `class`

<div id="main">       <!-- one element per id, page-wide -->
<p class="lead">      <!-- same class on many elements is fine -->
<p class="lead big">  <!-- multiple classes — space-separated -->

id — unique on the page. Used for anchor links (#main), for <label htmlFor>, and for picking ONE element in JavaScript.
class — repeatable. Mostly for CSS and JS to find groups.

`data-*` Attributes

For attaching custom data:

<button data-action="delete" data-id="42">Delete</button>

JavaScript can read these. Custom but valid HTML.

Up Next

Text content — the bit between the tags.

Text Content →