HTML Academy · Lesson

id class style and title

Apply core global attributes to any HTML element.

id class style and title is a free HTML Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the HTML Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Global Attributes

Global attributes can be applied to any HTML element:

id — unique identifier
class — one or more CSS classes
style — inline CSS
title — tooltip text
And many more: lang, hidden, tabindex, data-*...

The id Attribute

The id attribute assigns a unique identifier to an element:

<h2 id="installation">Installation Guide</h2>
<form id="signup-form">...</form>
<div id="hero-banner">...</div>

<!-- Rules:
  - Must be unique per page
  - No spaces
  - Use hyphens: user-profile
  - Case-sensitive: #hero ≠ #Hero
-->

Uses of id

The id attribute serves multiple purposes:

CSS targeting: #hero-banner { ... }
JavaScript selection: document.getElementById('signup-form')
Fragment navigation: <a href="#installation">
ARIA labelling: aria-labelledby="modal-title"

The class Attribute

The class attribute assigns one or more CSS classes:

<p class="text-large">Large text paragraph.</p>
<button class="btn btn-primary">Submit</button>
<div class="card card-featured highlighted">...</div>

<!-- Multiple classes separated by spaces -->
<!-- Elements can share classes (unlike id) -->
<!-- JavaScript: element.classList.add('active') -->

id vs class

When to use each:

id — one specific element on the page
class — a style pattern applied to multiple elements

<!-- id: unique element -->
<main id="main-content">...</main>

<!-- class: reusable style -->
<div class="card">Card 1</div>
<div class="card">Card 2</div>
<div class="card card-featured">Featured</div>

The style Attribute

The style attribute adds inline CSS:

<p style="color: red; font-weight: bold;">Warning message</p>
<div style="background: #f0f4f8; padding: 1rem; border-radius: 0.5rem;">
  Info box
</div>

<!-- Inline styles have the highest specificity
     They are hard to override and hard to maintain
     Prefer external CSS classes whenever possible -->

When to Use Inline style

Inline style is acceptable in these cases:

Dynamic values set by JavaScript
Values that cannot be known at CSS-write time (user-set colors, widths)
Email HTML (email clients strip external CSS)

Do not use style for static presentational choices — that belongs in CSS.

The title Attribute

The title attribute provides tooltip text on hover:

<abbr title="HyperText Markup Language">HTML</abbr>
<button title="Submit the registration form">Submit</button>
<a href="/docs" title="Full documentation (opens in new tab)" target="_blank" rel="noopener">Docs</a>

title Accessibility Limitations

The title attribute has significant accessibility problems:

Not accessible via keyboard navigation
Not shown on touch screens
Screen reader behavior is inconsistent
Never put critical information only in title

Use aria-label or visible text for important information.

Specificity: id vs class vs inline

CSS specificity from lowest to highest:

/* Element selector: 0-0-1 */
p { color: gray; }

/* Class selector: 0-1-0 */
.text { color: blue; }

/* ID selector: 1-0-0 */
#unique { color: green; }

/* Inline style: 1-0-0-0 (highest) */
<p style="color: red;">Red wins</p>

class Naming Conventions

Popular class naming conventions:

<!-- BEM (Block Element Modifier) -->
<div class="card">
  <div class="card__header">
    <h2 class="card__title card__title--featured">Title</h2>
  </div>
</div>

<!-- Utility classes (Tailwind style) -->
<div class="flex items-center gap-4 p-4 bg-white rounded-lg shadow">

Quick Check

What is the key rule about the id attribute?

Recap: id class style title

Core global attributes:

id — unique per page; used for CSS, JavaScript, fragments, ARIA
class — reusable; multiple classes separated by spaces
style — inline CSS (use sparingly; prefer external CSS)
title — tooltip; not accessible for keyboard/touch users
id specificity > class specificity in CSS

Frequently asked questions

Is the “id class style and title” lesson free?

Yes — the full text of “id class style and title” is free to read here on the web, and the HTML Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the HTML Academy course, upgrade to CoddyKit PRO.

What will I learn in “id class style and title”?

Apply core global attributes to any HTML element. You practise HTML Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start HTML Academy?

No prior experience is required. HTML Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “id class style and title” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this HTML Academy lesson?

Yes. Every HTML Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to HTML Academy