HTML · Quick Reference

Lesson 6 — HTML Attributes Cheat Sheet

HTML

In one line: 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 s...

Key Ideas

1What 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 sepa...

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

3The 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 a...

4The 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 o...

5Boolean 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.

Code Examples

<!-- 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:/...

<!-- 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 -->
...

<!-- 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">S...