Level:Beginner

HTML Attributes

Attributes add extra information to an HTML element—like where a link goes, where an image loads from, or how an element can be identified and styled.

What is an Attribute?

  • An attribute is extra information written inside an element’s opening tag.
  • Most attributes follow a name="value" pattern (example: href="https://example.com").
  • Attributes can control behavior (like disabled), meaning (like alt), and styling/hooks (like class and id).

Where Attributes Go

  • Attributes go inside the opening tag: <a href="...">
  • You can add multiple attributes separated by spaces: <img src="..." alt="..." width="160">
  • Attribute order usually doesn’t matter, but keep it consistent for readability.

Types of Attributes

  • Element-specific attributes: only make sense on certain elements (example: href on <a>).
  • Global attributes: can be used on almost any element (example: id, class, title).
  • Boolean attributes: have no value—if present, they’re considered true (example: disabled, checked).
  • Accessibility attributes: help users with assistive tech (example: alt for images, aria-label when needed).

Example: Attributes in Real HTML

HTML Attributes Examplehtml
<!-- Attributes live inside the opening tag -->
<h1 style="color: red;">Heading</h1>

<!-- class and id help you target elements with CSS/JS -->
<p id="intro" class="lead">This is a paragraph.</p>

<!-- src tells the browser where the image is, alt describes it for accessibility -->
<img src="https://via.placeholder.com/160" alt="Placeholder image" />

<!-- href sets the link destination -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Visit Example</a>

<!-- Boolean attribute: disabled means “true” when present -->
<button disabled>Disabled button</button>

Preview

localhost:3000
Loading preview...
<h1 style="color: red;">Heading</h1>

HTML element = a tag + (optional) content. Attributes go inside the opening tag and provide extra info (like a URL, label, or behavior).

Tag name

h1

Attributes

style="color: red"

Tip: Values are usually written as name="value". If an attribute has no value (like disabled), it’s a boolean attribute.

Attribute Breakdown

  • style→"color: red"

Purpose: Adds inline CSS. Here it makes the heading text red.

<p id="intro" class="lead">...</p>

HTML element = a tag + (optional) content. Attributes go inside the opening tag and provide extra info (like a URL, label, or behavior).

Tag name

p

Attributes

id="intro, lead" class

Tip: Values are usually written as name="value". If an attribute has no value (like disabled), it’s a boolean attribute.

Attribute Breakdown

  • id→"intro, lead"
  • class→Boolean: present = true

Purpose: id is a unique identifier; class groups elements for CSS/JS targeting.

<img src="https://via.placeholder.com/160" alt="Placeholder image" />

HTML element = a tag + (optional) content. Attributes go inside the opening tag and provide extra info (like a URL, label, or behavior).

Tag name

img

Attributes

src="image URL, text description" alt

Tip: Values are usually written as name="value". If an attribute has no value (like disabled), it’s a boolean attribute.

Attribute Breakdown

  • src→"image URL, text description"
  • alt→Boolean: present = true

Purpose: src loads the image; alt is important for accessibility and SEO.

<a href="https://example.com" target="_blank" rel="noopener noreferrer">...</a>

HTML element = a tag + (optional) content. Attributes go inside the opening tag and provide extra info (like a URL, label, or behavior).

Tag name

a

Attributes

href="URL, _blank, noopener noreferrer" target rel

Tip: Values are usually written as name="value". If an attribute has no value (like disabled), it’s a boolean attribute.

Attribute Breakdown

  • href→"URL, _blank, noopener noreferrer"
  • target→Boolean: present = true
  • rel→Boolean: present = true

Purpose: href is the destination. target opens a new tab. rel improves security for new-tab links.

<button disabled>Disabled</button>

HTML element = a tag + (optional) content. Attributes go inside the opening tag and provide extra info (like a URL, label, or behavior).

Tag name

button

Attributes

disabled="(boolean attribute)"

Tip: Values are usually written as name="value". If an attribute has no value (like disabled), it’s a boolean attribute.

Attribute Breakdown

  • disabled→"(boolean attribute)"

Purpose: Boolean attribute: if present, it’s considered true (button becomes unclickable).

Remember the Syntax

Most attributes use: name="value". Some are boolean (like disabled) and work just by being present.

Practice (Try It)

  • Add an id to the paragraph and a class to the heading.
  • Change the image alt text to describe what the image is.
  • Update the link href to your own website or another page.
  • Add a boolean attribute like disabled to a button.