Elementi testuali: paragrafi, elenchi ed enfasi
Contrassegni i contenuti reali con i tag testuali corretti.
Elementi testuali: paragrafi, elenchi ed enfasi è una lezione Web Accessibility Academy gratuita su CoddyKit. Questa è la lezione 2 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 Web Accessibility Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Web Accessibility Academy include 4 lezioni in totale.
Contrassegnare correttamente i contenuti reali
Il testo costituisce gran parte del Web, quindi è particolarmente importante contrassegnarlo correttamente. Gli elementi di testo appropriati rendono i contenuti leggibili per tutti, comprese le persone che usano uno screen reader.
I paragrafi sono p
Racchiuda ogni blocco di prosa in un tag p. In questo modo raggruppa le frasi in un vero paragrafo che la tecnologia assistiva può esplorare un blocco alla volta.
<p>Accessibility helps everyone.</p>Non simulare gli spazi
Eviti di accumulare div vuoti o tag br per creare spazio nel testo. Usi veri paragrafi e lasci che sia CSS a gestire gli spazi. La struttura deve derivare dal tag, non dallo stile.
Le liste servono per le liste
Quando gli elementi appartengono allo stesso gruppo, utilizzi una vera lista. Gli screen reader annunciano il numero di elementi, ad esempio «lista di tre elementi», fornendo subito il contesto.
Non ordinate e ordinate
Usi ul quando l'ordine non è importante e ol quando lo è, ad esempio per una serie di passaggi. Ogni elemento deve trovarsi in un li, mai in un div isolato.
<ol>
<li>Open the door</li>
<li>Step inside</li>
</ol>L'enfasi è em
Il tag em contrassegna le parole su cui porrebbe l'accento parlando. Gli screen reader possono modificare il tono, quindi l'enfasi viene effettivamente ascoltata, non soltanto vista.
<p>This is <em>really</em> important.</p>L'importanza è strong
Il tag strong contrassegna il testo particolarmente importante, ad esempio un avviso. Esprime un significato, non solo uno stile in grassetto, quindi comunica tale importanza anche alla tecnologia assistiva.
b e i sono solo visivi
I tag b e i modificano soltanto l'aspetto, senza aggiungere significato. Scelga em e strong quando l'accento o l'importanza hanno effettivamente valore.
Anche le citazioni hanno i loro tag
Usi blockquote per un blocco citato e q per una citazione breve incorporata nel testo. La semantica comunica agli utenti che le parole provengono da un'altra fonte.
<blockquote>Build for everyone.</blockquote>Codice e abbreviazioni
Racchiuda il codice inline in code ed espliciti le abbreviazioni con abbr. Questi piccoli tag aggiungono il significato preciso che i lettori vedenti deducono dal contesto.
<abbr title="Accessibility">a11y</abbr>Il significato prima dell'aspetto
La regola per il testo è semplice: scelga il tag in base al suo significato, poi lo personalizzi liberamente. L'aspetto è compito di CSS; la struttura è compito di HTML.
Verifica rapida
Scegliamo il tag più significativo.
Riepilogo
Usi p per la prosa, ul e ol per le liste, ed em e strong per l'enfasi reale. Scelga i tag in base al significato e lasci l'aspetto a CSS. 🎉
Domande Frequenti
La lezione «Elementi testuali: paragrafi, elenchi ed enfasi» è gratuita?
Sì — il testo completo di «Elementi testuali: paragrafi, elenchi ed enfasi» è 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 Web Accessibility Academy, passa a CoddyKit PRO. Il corso Web Accessibility Academy include 4 lezioni in totale.
Cosa imparerò in «Elementi testuali: paragrafi, elenchi ed enfasi»?
Contrassegni i contenuti reali con i tag testuali corretti. Eserciti Web Accessibility 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 Web Accessibility Academy?
Non è richiesta alcuna esperienza precedente. Web Accessibility 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 2 di 4.
Quanto tempo richiede la lezione «Elementi testuali: paragrafi, elenchi ed enfasi»?
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 Web Accessibility Academy?
Sì. Ogni lezione Web Accessibility 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
- I tag hanno un significato: perché la zuppa di div non funziona
- Elementi testuali: paragrafi, elenchi ed enfasi
- L'albero dell'accessibilità: ciò che sentono gli screen reader
- Nativo o personalizzato: quando scegliere un elemento reale