HTML — Lesson 9
HTML Attributes Deep Dive
Mastering attributes that customize element behavior.
HTML Attributes Deep Dive
Attributes provide additional information about HTML elements. They appear inside opening tags and control behavior, identity, styling, and accessibility.
Common Global Attributes
<div
id="main-content" <!-- Unique identifier -->
class="container box" <!-- CSS classes (space-separated) -->
style="color: red;" <!-- Inline CSS -->
title="Tooltip text" <!-- Tooltip on hover -->
>Content</div>
href & src Attributes
<!-- href: destination URL for links -->
<a href="https://example.com">Visit</a>
<a href="mailto:hi@example.com">Email Us</a>
<!-- src: source file for images, scripts, etc. -->
<img src="photo.webp" alt="Description">
<script src="app.js"></script>
Boolean Attributes
Some attributes work as simple on/off switches. Their mere presence means "true".
<input type="text" disabled> <!-- Disabled -->
<input type="text" required> <!-- Required field -->
<input type="checkbox" checked> <!-- Pre-checked -->
<video autoplay muted></video> <!-- Both present -->
data-* Custom Attributes
Store custom data on any element using the data- prefix. Accessible via JavaScript.
<div data-user-id="42" data-role="admin">User Panel</div>
<!-- Access in JavaScript -->
<script>
const div = document.querySelector("[data-user-id]");
console.log(div.dataset.userId); // "42"
console.log(div.dataset.role); // "admin"
</script>
aria-* Accessibility Attributes
<!-- aria-label provides text for screen readers -->
<button aria-label="Close menu">×</button>
<!-- aria-hidden hides decorative elements -->
<span aria-hidden="true">★★★</span>
<!-- aria-expanded shows expandable state -->
<button aria-expanded="false">Menu</button>
Tip: Use
id for unique elements (only once per page). Use class for reusable styles (can be used many times). Never use id for styling alone - reserve it for JavaScript and label associations.
Practice what you learned in the Deoit Editor — a free, browser-based code editor.
Open Editor →