HTML Academy · Lezione

br, hr, blockquote e pre

Gestire interruzioni di riga, separatori tematici, citazioni e testo preformattato

br, hr, blockquote e pre è una lezione HTML Academy gratuita su CoddyKit. Questa è la lezione 3 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 br

L'elemento   inserisce un a capo all'interno del contenuto testuale:

<p>221B Baker Street<br>
London, NW1 6XE<br>
United Kingdom</p>
<!-- Good use: addresses, poetry, lyrics -->
<!-- Bad use: spacing paragraphs — use margin/padding instead -->

Quando utilizzare br

Utilizzi   solo quando gli a capo fanno parte del contenuto:

Indirizzi postali
Poesie con interruzioni di riga specifiche
Testi di canzoni

Non utilizzi   per aggiungere spazio visivo tra i paragrafi: questo è compito del CSS.

L'elemento hr

L'elemento <hr> rappresenta una separazione tematica tra contenuti:

<p>Chapter One begins here and introduces the characters.</p>

<hr>

<p>Chapter Two starts a new scene entirely.</p>
<!-- hr = thematic shift in content, not just a visual line -->
<!-- Style with CSS: border, color, margin -->

Applicare lo stile a hr con il CSS

È possibile applicare qualsiasi stile a <hr>:

<hr style="border: none; border-top: 2px solid #e0e0e0; margin: 2rem 0;">

<!-- Or in CSS: -->
<!--
hr {
  border: none;
  border-top: 1px solid #ddd;
  margin: 1.5rem 0;
}
-->

L'elemento blockquote

<blockquote> identifica una sezione citata da un'altra fonte:

<blockquote cite="https://example.com/article">
  <p>The best time to plant a tree was 20 years ago.
     The second best time is now.</p>
</blockquote>
<p>— Chinese Proverb</p>
<!-- cite attribute = URL of the source (machine-readable) -->
<!-- cite element inside blockquote = visible attribution -->

Citazioni inline con q

Per le citazioni brevi inline, utilizzi <q> invece di <blockquote>:

<p>She said <q cite="https://example.com">the meeting is at noon</q>.</p>
<!-- Browser adds quotation marks automatically -->
<!-- blockquote = block-level, full quote -->
<!-- q = inline, short quote within a sentence -->

L'elemento pre

<pre> visualizza il testo con un font a larghezza fissa e conserva esattamente gli spazi bianchi:

<pre>
function hello() {
    console.log("Hello!");
}
</pre>
<!-- Spaces, tabs, and newlines are preserved -->
<!-- Default font: monospace -->
<!-- Used for code, ASCII art, or text that depends on spacing -->

pre e code insieme

Combini <pre> e <code> per i blocchi di codice:

<pre><code>
const greet = (name) => {
  return `Hello, ${name}!`;
};
console.log(greet("World"));
</code></pre>
<!-- pre = preserves whitespace -->
<!-- code = semantic: this is computer code -->
<!-- syntax highlighting libraries like Prism target pre > code -->

Caratteri di escape in pre

I caratteri HTML speciali all'interno di <pre> devono comunque essere sottoposti a escape:

<pre><code>
<!-- These must be escaped: -->
&lt;div class="box"&gt;
  &lt;p&gt;Content&lt;/p&gt;
&lt;/div&gt;
<!-- &lt; = <   &gt; = >   &amp; = & -->
</code></pre>

Compressione degli spazi bianchi

Il normale HTML comprime gli spazi bianchi: più spazi e nuove righe diventano un singolo spazio:

<p>This    has    extra    spaces.</p>
<!-- Renders as: "This has extra spaces." -->

<pre>This    keeps    all    spaces.</pre>
<!-- Renders exactly as written -->

<!-- To preserve whitespace in p without pre: CSS white-space: pre -->
<p style="white-space: pre-wrap">Preserved&#10;newlines</p>

Riepilogo degli elementi per gli spazi bianchi

Riferimento rapido:

  — a capo inline (indirizzi, poesie)
<hr> — separazione tematica tra sezioni
<blockquote> — citazione a livello di blocco
<q> — citazione inline
<pre> — testo preformattato, conserva gli spazi bianchi
<code> — frammento di codice inline

Verifica rapida

Quale elemento conserva esattamente tutti gli spazi bianchi, inclusi spazi e nuove righe, così come sono stati scritti?

Riepilogo: br hr blockquote pre

Elementi per gli spazi bianchi e le citazioni:

  — a capo all'interno del contenuto (non per la spaziatura)
<hr> — separazione tematica del contenuto (semantica, non solo visiva)
<blockquote cite> — citazione a blocco con fonte
<q> — citazione inline
<pre><code> — blocchi di codice formattati

Domande Frequenti

La lezione «br, hr, blockquote e pre» è gratuita?

Sì — il testo completo di «br, hr, blockquote e pre» è 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 «br, hr, blockquote e pre»?

Gestire interruzioni di riga, separatori tematici, citazioni e testo preformattato 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 3 di 4.

Quanto tempo richiede la lezione «br, hr, blockquote e pre»?

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