Elenchi

Gli elenchi sono più comuni di quanto tu 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. Si tratta di liste. I test a scelta multipla sono generalmente elenchi numerati di domande: le più risposte possibili per ogni domanda sono presenti 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>). Gli elementi dell'elenco (<li>) sono nidificati all'interno di elenchi ordinati e non ordinati. In un elenco di descrizioni troverai i termini descrittivi (<dt>) e la descrizione dettagli <dd>. Tratteremo tutti questi aspetti qui.

Nei moduli HTML, gli elenchi di elementi <option> costituiscono i contenuti di <datalist>, <select> e <optgroup> all'interno di un elemento <select>. Questi aspetti vengono discussi nei formati HTML.

Nei menu e negli elenchi non ordinati, le voci degli elenchi vengono solitamente visualizzate utilizzando elenchi puntati. In elenchi ordinati, di solito sono preceduti da un contatore crescente, come un numero o una lettera. I punti elenco e l'ordine di numerazione possono essere controllati o invertiti con HTML o CSS. o entrambe le cose.

Per impostazione predefinita, gli elementi dell'elenco ordinati e non ordinati sono preceduti da numeri o punti elenco. Ma anche quando non vuoi che le liste sembrino simili, vuoi comunque un elenco di elementi, come nelle barre di navigazione, un elenco di cose da fare con caselle di controllo anziché punti elenco o domande vero e falso in un test a scelta multipla. Per tutti questi elenchi privi di punti elenco, è opportuno utilizzare elementi elenchi HTML.

Elenchi non ordinati

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

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

Elenchi ordinati

L'elemento <ol> è l'elemento principale per gli elenchi ordinati di articoli. Gli unici elementi secondari di un <ol> sono uno o più elementi o elementi elenco <li>. I "elenchi puntati" in questo caso, però, sono numeri di molti tipi. Il tipo può essere definito in 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 type enumerato imposta il tipo di numerazione. Esistono cinque valori validi per type; il valore predefinito è 1 per numeri, ma puoi anche utilizzare a, A, i o I per le lettere minuscole e maiuscole o i numeri romani. La proprietà list-style-type fornisce molti più valori.

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

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

Come per </ul>, è obbligatorio specificare </ol> di chiusura.

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

Voci elenco

Abbiamo utilizzato l'elemento <li>, ma non lo abbiamo ancora introdotto in modo formale. L'elemento <li> può essere un elemento secondario diretto di un elemento non ordinato elenco (<ul>), un elenco ordinato (<ol>) o un menu (<menu>). <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 in quanto viene implicitamente chiusa quando il browser rileva il successivo <li> tag di apertura o tag di chiusura dell'elenco obbligatorio: </ul>, </ol>, </menu>. Sebbene le specifiche non lo richiedano, alcune aziende interne le best practice suggeriscono di non chiudere gli elementi dell'elenco per risparmiare byte, ma chiudi i tag <li>. Rende il codice più facile da leggere te stesso ti ringrazierà del futuro. È 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 su <li> solo quando <li> è nidificato all'interno un elenco ordinato e non ha alcun significato per elenchi o menu non ordinati. In caso di conflitto, sostituisce il valore iniziale di <ol>.

value è il numero dell'elemento all'interno di un elenco ordinato. Per le voci di elenco successive, continua la numerazione dal valore impostato, a meno che per l'elemento sia stato impostato anche un attributo value. Il valore non deve essere necessariamente in ordine; anche se non è in ordine, dovrebbe esserci un motivo valido.

Quando combini reversed in <ol> con gli attributi value negli elementi dell'elenco, il browser imposta questo <li> sul fornito, poi conta per i <li> precedenti e conta per quelli successivi. Se un secondo elemento dell'elenco ha un attributo value, il contatore verrà azzerato in corrispondenza della seconda voce dell'elenco e il valore successivo diminuirà di un'unità.

Tutto questo può essere controllato anche con i contatori CSS fornendo contenuti generati per lo ::marker pseudo-element. Se il numero è puramente rappresentativo, utilizza CSS. Se la numerazione è importante dal punto di vista semantico o ha un significato, utilizza questi attributi.

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

Abbiamo alcuni elenchi non ordinati in MLW. Gli insegnanti all'interno della sezione insegnanti sono un elenco, così come i computer per gli studenti nelle revisioni . 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 virgoletta 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>

È molto comune anche nidificare gli elenchi all'interno di elenchi. Sebbene MLW non abbia elenchi nidificati, questo sito sì. Nel primo capitolo di questa serie, Panoramica del codice HTML, la sezione degli elementi principali ha due sottosezioni. Nel sommario, che è un elenco non ordinato, è presente una elenco non ordinato con i 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> è <li>, viene trovato un elenco nidificato nidificato in <li>, mai direttamente in <ol> o <ul>.

In quest'ultimo esempio, potresti aver notato che role="list" è incluso in <ul>. Sebbene il ruolo implicito sia <ul> e <ol> sono list e stanno rimuovendo l'aspetto in elenco con CSS, inclusa l'impostazione 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 è consigliabile aggiungere l'attributo role quando si utilizzano elementi semantici, in quanto non è necessario. E di solito non c'è bisogno per 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 può essere utile sapere quanti elementi ci sono.

Elenchi di descrizioni

Un elenco di descrizioni è un elemento elenco di descrizioni (<dl>) contenente una serie di (zero o più) termini descrittivi (<dt>) e i relativi dettagli descrizione (<dd>). I nomi originali di questi tre elementi erano "elenco definizioni", "termine di definizione", e "definizione 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, questi sono costituiti 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 la loro storia professionale e le loro aspirazioni. Un elenco di descrizioni degli studenti, indicato dal simbolo <dl>, racchiudono un gruppo di termini, in questo caso i "termini" sono 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>.

Questo elenco di descrizioni non fa parte della pagina MLW. Gli elenchi di descrizioni non servono solo ai termini e alle definizioni, perché i nomi degli elementi sono stati svolti più generali.

Quando viene creato un elenco di termini e le relative definizioni o descrizioni oppure elenchi simili di coppie chiave-valore, la descrizione elenca gli elementi fornire la semantica appropriata. Il ruolo implicito di un <dt> è term, dove listitem è un altro ruolo consentito. Il ruolo implicito un <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 lo è, accetta i ruoli list e group.

Molto spesso incontrerai elenchi di descrizioni con un numero uguale di elementi <dt> e <dd>. Tuttavia, gli elenchi di descrizioni non sempre non è necessario che corrispondano a coppie termine-descrizione, puoi avere più a uno o più a 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 utilizza il combinatore fratello/adiacente o :has() relazionale per scegliere come target i numeri di variabili di questi elementi con CSS. Se necessario, puoi includere un <div> come elemento secondario di <dl> e l'elemento principale di uno o più elementi <dt> o <dd> (o entrambi) sono consentiti. <dl> può effettivamente avere qualche altro bambino: è consentito nidificare <div>, <template> o <script>. Nessuno degli elementi dell'elenco di descrizione ha attributi specifici dell'elemento.

Ora che hai compreso link ed elenchi, mettiamo insieme i due elementi per creare la navigazione.

Verifica le tue conoscenze

Verifica le tue conoscenze in materia di elenchi.