🏗️ Phase 2 · HTML Basics🟢 BeginnerModule 02

HTML Attributes

⏱ 18 min read📖 6 sections🧩 5-question quiz🏆 1 challenge

Course Progress17% complete

Attributes are the knobs and settings of HTML elements. They live inside the opening tag and provide extra information — where a link points, what image to display, which CSS class to apply. Without attributes, HTML elements would be limited to their defaults. With them, you have precise control over every element's behaviour and identity.

Section 1

What Are Attributes?

Attributes provide additional configuration for an HTML element. They always appear in the opening tag and follow the name="value" format. Multiple attributes are separated by spaces.

HTMLAttribute Syntax

<!-- Single attribute -->
<img src="photo.jpg">

<!-- Multiple attributes -->
<img src="photo.jpg" alt="A sunset over the mountains" width="800" height="600">

<!-- Anchor with multiple attributes -->
<a href="https://bitwithbite.com" target="_blank" rel="noopener">Visit BitWithBite</a>

📌

Key rules for attributes

• Always in the opening tag, never the closing tag
• Values in double quotes (single quotes also valid, but be consistent)
• Attribute names are case-insensitive, but use lowercase by convention
• Order doesn't matter, but put the most important attribute first

Section 2

Global Attributes

Global attributes work on any HTML element. They are the universal vocabulary of HTML attributes.

Attribute	Purpose	Example
`id`	Unique identifier on the page	`id="hero"`
`class`	Reusable CSS/JS hook (multiple allowed)	`class="btn primary"`
`style`	Inline CSS styles	`style="color:red"`
`title`	Tooltip text on hover	`title="Click to expand"`
`lang`	Language of the element's content	`lang="fr"`
`hidden`	Hides the element (like display:none)	`hidden`
`tabindex`	Controls keyboard focus order	`tabindex="0"`
`data-*`	Custom data storage	`data-id="42"`

Section 3

The id Attribute

The id attribute gives an element a unique identifier. No two elements on the same page should share the same id. It's used for CSS selection, JavaScript access, and anchor links.

HTML + CSS + JSUsing id

<!-- HTML -->
<section id="about">About us</section>

/* CSS — select by id */
#about { background: #0a1230; }

// JavaScript — access by id
const section = document.getElementById('about');

<!-- Anchor link to section -->
<a href="#about">Jump to About</a>

⚠️

id must be unique

Using duplicate ids on the same page causes bugs in JavaScript (getElementById only returns the first match) and fails HTML validation. Use class when you want to apply the same identifier to multiple elements.

Section 4

The class Attribute

The class attribute is the most commonly used attribute in web development. Unlike id, classes are reusable — you can apply the same class to many elements, and give one element multiple classes.

HTMLUsing class

<!-- Same class on multiple elements -->
<button class="btn">Save</button>
<button class="btn">Cancel</button>

<!-- Multiple classes on one element (space-separated) -->
<button class="btn btn-primary large">Submit</button>

/* CSS targets the class */
.btn { padding: 8px 16px; border-radius: 6px; }
.btn-primary { background: #ef4444; color: white; }
.large { font-size: 1.2rem; }

Section 5

Boolean Attributes

Some attributes are boolean — their presence alone makes them true. You don't need to write a value. If the attribute is present, it's active; if absent, it's not.

HTMLBoolean Attributes

<!-- disabled: prevents interaction -->
<button disabled>Can't Click Me</button>

<!-- checked: checkbox pre-selected -->
<input type="checkbox" checked>

<!-- required: field must be filled -->
<input type="email" required>

<!-- readonly: can view but not edit -->
<input type="text" value="Read only" readonly>

<!-- autofocus: element gets focus on page load -->
<input type="search" autofocus>

Section 6

Essential Attribute Reference

Here are the most important element-specific attributes you'll use daily:

Element	Attribute	Purpose
`<a>`	`href`, `target`, `rel`	Link destination, open in new tab, security
`<img>`	`src`, `alt`, `width`, `height`	Image source, description, dimensions
`<input>`	`type`, `name`, `placeholder`, `value`	Input type, form key, hint text, default value
`<form>`	`action`, `method`	Where data goes, GET or POST
`<label>`	`for`	Associates label with input id
`<script>`	`src`, `defer`, `async`	Script source, loading strategy
`<link>`	`rel`, `href`	Relationship type (stylesheet, icon), URL
`<meta>`	`name`, `content`, `charset`	Metadata type, value, encoding

🧩 Quick Check — Lesson 6

5 questions · instant feedback

1. Where do HTML attributes go?

2. Which attribute must be unique across the entire page?

3. What is a boolean attribute?

4. What does the alt attribute on <img> provide?

5. Which syntax correctly applies two CSS classes to an element?

🏆

Quiz Complete!

Attributes mastered! Moving on to headings.

🏆

Lesson 6 Challenge

Code exercise · 10 min

Build a contact card using correct attribute syntax.

Create an HTML page that contains all of the following with correct attributes:

1. An <a> link that opens bitwithbite.com in a new tab (use target="_blank" and rel="noopener noreferrer")
2. An <img> with a descriptive alt attribute, explicit width and height
3. A <div> with both an id and two separate CSS class values
4. A <button> with the disabled boolean attribute
5. An <input> with type="email", placeholder, and required

Show hints

Boolean attributes: just write the name, no ="value" needed
Multiple classes use spaces: class="card featured"
id values cannot contain spaces
Always put alt text in quotes, even if empty: alt=""

← HTML Elements

Lesson 6 of 35HTML Fundamentals

Headings →