HTML Academy · Lezione

Gli elementi span e div

Usare contenitori generici inline e block come punti di aggancio per gli stili

Gli elementi span e div è una lezione HTML Academy gratuita su CoddyKit. Questa è la lezione 4 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.

Contenitori generici

HTML dispone di due elementi contenitore generici e semanticamente neutri:

<div> — un contenitore a livello di blocco
<span> — un contenitore inline

Non hanno un significato proprio: esistono esclusivamente come punti di aggancio per gli stili e gli script.

L'elemento div

<div> è un contenitore a livello di blocco: crea una nuova riga prima e dopo di sé:

<div class="card">
  <h2>Card Title</h2>
  <p>Card content here.</p>
</div>

<div class="sidebar">
  <p>Sidebar content.</p>
</div>
<!-- div groups related elements for CSS layout or JavaScript selection -->

L'elemento span

<span> è un contenitore inline: si inserisce all'interno del testo:

<p>The price is <span class="price">$29.99</span> per month.</p>

<p>Error: <span class="error-text" role="alert">Invalid email address</span></p>

<!-- span targets a part of text for styling or scripting
     without adding block-level line breaks -->

Quando utilizzare div invece degli elementi semantici

Prima di ricorrere a <div>, verifichi se è adatto un elemento semantico:

Intestazione della pagina → <header>
Navigazione → <nav>
Contenuto principale → <main>
Articolo di blog → <article>
Barra laterale → <aside>
Piè di pagina → <footer>

Utilizzi <div> solo quando non è applicabile alcun elemento semantico.

Divitis

Divitis: utilizzare eccessivamente <div> per ogni cosa:

<!-- Divitis: meaningless nesting -->
<div class="header">
  <div class="nav">
    <div class="nav-item"><a href="/">Home</a></div>
  </div>
</div>

<!-- Better: semantic HTML -->
<header>
  <nav>
    <a href="/">Home</a>
  </nav>
</header>

Hook CSS con class e id

Sia <div> sia <span> vengono utilizzati con gli attributi class o id per selezionare gli elementi con il CSS:

<div class="hero-section">
  <h1>Welcome</h1>
  <p>Text with a <span class="highlight">highlighted phrase</span> inside.</p>
</div>

<!-- CSS: -->
<!--
.hero-section { background: #f0f4f8; padding: 2rem; }
.highlight { background-color: yellow; font-weight: bold; }
-->

Selezione con JavaScript

<div> e <span> possono essere selezionati anche con JavaScript:

<span id="counter">0</span>

<script>
  const counter = document.getElementById('counter');
  let count = 0;
  setInterval(() => {
    count++;
    counter.textContent = count;
  }, 1000);
</script>

Regole di annidamento

Regole di annidamento per i contenitori generici:

<div> può contenere <div> e <span>
<span> può contenere solo <span> e contenuto inline
Non inserisca <div> all'interno di <span>

<span>
  Inline text
  <span>Nested span OK</span>
  <!-- <div> inside span: INVALID -->
</span>

div per il layout

Schema comune di layout con i div:

<div class="layout">
  <div class="sidebar"><!-- sidebar --></div>
  <div class="content"><!-- main content --></div>
</div>

<!-- CSS Grid layout: -->
<!--
.layout { display: grid; grid-template-columns: 250px 1fr; gap: 1rem; }
-->

span per gli stili inline

Schemi comuni per applicare stili inline:

<p>Status: <span class="badge badge-success">Active</span></p>

<p>Price: <span style="color: red; text-decoration: line-through;">$50</span>
        <span style="color: green; font-weight: bold;">$30</span></p>

div e span sono invisibili

Per impostazione predefinita, <div> e <span> sono contenitori invisibili:

<div> non applica alcuno stile visivo oltre alla visualizzazione come blocco
<span> non applica assolutamente alcuno stile
Tutto l'aspetto deriva dal CSS applicato
Questo li rende perfetti come contenitori neutri

Verifica rapida

Quale elemento dovrebbe utilizzare per applicare uno stile a una singola parola all'interno di un paragrafo?

Riepilogo: span e div

Elementi essenziali dei contenitori generici:

<div> — a livello di blocco, raggruppa gli elementi per il layout
<span> — inline, seleziona parti di testo per applicare stili
Entrambi sono semanticamente neutri: non aggiungono significato
Preferisca gli elementi semantici di HTML5 quando sono applicabili
Utilizzi class e id per collegarli al CSS e a JavaScript

Domande Frequenti

La lezione «Gli elementi span e div» è gratuita?

Sì — il testo completo di «Gli elementi span e div» è 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 «Gli elementi span e div»?

Usare contenitori generici inline e block come punti di aggancio per gli stili 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 4 di 4.

Quanto tempo richiede la lezione «Gli elementi span e div»?

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