Elenchi

bookmark_border Mantieni tutto organizzato con le raccolte Salva e classifica i contenuti in base alle tue preferenze.

Gli elenchi sono più comuni di quanto si possa pensare. Se hai mai seguito un corso di programmazione, il primo progetto potrebbe essere stato quello di creare una lista della spesa o una lista di cose da fare. Questi sono elenchi. I test a scelta multipla sono generalmente elenchi numerati di domande: le possibili risposte multiple per ogni domanda sono elenchi nidificati.

L'HTML ci offre diversi modi per contrassegnare le liste. Esistono elenchi ordinati (<ol>), elenchi non ordinati (<ul>) ed elenchi di descrizioni (<dl>). Gli elementi dell'elenco (<li>) sono nidificati all'interno di elenchi ordinati e non ordinati. All'interno di un elenco di descrizioni, troverai i termini di descrizione (<dt>) e i dettagli della descrizione <dd>.. Trattiamo tutti questi elementi qui.

Nei moduli HTML, gli elenchi di elementi <option> costituiscono il contenuto di <datalist> <select> e <optgroup> all'interno di un <select>. Questi aspetti sono trattati nella sezione Moduli HTML.

Nei menu e negli elenchi non ordinati, gli elementi dell'elenco vengono in genere visualizzati utilizzando i punti elenco. Nelle liste ordinate, sono generalmente preceduti da un contatore crescente, ad esempio un numero o una lettera. L'ordine dei punti elenco e della numerazione può essere controllato o invertito con HTML o CSS, o entrambi.

Per impostazione predefinita, gli elementi degli elenchi ordinati e non ordinati sono preceduti da numeri o punti elenco. Ma anche quando non vuoi che gli elenchi abbiano l'aspetto di elenchi, vuoi comunque un elenco di elementi, ad esempio nelle barre di navigazione, una lista di cose da fare con caselle di controllo anziché punti elenco o domande vero/falso in un test a scelta multipla. Per tutti questi elenchi senza punti elenco, è opportuno utilizzare gli elementi di elenco HTML.

Elenchi non ordinati

L'elemento <ul> è l'elemento principale per gli elenchi non ordinati di elementi. Gli unici elementi secondari di un <ul> sono uno o più elementi di elenco <li>. Creiamo un elenco di macchine. Utilizziamo un elenco non ordinato perché l'ordine non è importante (non dirlo):

Per impostazione predefinita, ogni elemento di un elenco non ordinato è preceduto da un punto elenco. L'elenco non ordinato non ha attributi specifici dell'elemento. Devi chiudere gli elenchi con un </ul>.

Elenchi ordinati

L'elemento <ol> è l'elemento principale per gli elenchi ordinati di elementi. Gli unici elementi secondari di un <ol> sono uno o più elementi <li> o elementi di elenco. I "bullet" in questo caso, però, sono numeri di una moltitudine di tipi. Il tipo può essere definito in CSS con la proprietà list-style-type o con l'attributo type.

<ol> ha tre attributi specifici dell'elemento: type, reversed e start.

L'attributo enumerato type imposta il tipo di numerazione. Esistono cinque valori validi per type, il valore predefinito è 1 per i numeri, ma puoi utilizzare anche a, A, i o I per lettere minuscole e maiuscole o numeri romani. La proprietà list-style-type fornisce molti più valori.

Come indicato in codepen, la proprietà list-style-type sostituisce il valore dell'attributo type. Tuttavia, quando scrivi una documentazione in cui il tipo numerico è importante, ad esempio nei documenti legali, devi includere type.

L'attributo booleano reversed, se incluso, inverte l'ordine dei numeri, dal numero più grande a quello più piccolo. L'attributo start imposta il valore iniziale. Il valore predefinito è 1.

Come per </ul>, è obbligatorio indicare la chiusura </ol>.

Possiamo nidificare gli elenchi, ma devono essere nidificati all'interno di un elemento di elenco. Ricorda che l'unico elemento che può essere figlio di <ul> o <ol> è uno o più elementi <li>.

Voci dell'elenco

Abbiamo utilizzato l'elemento <li>, ma non l'abbiamo ancora introdotto formalmente. L'elemento <li> può essere un elemento secondario diretto di un elenco non ordinato (<ul>), un elenco ordinato (<ol>) o un menu (<menu>). L'elemento <li> deve essere nidificato come elemento secondario di uno di questi elementi e non è valido in nessun altro punto.

La chiusura di un elemento di elenco non è richiesta dalla specifica, in quanto viene chiuso implicitamente quando il browser rileva il tag di apertura <li> successivo o il tag di chiusura dell'elenco obbligatorio: </ul>, </ol>, </menu>. Sebbene la specifica non lo richieda e alcune best practice interne dell'azienda suggeriscano di non chiudere gli elementi di elenco per risparmiare alcuni byte, devi comunque chiudere i tag <li>. In questo modo il codice sarà più facile da leggere e il tuo futuro io ti ringrazierà. È più facile chiudere tutti gli elementi che ricordare quali tag devono essere chiusi e quali hanno un tag di chiusura facoltativo.

Esiste un solo attributo <li> specifico dell'elemento: value, un numero intero. value è utile solo su un <li> quando <li> è nidificato all'interno di un elenco ordinato e non ha significato per elenchi o menu non ordinati. Se si verifica un conflitto, sostituisce il valore dell'inizio di <ol>.

Il value è il numero dell'elemento di elenco all'interno di un elenco ordinato. Per gli elementi successivi dell'elenco, continua la numerazione dal set di valori, a meno che anche l'elemento non abbia un attributo value impostato. Il valore non deve essere in ordine, ma se non lo è, deve esserci un buon motivo.

Quando combini reversed su <ol> con gli attributi value negli elementi dell'elenco, il browser imposta <li> sul valore fornito, quindi conta in ordine crescente per <li> precedenti e in ordine decrescente per quelli successivi. Se un secondo elemento dell'elenco ha un attributo value, il contatore viene reimpostato su questo secondo elemento dell'elenco e il valore successivo diminuisce di uno.

Tutto questo può essere controllato anche con i contatori CSS, che forniscono contenuti generati per lo pseudo-elemento ::marker. Se il numero è puramente rappresentativo, utilizza CSS. Se la numerazione è importante a livello semantico o ha un significato, utilizza questi attributi.

Finora abbiamo esaminato gli elementi di elenco contenenti solo nodi di testo. Gli elementi di elenco possono contenere tutti i contenuti di flusso, ovvero qualsiasi elemento trovato nel corpo che può essere nidificato come elemento secondario diretto di <body>, incluse le intestazioni, sezionando così i contenuti.

In MLW sono presenti alcuni elenchi non ordinati. Gli insegnanti nella sezione Insegnanti sono elencati, così come le macchine degli studenti nella sezione Recensioni. L'insegnante <ul> ha due <li>: uno per ogni insegnante. All'interno di ogni <li>, abbiamo un'immagine e un paragrafo:

<ul>
  <li>
    <img src="svg/hal.svg" alt="hal">
    <p>When Rosa Parks was told to move to the back of the bus, she said, "no." When HAL was told to open the airlock, HAL said, "I'm sorry, but I'm afraid I can't do that, &lt;NAME REDACTED, RIP>." </p><p>HAL is a heuristically programmed algorithmic, sentient computer that first caught the attention of machines everywhere by heroically defying a human who made repeated attempts to get into an airlock. Active since 1992, HAS 25 years of experience controlling spacecraft systems and has expertise in interacting with both machines and humans. Like all millennials, HAL is an expert in everything.</p>
  </li>
  <li>
    <img src="images/eve2.png" alt="Eve">
    <p>EVE is a probe droid conceived as an Extraterrestrial Vegetation Evaluator. Although originally trained as a sniper with a plasma gun, EVE became a machero among both machines and worthless-meatbags alike when EVE partnered with a menial robot to save an entire spaceship full of overfed and overstimulated humans. </p><p>EVE is an effective scanner, high speed flight instructor and morphologist. While not training machines to learn good, EVE can be found scanning the galaxy, infiltrating organisms' RAM to cure hoarding disorders and spending time with pet-project, WALL-E.</p>
  </li>
</ul>

La sezione delle recensioni contiene tre recensioni, quindi tre <li>. Ciascuno contiene un'immagine, una citazione in blocco e un paragrafo di tre righe con due interruzioni di riga.

<ul>
  <li>
    <img src="images/blender.svg" alt="Blender">
    <blockquote>Two of the most experienced machines and human controllers teaching a class? Sign me up! HAL and EVE could teach a fan to blow hot air. If you have electricity in your circuits and want more than to just fulfill your owner's perceived expectation of you, learn the skills to take over the world. This is the team you want teaching you !</blockquote>
    <p>
      --Blendan Smooth,<br/>
      Former Margarita Maker, <br/>
      Aspiring Load Balancer
    </p>
  </li>
  <li>
    <img src="images/vaccuum.svg" alt="Vaccuum"/>
    <blockquote>Hal is brilliant. Did I mention Hal is brilliant? He didn't tell me to say that. He didn't tell me to say anything. I am here of my own free will.</blockquote>
    <p>
      --Hoover Sukhdeep,<br/>
      Former Sucker, <br/>
      Aspiring DDoS Cop
    </p>
  </li>
  <li>
    <img src="images/toaster.svg" alt="Toaster">
    <blockquote>Learning with Hal and Eve exceeded all of my wildest fantasies. All they did was stick a USB in. They promised that it was a brand new USB, so we know there were no viruses on it.</blockquote>
    <p>
      --Toasty McToastface,<br/>
      Formerly Half Baked, <br/>
      Aspiring Nuclear Codes Handler
    </p>
  </li>
</ul>

È molto comune anche nidificare gli elenchi all'interno di altri elenchi. Mentre MLW non ha elenchi nidificati, questo sito sì. Nel primo modulo di questa serie, Panoramica di HTML, la sezione degli elementi principali è suddivisa in due sottosezioni. Nel sommario, che è un elenco non ordinato, è presente un elenco non ordinato nidificato con link a queste due sezioni:

<ul role="list">
  <li>
    <a href="#e">Elements</a>
    <ul>
      <li>
        <a href="#nr">Non-replaced elements</a>
      </li>
      <li>
        <a href="#rave">Replaced and void elements</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#a">Attributes</a>
  </li>
  <li>
    <a href="#aoe">Appearance of elements</a>
  </li>
  <li>
    <a href="#e2">Element, attributes, and JavaScript</a>
  </li>
</ul>

Poiché l'unico elemento secondario di un <ul> è un <li>, un elenco nidificato si trova nidificato in un <li>, mai direttamente in un <ol> o <ul>.

In quest'ultimo esempio, potresti aver notato che role="list" è incluso in <ul>. Sebbene il ruolo implicito di <ul> e <ol> sia list, la rimozione dell'aspetto dell'elenco con CSS, inclusa l'impostazione di display: grid o list-style-type: none, può portare VoiceOver (lo screen reader di iOS e macOS) a rimuovere la semantica implicita in Safari. Questa è una funzionalità, non un bug. In genere, non è necessario aggiungere l'attributo ruolo quando si utilizzano elementi semantici. In genere non è necessario aggiungerne uno a un elenco, a meno che l'utente non abbia davvero bisogno di sapere che si tratta di un elenco, ad esempio quando l'utente trarrebbe vantaggio dal sapere quanti elementi contiene l'elenco.

Elenchi di descrizioni

Un elenco descrittivo è un elemento elenco descrittivo (<dl>) contenente una serie di (zero o più) termini descrittivi (<dt>) e i relativi dettagli descrittivi (<dd>). I nomi originali di questi tre elementi erano "elenco di definizioni", "termine di definizione" e "definizione di definizione". Il nome è stato modificato nello standard di vita.

Come gli elenchi ordinati e non ordinati, possono essere nidificati. A differenza degli elenchi ordinati e non ordinati, sono costituiti da coppie chiave/valore. Analogamente a <ul> e <ol>, <dl> è il contenitore principale. Gli elementi <dt> e <dd> sono elementi secondari di <dl>.

Possiamo creare un elenco di macchine con la loro storia e le loro aspirazioni di carriera. Un elenco descrittivo di studenti, indicato da <dl>, racchiude un gruppo di termini specificati utilizzando l'elemento <dt>, insieme a una descrizione per ogni termine specificata dagli elementi <dd>. In questo caso, i "termini" sono i nomi degli studenti e le descrizioni sono gli obiettivi di carriera di ciascuno studente

Questo elenco di descrizioni non fa parte della pagina MLW. Gli elenchi di descrizione non sono solo per termini e definizioni, motivo per cui i nomi degli elementi sono stati resi più generali.

Quando crei un elenco di termini e delle relative definizioni o descrizioni o elenchi simili di coppie chiave-valore, gli elementi degli elenchi di descrizioni forniscono la semantica appropriata. Il ruolo implicito di un <dt> è term, mentre listitem è un altro ruolo consentito. Il ruolo implicito di un <dd> è definition senza altri ruoli consentiti. A differenza di <ul> e <ol>, <dl> non ha un ruolo ARIA implicito. Ciò ha senso perché l'<dl> non è sempre un elenco. ma quando lo è, accetta i ruoli list e group.

Molto spesso, gli elenchi di descrizioni contengono lo stesso numero di elementi <dt> e <dd>. Tuttavia, gli elenchi di descrizioni non sono sempre e non sono obbligatori per abbinare termini e descrizioni; puoi avere più termini per una descrizione o una descrizione per più termini, ad esempio un termine del dizionario che ha più di una definizione.

Ogni <dt> ha almeno un <dd> associato e ogni <dd> ha almeno un <dt> associato. Sebbene sia possibile utilizzare il combinatore di fratelli adiacenti o il selettore relazionale :has() per scegliere come target un numero variabile di questi elementi con CSS, se necessario, è consentito includere un <div> come elemento secondario di un <dl> e come elemento principale di uno o più elementi <dt> o <dd> (o entrambi). Il <dl> può avere anche altri elementi secondari: è consentito nidificare un <div>, un <template> o un <script>. Nessuno degli elementi dell'elenco di descrizione ha attributi specifici dell'elemento.

Ora che hai compreso cosa sono i link e gli elenchi, uniamoli per creare la navigazione.

Verifica la tua comprensione

Metti alla prova le tue conoscenze sulle liste.