HTML Academy · Lezione

Paragrafi, em, strong, b e i

Contrassegnare la prosa con l’enfasi semantica e i tag per il grassetto

Paragrafi, em, strong, b e i è una lezione HTML 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 HTML Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso HTML Academy include 4 lezioni in totale.

L'elemento paragrafo

L'elemento  identifica un blocco di testo come paragrafo:

<p>This is a paragraph of text. Browsers add margin above and below paragraphs automatically.</p>
<p>This is a second paragraph. It starts on a new line.</p>

Enfasi semantica: em

L'elemento  identifica il testo con una particolare enfasi: la parola che modifica il significato della frase:

<p>I <em>never</em> said she stole the money.</p>
<p>I never said <em>she</em> stole the money.</p>
<!-- Same words, different meaning depending on which is emphasized -->
<!-- Screen readers change inflection on em content -->

Importanza semantica: strong

L'elemento  identifica il testo come fortemente importante:

<p><strong>Warning:</strong> Do not enter this area without protective equipment.</p>
<p>The deadline is <strong>Friday at 5 PM</strong>.</p>
<!-- strong = this content is more important than surrounding text -->
<!-- Screen readers may emphasize strong content differently -->

em e i a confronto

 e  vengono entrambi visualizzati in corsivo per impostazione predefinita, ma hanno significati diversi:

 — enfasi semantica (da utilizzare più spesso)
 — corsivo presentazionale: termini tecnici, titoli, espressioni straniere

<p>The ship was called <i>HMS Beagle</i>.</p>
<p>The CSS property is <i>display</i>.</p>
<p><em>Please</em> be careful.</p>

strong e b a confronto

 e  vengono entrambi visualizzati in grassetto per impostazione predefinita, ma differiscono semanticamente:

 — importanza semantica (da utilizzare più spesso)
 — richiama l'attenzione senza implicare importanza: parole chiave, nomi di prodotti

<p>The product is called <b>ProSuite</b>.</p>
<p><b>Note:</b> All fields are required.</p>
<p>This step is <strong>critical</strong> — do not skip it.</p>

Annidare em e strong

Può annidare gli elementi di enfasi per ottenere un effetto combinato:

<p>This is <strong>very <em>important</em></strong>.</p>
<!-- strong (important) wraps em (stressed) -->
<!-- Result: bold italic text with both semantic meanings -->

I paragrafi non possono essere annidati

Un elemento  non può contenere un altro :

<!-- INVALID: nested paragraphs -->
<p>First paragraph <p>nested paragraph</p></p>

<!-- The browser auto-closes the first p before the second opens -->
<!-- Always use separate paragraph tags -->
<p>First paragraph.</p>
<p>Second paragraph.</p>

Elementi inline e block nei paragrafi

 è un elemento block che può contenere solo elementi inline:

<!-- Valid: inline content in p -->
<p>Text with <strong>bold</strong> and <a href="/">a link</a>.</p>

<!-- INVALID: block element inside p -->
<p>
  <div>A div inside p is invalid</div>
</p>

Accessibilità dell'enfasi

Perché il markup semantico è importante per le tecnologie assistive:

Alcune implementazioni di screen reader annunciano  con un'intonazione diversa
 può essere letto con un'enfasi aggiuntiva
Il grassetto o il corsivo applicati solo tramite CSS (ad esempio font-style: italic su uno span) non hanno significato semantico per gli screen reader

Errori comuni

Eviti questi errori comuni nel markup del testo:

<!-- Bad: using br for paragraph spacing -->
First paragraph<br><br>Second paragraph

<!-- Good: use p elements -->
<p>First paragraph</p>
<p>Second paragraph</p>

<!-- Bad: bold for visual style only -->
<b>Heading Text</b>

<!-- Good: use h elements for headings -->
<h2>Heading Text</h2>

Quando utilizzare ciascun elemento

Guida rapida alla scelta:

Un blocco di testo discorsivo → 
Dare enfasi a una parola che modifica il significato → 
Contrassegnare informazioni fondamentali → 
Mettere in corsivo un titolo o un termine tecnico → 
Richiamare l'attenzione su una parola chiave senza implicare importanza →

Verifica rapida

Quale elemento dovrebbe utilizzare per contrassegnare un testo come di importanza fondamentale?

Riepilogo: semantica del testo

Riepilogo del markup del testo:

 — paragrafi di testo discorsivo
 — enfasi, modifica il significato della frase
 — forte importanza
 — corsivo presentazionale (titoli, termini)
 — richiama l'attenzione senza esprimere importanza
Non utilizzi mai   per la spaziatura tra paragrafi

Domande Frequenti

La lezione «Paragrafi, em, strong, b e i» è gratuita?

Sì — il testo completo di «Paragrafi, em, strong, b e i» è 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 «Paragrafi, em, strong, b e i»?

Contrassegnare la prosa con l’enfasi semantica e i tag per il grassetto 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 2 di 4.

Quanto tempo richiede la lezione «Paragrafi, em, strong, b e i»?

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