HTML Academy · Lezione

id, class, style e title

Applicare gli attributi globali fondamentali a qualsiasi elemento HTML

id, class, style e title è una lezione HTML Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento HTML Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso HTML Academy include 4 lezioni in totale.

Attributi globali

Gli attributi globali possono essere applicati a qualsiasi elemento HTML:

id — identificatore univoco
class — una o più classi CSS
style — CSS inline
title — testo della descrizione al passaggio del mouse
E molti altri: lang, hidden, tabindex, data-*...

L'attributo id

L'attributo id assegna un identificatore univoco a un elemento:

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

Usi di id

L'attributo id ha diverse funzioni:

Selezione CSS: #hero-banner { ... }
Selezione JavaScript: document.getElementById('signup-form')
Navigazione tramite frammenti: <a href="#installation">
Assegnazione di etichette ARIA: aria-labelledby="modal-title"

L'attributo class

L'attributo class assegna una o più classi CSS:

<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 e class a confronto

Quando utilizzare ciascuno:

id — un elemento specifico della pagina
class — uno stile applicato a più elementi

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

L'attributo style

L'attributo style aggiunge CSS inline:

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

Quando utilizzare style inline

Lo style inline è appropriato nei seguenti casi:

Valori dinamici impostati da JavaScript
Valori che non possono essere noti quando si scrive il CSS (colori e larghezze impostati dall'utente)
HTML per le email (i client di posta rimuovono il CSS esterno)

Non utilizzi style per scelte statiche di presentazione: queste appartengono al CSS.

L'attributo title

L'attributo title fornisce una descrizione al passaggio del mouse:

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

Limiti di accessibilità di title

L'attributo title presenta notevoli problemi di accessibilità:

Non è accessibile tramite la navigazione da tastiera
Non viene visualizzato sui touchscreen
Il comportamento dei lettori di schermo non è uniforme
Non inserisca mai informazioni essenziali esclusivamente in title

Per le informazioni importanti, utilizzi aria-label o testo visibile.

Specificità: id, class e inline

Specificità CSS dalla più bassa alla più alta:

/* 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>

Convenzioni per i nomi delle classi

Convenzioni diffuse per i nomi delle classi:

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

Verifica rapida

Qual è la regola fondamentale riguardo all'attributo id?

Riepilogo: id, class, style, title

Attributi globali fondamentali:

id — univoco nella pagina; utilizzato per CSS, JavaScript, frammenti e ARIA
class — riutilizzabile; più classi separate da spazi
style — CSS inline (lo utilizzi con moderazione; preferisca il CSS esterno)
title — descrizione al passaggio del mouse; non accessibile agli utenti da tastiera o touchscreen
La specificità di id è maggiore della specificità di class nei CSS

Domande Frequenti

La lezione «id, class, style e title» è gratuita?

Sì — il testo completo di «id, class, style e title» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso HTML Academy, passa a CoddyKit PRO. Il corso HTML Academy include 4 lezioni in totale.

Cosa imparerò in «id, class, style e title»?

Applicare gli attributi globali fondamentali a qualsiasi elemento HTML Eserciti HTML Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare HTML Academy?

Non è richiesta alcuna esperienza precedente. HTML Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.

Quanto tempo richiede la lezione «id, class, style e title»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione HTML Academy?

Sì. Ogni lezione HTML Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a HTML Academy