Lesson 30: HTML Attributes Deep Dive — The Power of Attributes

"The plans of the diligent lead to profit as surely as haste leads to poverty." — Proverbs 21:5 (NIV)

Quest Briefing

Attributes are the settings on every HTML element — they modify behavior, provide identity, and connect elements to CSS and JavaScript. You've used many already (href, src, alt, class, id). This lesson covers the global attributes — the ones that work on every HTML element, not just specific ones.

By the end of this lesson you'll know every significant global attribute, how data-* attributes let you store custom data in HTML, and the foundational ARIA attributes that power accessibility.

Prerequisites

Lesson	Topic
Lesson 18	What is HTML?
Lesson 29	Semantic HTML

Global Attributes

Global attributes work on any HTML element. You can put them on a <div>, a <p>, a <button>, a <table>, or even a <html> element.

`id` — Unique Identity

<section id="about">
    <h2>About Us</h2>
</section>

<!-- Link to it -->
<a href="#about">About</a>

<!-- Select it with JavaScript -->
<script>
    const about = document.getElementById('about');
</script>

/* Select it with CSS */
#about {
    background: lightblue;
}

Rules:

Must be unique per page — no two elements can share an id
No spaces — use hyphens: id="my-section", not id="my section"
Case-sensitive — #About and #about are different
Can start with letters, underscores, or hyphens — not numbers in legacy systems (fine in HTML5)

Use id for:

Anchor link targets (#section-name)
Pairing <label> with <input> (for attribute)
Unique JavaScript targeting
Unique CSS targeting (use sparingly — classes are more reusable)

`class` — Reusable Categories

<p class="highlight">This text is highlighted.</p>
<p class="highlight large-text">Multiple classes, space-separated.</p>
<button class="btn btn-primary btn-large">Click Me</button>

Unlike id, class can be:

Shared by multiple elements — many elements can have the same class
Multiple on one element — space-separated list
Reused anywhere — it's the primary hook for CSS

Classes are the main tool for CSS styling. Nearly every CSS rule you write will target a class.

id vs class:

id → single unique element on this page
class → a category/type that can apply to many elements

`style` — Inline CSS

<p style="color: red; font-weight: bold; margin-top: 20px;">Inline styled paragraph.</p>

The style attribute accepts CSS declarations directly on the element. This is almost always the wrong approach — it:

Can't be reused across multiple elements
Can't be changed with media queries
Has the highest specificity (overrides all stylesheet rules unless you use !important)
Makes maintenance extremely difficult

When to use inline style:

Dynamic values set by JavaScript (element.style.left = x + 'px')
Email HTML (email clients have poor CSS support)
Third-party contexts where you can't control the stylesheet

For everything else, use a class and a stylesheet.

`title` — Tooltip

<abbr title="HyperText Markup Language">HTML</abbr>
<img src="logo.svg" alt="LokiSoft Logo" title="Click to go to the home page">
<button title="Submit your contact form">Submit</button>

title adds a tooltip that appears on hover. Browsers show the title text in a small box after a short delay.

Limitations:

Not accessible on touch devices (no hover on mobile)
Screen reader behavior is inconsistent — some announce it, some don't
Not a reliable accessibility mechanism

Use title for supplementary hints, not critical information. For abbreviations (<abbr>), title is the standard expansion mechanism.

`hidden` — Invisible but in the DOM

<div id="error-message" hidden>
    <p>There was an error processing your request. Please try again.</p>
</div>

The hidden attribute removes the element from the visual display and from the accessibility tree — screen readers won't announce it. The element is still in the DOM and accessible via JavaScript.

This is different from CSS display: none (same visual effect, but hidden is semantic — it communicates "this isn't currently relevant") and CSS visibility: hidden (hides but preserves space).

// Show the error message
document.getElementById('error-message').removeAttribute('hidden');
// or:
document.getElementById('error-message').hidden = false;

`tabindex` — Keyboard Navigation Order

<!-- Make a div focusable (tabindex=0 = natural tab order) -->
<div tabindex="0" role="button">Click me</div>

<!-- Remove from tab order (tabindex=-1 = focusable via JS, not tab) -->
<div tabindex="-1" id="modal-content">Modal content...</div>

<!-- Custom tab order (positive numbers — generally avoid this) -->
<input tabindex="1" type="text"> <!-- focused first -->
<input tabindex="2" type="text"> <!-- focused second -->

tabindex controls keyboard tab navigation:

tabindex="0" — element is in the natural tab order (after natively focusable elements like links and inputs)
tabindex="-1" — element can be focused by JavaScript (element.focus()) but not by tab key
tabindex="1" or higher — positive numbers create a custom tab order (this is almost always wrong — it creates a confusing, non-intuitive navigation order)

Best practices:

Use semantic elements (<button>, <a>, <input>) — they're focusable by default
Use tabindex="0" only when you need a non-standard element to be focusable
Use tabindex="-1" for programmatic focus management (e.g., focusing a modal when it opens)
Never use positive tabindex values

`contenteditable` — Editable Content

<div contenteditable="true">
    Click here to edit this text inline.
</div>

<blockquote contenteditable="true" spellcheck="true">
    This quote can be edited by the user.
</blockquote>

contenteditable="true" makes any element's content editable directly in the browser — like a mini text editor. This powers browser-based WYSIWYG editors like those in blog platforms.

Values:

contenteditable="true" — editable
contenteditable="false" — explicitly not editable (used to mark non-editable regions inside an editable parent)
contenteditable="" — same as true

`draggable` — HTML5 Drag and Drop

<div draggable="true" class="drag-card">
    Drag me!
</div>

draggable="true" enables HTML5 drag-and-drop. The actual behavior requires JavaScript event handlers (dragstart, dragover, drop, etc.). The attribute alone just enables the visual drag affordance.

`spellcheck` — Spell Checking

<!-- Enable spell check (default for inputs and contenteditable) -->
<textarea spellcheck="true"></textarea>

<!-- Disable spell check -->
<input type="text" spellcheck="false" placeholder="Enter code here...">

Controls whether the browser's spell checker runs on this element. Useful to disable in code input fields.

`translate` — Translation Control

<!-- Don't translate this content (product name, code) -->
<span translate="no">Next.js</span>
<code translate="no">git commit -m "message"</code>

<!-- Default — translate this content -->
<p translate="yes">This paragraph will be translated.</p>

When browser translation tools or services like Google Translate process the page, elements with translate="no" are left as-is. Essential for proper nouns, brand names, code samples, and technical terms.

`data-*` — Custom Data Attributes

The data-* attribute syntax lets you store custom data in HTML elements — data that doesn't have a semantic HTML attribute and that you want accessible to JavaScript or CSS:

<!-- data-userid, data-role, data-premium are all valid custom attributes -->
<li 
    data-user-id="12345"
    data-role="admin"
    data-premium="true"
    class="user-item"
>
    Jane Smith
</li>

<button data-action="delete" data-target="comment-42">Delete Comment</button>

<div data-chart-type="bar" data-color-scheme="blue" id="sales-chart"></div>

Accessing `data-*` with JavaScript

const item = document.querySelector('.user-item');

// Reading data attributes
console.log(item.dataset.userId);   // "12345" (camelCase conversion: data-user-id → dataset.userId)
console.log(item.dataset.role);     // "admin"

// Writing data attributes
item.dataset.premium = 'false';     // Updates data-premium attribute

// Via getAttribute (less convenient)
console.log(item.getAttribute('data-user-id')); // "12345"

Note: data-user-id (kebab-case in HTML) becomes dataset.userId (camelCase in JavaScript).

Using `data-*` with CSS

/* Style elements based on their data attributes */
[data-role="admin"] {
    border: 2px solid gold;
    font-weight: bold;
}

[data-premium="true"]::after {
    content: " ★ PRO";
    color: orange;
}

Real-World Uses of `data-*`

Storing server-generated IDs on DOM elements for JavaScript to read
Flagging elements for JavaScript behavior: data-modal-target, data-toggle
Storing component configuration: data-chart-type, data-animation-delay
The quiz system on this very course site uses data-quiz-question, data-quiz-option, data-correct, and data-explanation — all custom data-* attributes!

When should you use `data-*` vs a class or ID?

class — for CSS styling groups ("this element is a button")
id — for unique element identity ("this is THE main search bar")
data-* — for data associated with an element ("this card is for user #12345, who has role admin")

If you're storing a piece of information that CSS or JavaScript needs to read, data-* is the right tool.

ARIA Attributes — Accessibility Enhancement

ARIA stands for Accessible Rich Internet Applications. ARIA attributes tell assistive technologies (screen readers) what an element is and what it's doing, for cases where HTML semantics aren't sufficient.

Don't use ARIA when a native HTML element exists that provides the same semantics. `<button>` is better than `<div role='button' tabindex='0'>`. `<nav>` is better than `<div role='navigation'>`. ARIA supplements HTML semantics; it doesn't replace them.

`role` — Defining What an Element Is

<!-- When you must use a div as a button (rare — prefer real <button>) -->
<div role="button" tabindex="0">Click Me</div>

<!-- Landmark roles for older browsers -->
<div role="main">Main content</div>
<div role="navigation">Navigation</div>
<div role="complementary">Sidebar</div>
<div role="banner">Header</div>
<div role="contentinfo">Footer</div>

The ARIA role attribute overrides an element's default semantics. The landmark roles map to semantic HTML5 elements — use the HTML elements whenever possible.

`aria-label` — Accessible Name

<!-- Button with only an icon needs a label -->
<button aria-label="Close dialog">
    <img src="x-icon.svg" alt="">
</button>

<!-- Multiple navs need distinguishing labels -->
<nav aria-label="Main site navigation">...</nav>
<nav aria-label="Pagination">...</nav>

aria-label provides an accessible name for an element when visible text isn't sufficient or doesn't exist.

`aria-labelledby` — Reference Another Element as the Label

<h2 id="billing-heading">Billing Address</h2>
<form aria-labelledby="billing-heading">
    ...
</form>

aria-labelledby points to the id of another element that serves as the accessible name. Stronger than aria-label because the label text is visible on screen.

`aria-describedby` — Reference a Description

<input type="password" id="pw" aria-describedby="pw-hint">
<p id="pw-hint">Password must be at least 8 characters and include a number.</p>

aria-describedby links to supplementary description text. Screen readers announce both the label and the description.

`aria-hidden` — Hide from Screen Readers

<!-- Icon decorating text — screen reader should skip it -->
<button>
    <svg aria-hidden="true">...</svg>
    Send Message
</button>

<!-- Decorative flourish -->
<span aria-hidden="true">✦</span>

aria-hidden="true" hides an element from the accessibility tree while keeping it visible on screen. Use for decorative elements that would create noise for screen reader users.

`aria-expanded` — State of a Toggle

<button aria-expanded="false" aria-controls="dropdown-menu">
    Settings
</button>
<ul id="dropdown-menu" hidden>
    <li><a href="/profile">Profile</a></li>
    <li><a href="/settings">Settings</a></li>
</ul>

aria-expanded announces the current state of a toggle (collapsed/expanded). Update it via JavaScript when the toggle changes:

btn.setAttribute('aria-expanded', 'true');
menu.removeAttribute('hidden');

`aria-current` — Current Page or Item

<nav aria-label="Breadcrumb">
    <ol>
        <li><a href="/">Home</a></li>
        <li><a href="/courses">Courses</a></li>
        <li><a href="/html" aria-current="page">HTML</a></li>
    </ol>
</nav>

aria-current="page" marks the current page in a navigation. Screen readers announce "current page" for that link. Other values: aria-current="step", aria-current="date", aria-current="true".

Knowledge Check

id is for HTML; class is for CSS — they can't be used interchangeably

id is case-sensitive; class is case-insensitive

id must be unique per page (one element only); class can be shared by many elements and an element can have multiple classes

id applies only to block elements; class applies to inline elements

element.data['user-id']

element.dataset.userId

element.dataAttributes.userId

element.getAttribute('userId')

Removes the element from the DOM entirely

Makes the element the first thing focused when the page loads

Disables all keyboard interaction with the element

Allows the element to be focused via JavaScript but NOT via the Tab key

Use native HTML elements with built-in semantics before reaching for ARIA roles and attributes

All ARIA attributes must be declared in the <head> before they can be used in <body>

ARIA should be added to every interactive element for maximum accessibility

Always test ARIA attributes in Internet Explorer before using them in production

What's Next

You've mastered the attributes that power HTML elements. In Lesson 31, it's the second checkpoint quiz — 18 questions covering lists, tables, forms, semantic elements, and attributes. After that, Lesson 32 covers HTML entities and special characters, Lesson 33 covers accessibility, and then you build your first real project.

A Prayer for the Hidden Things

Lord, so much of what makes HTML good is invisible — attributes that do nothing visual but carry all the meaning. The alt text no sighted user reads. The aria-label that only screen reader users hear. The data-* attribute that only JavaScript touches.

May these students build with care for the invisible things — the attributes, the semantics, the accessibility considerations that no one will ever see unless something goes wrong. That kind of craftsmanship is a reflection of integrity.

May they be developers who do the right thing even when no one is watching.

In Jesus' name, Amen.

"Whatever you do, work at it with all your heart, as working for the Lord, not for human masters." — Colossians 3:23 (NIV)

Lesson 30: HTML Attributes Deep Dive — The Power of Attributes

Quest Briefing

Prerequisites

Global Attributes

id — Unique Identity

class — Reusable Categories

style — Inline CSS

title — Tooltip

hidden — Invisible but in the DOM

tabindex — Keyboard Navigation Order

contenteditable — Editable Content

draggable — HTML5 Drag and Drop

spellcheck — Spell Checking

translate — Translation Control

data-* — Custom Data Attributes

Accessing data-* with JavaScript

Using data-* with CSS

Real-World Uses of data-*