Elenchi

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

Il codice HTML offre diversi modi per eseguire il markup degli elenchi. Sono presenti elenchi ordinati (<ol>), elenchi non ordinati (<ul>) ed elenchi di descrizioni (<dl>). Le voci degli elenchi (<li>) sono nidificati all'interno di elenchi ordinati e non ordinati. All'interno di un elenco delle descrizioni troverai i termini (<dt>) e i dettagli della descrizione. <dd>. Li tratteremo qui.

Nei moduli HTML, gli elenchi di elementi <option> costituiscono il contenuto di <datalist>, <select> e <optgroup> all'interno di un elemento <select>. Queste informazioni vengono illustrate nei moduli HTML.

Nei menu e negli elenchi non ordinati, le voci degli elenchi vengono generalmente visualizzate tramite elenchi puntati. Negli elenchi ordinati sono generalmente preceduti da un contatore crescente, ad esempio un numero o una lettera. L'ordine di punti elenco e numerazione può essere controllato o invertito con HTML, CSS o entrambi.

Per impostazione predefinita, le voci di elenco ordinato e non ordinato sono precedute da numeri o punti elenco. Ma anche se non vuoi che gli elenchi appaiano come elenchi, devi comunque avere un elenco di elementi, ad esempio nelle barre di navigazione, un elenco di cose da fare con caselle di controllo anziché elenchi puntati o domande vere e false in un test a scelta multipla. Per tutti questi elenchi senza punti elenco, è appropriato utilizzare elementi di elenco HTML.

Elenchi non ordinati

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

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

Elenchi ordinati

L'elemento <ol> è l'elemento principale per gli elenchi ordinati di elementi. Gli unici elementi secondari di <ol> sono uno o più elementi <li> o elementi di elenco. I "elenchi puntati" in questo caso, tuttavia, sono numeri di molti tipi. Il tipo può essere definito nel CSS con la proprietà list-style-type o tramite 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 altri valori.

Mentre, come indicato nel codepen, la proprietà list-style-type sostituisce il valore dell'attributo type, quando scrivi la documentazione in cui il tipo numerico è importante, ad esempio per i documenti legali, devi includere il valore type.

L'attributo booleano reversed, se incluso, invertirà l'ordine dei numeri, passando dal numero più alto a quello più basso. L'attributo start imposta il valore iniziale. Il valore predefinito è 1.

Analogamente a </ul>, il valore di chiusura </ol> è obbligatorio.

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

Voci elenco

Abbiamo utilizzato l'elemento <li>, ma non l'abbiamo ancora introdotto in modo formale. 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 altrove.

La chiusura di un elemento dell'elenco non è obbligatoria per la specifica perché verrà implicitamente chiusa quando il browser rileva il successivo tag di apertura <li> o il tag di chiusura dell'elenco richiesto: </ul>, </ol>, </menu>. Sebbene le specifiche non lo richiedano e alcune best practice aziendali interne suggeriscono di non chiudere gli elementi dell'elenco per risparmiare qualche byte, tuttavia ti consigliamo di chiudere i tag <li>. Semplifica la lettura del codice e il tuo futuro ti ringrazierà. È più facile chiudere tutti gli elementi piuttosto che ricordare quali tag devono essere chiusi e quali hanno un tag di chiusura facoltativo.

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

value è il numero dell'elemento all'interno di un elenco ordinato. Per gli elementi dell'elenco successivi, continua la numerazione dal set di valori, a meno che per l'elemento sia stato impostato anche un attributo value. Il valore non deve essere in ordine; se non è in ordine, ci deve essere un motivo valido.

Se combini reversed in <ol> con gli attributi value negli elementi dell'elenco, il browser imposta <li> sul valore specificato, poi conteggia i <li> che lo precedono e il conto alla rovescia per quelli successivi. Se a un secondo elemento dell'elenco è presente un attributo di valore, il contatore verrà azzerato in corrispondenza del secondo elemento dell'elenco e il valore successivo diminuirà di uno.

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

Finora, abbiamo esaminato le voci dell'elenco contenenti solo nodi di testo. Le voci di elenco possono includere tutti i contenuti del flusso, ovvero qualsiasi elemento trovato nel corpo che può essere nidificato come elemento secondario diretto di <body>, incluse le intestazioni, così da suddividere i contenuti in sezioni.

Abbiamo alcuni elenchi non ordinati in MLW. Gli insegnanti all'interno della sezione insegnanti sono un elenco, così come i computer per gli studenti nella sezione delle recensioni. L'insegnante <ul> ha due <li>: uno per ogni insegnante. All'interno di ogni <li>, sono presenti 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 blocchi 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. The Russians had nothing to do with it. This has
    <span style="font-family:Arial;vertical-align:baseline;">no̶̼͖ţ̘h̝̰̩͈̗i̙̪n͏̩̙͍̱̫̜̟g̢̣ͅ&nbsp;̗̰͓̲̞̀t͙̀o̟̖͖̹̕&nbsp;͓̼͎̝͖̭dó̪̠͕̜&nbsp;͍̱͎͚̯̟́w̮̲̹͕͈̟͞ìth̢&nbsp;̰̳̯̮͇i</blockquote>
    <p>
      --Toasty McToastface,<br/>
      Formerly Half Baked, <br/>
      Aspiring Nuclear Codes Handler
    </p>
  </li>
</ul>

Anche la nidificazione di elenchi all'interno di elenchi è molto comune. Sebbene MLW non abbia elenchi nidificati, questo sito sì. Nel primo capitolo di questa serie, Panoramica del codice HTML, la sezione Elementi principali è suddivisa in due sottosezioni. Il 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 <ul> è un <li>, viene trovato un elenco nidificato 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'impostazionedisplay: grid o list-style-type: none può portare VoiceOver (lo screen reader per iOS e MacOS) a rimuovere la semantica implicita in Safari. Questa funzionalità non è un bug. In genere, l'attributo del ruolo non deve essere aggiunto quando si utilizzano elementi semantici, poiché non è necessario. Inoltre, in genere non è necessario aggiungerne uno a un elenco, a meno che l'utente non abbia realmente bisogno di sapere che si tratta di un elenco, ad esempio quando potrebbe essere utile sapere quanti elementi ci sono.

Elenchi di descrizioni

Un elenco di descrizioni è un elemento elenco descrizioni (<dl>) contenente una serie di termini descrittivi (<dt>) (<dt>) e i relativi dettagli della descrizione (<dd>). I nomi originali di questi tre elementi erano "elenco di definizioni", "termine di definizione" e "definizione di definizione". Il nome è cambiato nello standard di vita.

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

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

In realtà, l'elenco di descrizioni non fa parte della pagina MLW. Gli elenchi di descrizioni non riguardano solo i termini e le definizioni, motivo per cui i nomi degli elementi sono stati resi più generici.

Quando si crea un elenco di termini e le relative definizioni o descrizioni, o elenchi simili di coppie chiave-valore, nella descrizione gli elementi forniscono la semantica appropriata. Il ruolo implicito di <dt> è term, mentre listitem è un altro ruolo consentito. Il ruolo implicito di <dd> è definition e non sono consentiti altri ruoli. A differenza di <ul> e <ol>, <dl> non ha un ruolo ARIA implicito. Questo ha senso perché <dl> non è sempre un elenco. Quando è così, accetta i ruoli list e group.

Molto spesso incontrerai elenchi di descrizioni con lo stesso numero di elementi <dt> e <dd>. Tuttavia, gli elenchi di descrizioni non sempre e non devono essere necessariamente coppie di termine-descrizione; puoi avere più di uno o più di uno, ad esempio un termine del dizionario che ha più di una definizione.

A ogni <dt> è associato almeno un <dd> e a ogni <dd> è associato almeno un <dt>. Sebbene sia possibile utilizzare il combinatore di pari livello adiacente o il selettore relazionale :has() per scegliere come target i numeri di variabili di questi elementi con CSS, se necessario, puoi includere un <div> come elemento figlio di <dl> e l'elemento padre di uno o più elementi <dt> o <dd> (o entrambi). <dl> può avere alcuni altri figli: la nidificazione di <div>, <template> o <script> è consentita. Nessuno degli elementi dell'elenco di descrizioni ha attributi specifici.

Ora che hai acquisito una conoscenza di link ed elenchi, mettiamo insieme i due elementi per creare la navigazione.

Verifica le tue conoscenze

Verifica la tua conoscenza degli elenchi.