0Pricing
HTML Academy · Lezione

Elenchi non ordinati: ul e li

Creare elenchi puntati con gli elementi ul e li

Elenchi non ordinati: ul e li è 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.

Che cos'è un elenco non ordinato?

Un elenco non ordinato mostra gli elementi con punti elenco: l'ordine non è importante:

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

L'elemento ul

L'elemento <ul> (elenco non ordinato) racchiude l'elenco. Solo gli elementi <li> devono essere figli diretti:

<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>
<!-- ul = unordered list (bullet points by default) -->
<!-- li = list item -->
<!-- Never put text directly inside ul without li -->

Stilizzare i punti elenco con CSS

Controlli i marcatori dell'elenco con CSS:

ul {
  list-style-type: disc;       /* default: filled circle */
  /* circle, square, none */
}

/* Custom bullet with ::before */
ul li::before {
  content: '→ ';
  color: blue;
}

/* Remove all list styling: */
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

Navigazione come ul

I menu di navigazione sono semanticamente un elenco di collegamenti:

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/blog">Blog</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

li può contenere qualsiasi contenuto

Gli elementi dell'elenco possono contenere qualsiasi contenuto di flusso:

<ul>
  <li>
    <strong>HTML</strong>
    <p>The structure of the web.</p>
  </li>
  <li>
    <strong>CSS</strong>
    <p>The presentation layer.</p>
  </li>
</ul>

Elenchi in linea

Visualizzi orizzontalmente gli elementi dell'elenco con CSS:

<ul class="inline-list">
  <li>HTML</li>
  <li>CSS</li>
  <li>JS</li>
</ul>

<!-- CSS: -->
<!--
.inline-list {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 1rem;
}
-->

Usi semantici di ul

Usi semantici comuni degli elenchi non ordinati:

  • Menu di navigazione
  • Elenchi di funzionalità
  • Nuvole di tag
  • Collegamenti correlati
  • Elenchi degli ingredienti nelle ricette

ul vs p per più elementi

Quando sono presenti più elementi correlati, un elenco è semanticamente preferibile a paragrafi separati:

<!-- Bad: items that are actually a list -->
<p>- HTML</p>
<p>- CSS</p>
<p>- JavaScript</p>

<!-- Good: -->
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Marcatori dell'elenco con list-style-image

Utilizzi un'immagine personalizzata come punto elenco:

ul {
  list-style-image: url('/icons/check.svg');
}

/* More reliable: use background-image on li::before */
ul li {
  list-style: none;
  padding-left: 1.5rem;
  background: url('/icons/check.svg') no-repeat left center;
  background-size: 1rem;
}

Abbreviazione list-style

L'abbreviazione list-style imposta tipo, posizione e immagine:

ul {
  list-style: square inside;    /* type + position */
  list-style: none;             /* remove bullets */
}

/* list-style-position: inside vs outside */
ul {
  list-style-position: inside;  /* bullet inside padding box */
  /* outside = default, bullet outside text block */
}

Accessibilità

Note sull'accessibilità degli elenchi:

  • I lettori di schermo annunciano il tipo di elenco e il numero di elementi
  • L'uso di list-style: none può impedire ad alcuni lettori di schermo di annunciarlo come elenco: aggiunga role="list" per preservare la semantica
<ul style="list-style: none" role="list">
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

Verifica rapida

Qual è l'unico elemento figlio diretto valido di ul?

Riepilogo: elenchi non ordinati

Elementi essenziali degli elenchi non ordinati:

  • <ul> racchiude un elenco in cui l'ordine non è importante
  • <li> è l'unico figlio diretto valido
  • Punto elenco predefinito: disc; si modifica con list-style-type
  • I menu di navigazione sono semanticamente elenchi <ul> di collegamenti
  • Aggiunga role="list" se rimuove i punti elenco con CSS

Domande Frequenti

La lezione «Elenchi non ordinati: ul e li» è gratuita?

Sì — il testo completo di «Elenchi non ordinati: ul e li» è 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 «Elenchi non ordinati: ul e li»?

Creare elenchi puntati con gli elementi ul e li 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 «Elenchi non ordinati: ul e li»?

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

  1. Elenchi non ordinati: ul e li
  2. Elenchi ordinati: ol, start, reversed e type
  3. Elenchi descrittivi: dl, dt e dd
  4. Elenchi annidati e stili degli elenchi
← Torna a HTML Academy