{"id":164032,"date":"2024-08-17T09:00:00","date_gmt":"2024-08-17T07:00:00","guid":{"rendered":"https:\/\/gtechgroup.it\/blog\/liste-html-ordered-unordered-definition\/"},"modified":"2024-08-17T09:00:00","modified_gmt":"2024-08-17T07:00:00","slug":"liste-html-ordered-unordered-definition","status":"publish","type":"post","link":"https:\/\/gtechgroup.it\/blog\/liste-html-ordered-unordered-definition\/","title":{"rendered":"Liste HTML: Ordered List, Unordered List e Definition List"},"content":{"rendered":"<p style=\"text-align: justify;\">Le <strong>liste<\/strong> sono uno degli strumenti pi\u00f9 versatili e utilizzati nell&#8217;HTML. Servono per organizzare informazioni in modo chiaro e strutturato, dai semplici elenchi puntati ai complessi menu di navigazione. L&#8217;HTML offre tre tipi di liste, ognuna con caratteristiche e casi d&#8217;uso specifici. In questo articolo esploreremo in dettaglio le liste ordinate, non ordinate e di definizione, con esempi pratici e best practice.<\/p>\n<h2>Liste Non Ordinate: Il Tag ul<\/h2>\n<p style=\"text-align: justify;\">La <strong>lista non ordinata<\/strong> (unordered list) \u00e8 il tipo di lista pi\u00f9 utilizzato nel web. Si crea con il tag <code>&lt;ul&gt;<\/code> e ogni voce \u00e8 racchiusa nel tag <code>&lt;li&gt;<\/code> (list item). Il browser visualizza ogni voce con un <strong>punto elenco<\/strong> (bullet point) per impostazione predefinita.<\/p>\n<p style=\"text-align: justify;\">La lista non ordinata \u00e8 appropriata quando l&#8217;<strong>ordine degli elementi non ha importanza<\/strong>. Esempi tipici includono: elenchi di caratteristiche di un prodotto, liste di ingredienti, elenchi di link in un menu di navigazione, o un insieme di tag e categorie.<\/p>\n<p style=\"text-align: justify;\">La struttura HTML \u00e8 semplice e intuitiva:<\/p>\n<pre><code>&lt;ul&gt;\n  &lt;li&gt;Primo elemento&lt;\/li&gt;\n  &lt;li&gt;Secondo elemento&lt;\/li&gt;\n  &lt;li&gt;Terzo elemento&lt;\/li&gt;\n&lt;\/ul&gt;<\/code><\/pre>\n<p style=\"text-align: justify;\">\u00c8 fondamentale rispettare la regola che il tag <code>&lt;ul&gt;<\/code> pu\u00f2 contenere <strong>solo<\/strong> elementi <code>&lt;li&gt;<\/code> come figli diretti. Qualsiasi altro contenuto deve essere inserito all&#8217;interno dei <code>&lt;li&gt;<\/code>. Inserire testo o altri tag direttamente dentro <code>&lt;ul&gt;<\/code> senza racchiuderli in <code>&lt;li&gt;<\/code> genera HTML non valido e pu\u00f2 causare comportamenti imprevedibili nella visualizzazione.<\/p>\n<h2>Liste Ordinate: Il Tag ol<\/h2>\n<p style=\"text-align: justify;\">La <strong>lista ordinata<\/strong> (ordered list) si crea con il tag <code>&lt;ol&gt;<\/code> e, come la lista non ordinata, utilizza il tag <code>&lt;li&gt;<\/code> per ogni voce. La differenza fondamentale \u00e8 che gli elementi vengono <strong>numerati progressivamente<\/strong>, indicando una sequenza o un ordine di importanza.<\/p>\n<p style=\"text-align: justify;\">Le liste ordinate sono appropriate quando l&#8217;ordine ha un significato specifico: istruzioni passo-passo, classifiche, ricette con fasi sequenziali, indici numerati o qualsiasi elenco dove la posizione degli elementi \u00e8 rilevante.<\/p>\n<p style=\"text-align: justify;\">Il tag <code>&lt;ol&gt;<\/code> supporta diversi attributi per personalizzare la numerazione:<\/p>\n<ul>\n<li><code>type<\/code> \u2014 Definisce il tipo di numerazione: <code>1<\/code> (numeri arabi, predefinito), <code>A<\/code> (lettere maiuscole), <code>a<\/code> (lettere minuscole), <code>I<\/code> (numeri romani maiuscoli), <code>i<\/code> (numeri romani minuscoli).<\/li>\n<li><code>start<\/code> \u2014 Specifica il numero iniziale della lista. Ad esempio, <code>&lt;ol start=\"5\"&gt;<\/code> inizia la numerazione da 5.<\/li>\n<li><code>reversed<\/code> \u2014 Attributo booleano che inverte l&#8217;ordine della numerazione (conto alla rovescia).<\/li>\n<\/ul>\n<p style=\"text-align: justify;\">Il singolo elemento <code>&lt;li&gt;<\/code> supporta anche l&#8217;attributo <code>value<\/code>, che permette di impostare un numero specifico per quella voce. I numeri delle voci successive continueranno dal valore impostato.<\/p>\n<h2>Liste di Definizione: Il Tag dl<\/h2>\n<p style=\"text-align: justify;\">La <strong>lista di definizione<\/strong> (definition list) \u00e8 il tipo di lista meno conosciuto ma estremamente utile per presentare coppie di <strong>termini e definizioni<\/strong>. Si crea con il tag <code>&lt;dl&gt;<\/code>, che contiene tag <code>&lt;dt&gt;<\/code> (definition term) per i termini e <code>&lt;dd&gt;<\/code> (definition description) per le definizioni corrispondenti.<\/p>\n<p style=\"text-align: justify;\">Le liste di definizione sono perfette per glossari, FAQ (domanda e risposta), metadati (chiave-valore), specifiche tecniche di prodotti o qualsiasi contenuto che segue il pattern termine-descrizione. La struttura \u00e8:<\/p>\n<pre><code>&lt;dl&gt;\n  &lt;dt&gt;HTML&lt;\/dt&gt;\n  &lt;dd&gt;HyperText Markup Language, il linguaggio di markup del web.&lt;\/dd&gt;\n  &lt;dt&gt;CSS&lt;\/dt&gt;\n  &lt;dd&gt;Cascading Style Sheets, il linguaggio per lo stile delle pagine web.&lt;\/dd&gt;\n&lt;\/dl&gt;<\/code><\/pre>\n<p style=\"text-align: justify;\">Un <code>&lt;dt&gt;<\/code> pu\u00f2 avere pi\u00f9 <code>&lt;dd&gt;<\/code> associati (un termine con pi\u00f9 definizioni), e viceversa pi\u00f9 <code>&lt;dt&gt;<\/code> possono condividere lo stesso <code>&lt;dd&gt;<\/code> (pi\u00f9 termini con la stessa definizione, ad esempio sinonimi). Questa flessibilit\u00e0 rende le liste di definizione adatte a molteplici contesti.<\/p>\n<h2>Liste Annidate: Creare Sotto-Elenchi<\/h2>\n<p style=\"text-align: justify;\">Una delle caratteristiche pi\u00f9 potenti delle liste HTML \u00e8 la possibilit\u00e0 di <strong>annidarle<\/strong> (nesting), creando strutture gerarchiche a pi\u00f9 livelli. Per creare una sotto-lista, si inserisce un nuovo <code>&lt;ul&gt;<\/code> o <code>&lt;ol&gt;<\/code> <strong>all&#8217;interno<\/strong> di un elemento <code>&lt;li&gt;<\/code> della lista padre.<\/p>\n<p style=\"text-align: justify;\">I browser gestiscono automaticamente l&#8217;indentazione e cambiano il tipo di bullet point per i diversi livelli di annidamento. Al primo livello si usa tipicamente un disco pieno, al secondo un cerchio vuoto, al terzo un quadrato. Questi stili possono essere personalizzati con CSS.<\/p>\n<p style=\"text-align: justify;\">Un caso d&#8217;uso molto comune per le liste annidate sono i <strong>menu di navigazione<\/strong> a discesa. La struttura del menu \u00e8 una lista non ordinata dove ogni voce del menu principale contiene una sotto-lista con le voci del sottomenu. Questa struttura \u00e8 semanticamente corretta e facilmente stilizzabile con CSS per creare menu dropdown complessi.<\/p>\n<p style=\"text-align: justify;\">Le liste possono anche essere annidate mescolando i tipi: una lista non ordinata pu\u00f2 contenere una lista ordinata e viceversa. Questo \u00e8 utile quando si ha un elenco generico con alcuni elementi che richiedono una sotto-sequenza ordinata, come una guida con passaggi numerati all&#8217;interno di sezioni non ordinate.<\/p>\n<h2>Stilizzare le Liste con CSS<\/h2>\n<p style=\"text-align: justify;\">Il CSS offre numerose propriet\u00e0 per personalizzare l&#8217;aspetto delle liste. La propriet\u00e0 pi\u00f9 importante \u00e8 <code>list-style-type<\/code>, che controlla il tipo di <strong>marcatore<\/strong> (bullet point o numero) visualizzato accanto a ogni voce. I valori pi\u00f9 comuni includono <code>disc<\/code>, <code>circle<\/code>, <code>square<\/code>, <code>decimal<\/code>, <code>lower-alpha<\/code>, <code>upper-roman<\/code> e <code>none<\/code> (per rimuovere completamente il marcatore).<\/p>\n<p style=\"text-align: justify;\">La propriet\u00e0 <code>list-style-position<\/code> determina se il marcatore si trova <strong>all&#8217;esterno<\/strong> (<code>outside<\/code>, predefinito) o <strong>all&#8217;interno<\/strong> (<code>inside<\/code>) del box dell&#8217;elemento. Con <code>inside<\/code>, il marcatore fa parte del flusso del testo e il testo della seconda riga si allinea sotto il marcatore anzich\u00e9 sotto il testo della prima riga.<\/p>\n<p style=\"text-align: justify;\">Per personalizzazioni pi\u00f9 avanzate, \u00e8 possibile utilizzare <code>list-style-image<\/code> per sostituire i bullet point con <strong>immagini personalizzate<\/strong>, oppure il pseudo-elemento <code>::marker<\/code> per stilizzare il marcatore con propriet\u00e0 CSS come colore, font e dimensione. Un approccio alternativo molto popolare \u00e8 rimuovere completamente i marcatori con <code>list-style: none<\/code> e utilizzare i pseudo-elementi <code>::before<\/code> per creare marcatori completamente personalizzati con icone o simboli.<\/p>\n<h2>Accessibilit\u00e0 e Best Practice<\/h2>\n<p style=\"text-align: justify;\">Le liste hanno un ruolo importante nell&#8217;<strong>accessibilit\u00e0<\/strong>. Gli screen reader annunciano il tipo di lista e il numero di voci, fornendo all&#8217;utente un contesto prezioso. Ad esempio, &#8220;Lista non ordinata, 5 elementi&#8221; comunica immediatamente la struttura del contenuto. Se rimuovi i marcatori con CSS e usi la lista solo per il layout, l&#8217;utente con screen reader potrebbe ricevere informazioni fuorvianti.<\/p>\n<p style=\"text-align: justify;\">In Safari con VoiceOver, le liste con <code>list-style: none<\/code> non vengono pi\u00f9 annunciate come liste. Per risolvere questo problema, puoi aggiungere l&#8217;attributo <code>role=\"list\"<\/code> al tag <code>&lt;ul&gt;<\/code> o <code>&lt;ol&gt;<\/code> per ripristinare la semantica di lista anche in assenza di marcatori visivi.<\/p>\n<p style=\"text-align: justify;\">Ecco alcune <strong>best practice<\/strong> per l&#8217;uso delle liste:<\/p>\n<ul>\n<li>Usa <code>&lt;ul&gt;<\/code> quando l&#8217;ordine non conta, <code>&lt;ol&gt;<\/code> quando conta<\/li>\n<li>Non usare liste solo per indentare il testo \u2014 usa il CSS per i margini<\/li>\n<li>Mantieni le voci della lista concise e parallele nella struttura grammaticale<\/li>\n<li>Usa le liste di definizione <code>&lt;dl&gt;<\/code> per glossari e coppie chiave-valore<\/li>\n<li>Non annidare troppi livelli (pi\u00f9 di 3 livelli diventa confuso)<\/li>\n<\/ul>\n<p style=\"text-align: justify;\">Le liste sono uno strumento semplice ma potente per organizzare il contenuto web. Utilizzarle correttamente migliora la leggibilit\u00e0, l&#8217;accessibilit\u00e0 e la struttura semantica delle tue pagine. Per un approfondimento sui tag HTML pi\u00f9 utilizzati, consulta il nostro articolo sui <a href=\"https:\/\/gtechgroup.it\/blog\/tag-html-essenziali-sviluppatore\/\">tag HTML essenziali<\/a>.<\/p>\n<p style=\"text-align: justify;\">Hai bisogno di aiuto con la <strong>struttura dei contenuti<\/strong> del tuo sito web? <strong>G Tech Group<\/strong> offre servizi di sviluppo web professionale e consulenza tecnica. Contattaci a <strong>support@gtechgroup.it<\/strong> o via WhatsApp al <strong>0465 84 62 45<\/strong>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Le liste sono uno degli strumenti pi\u00f9 versatili e utilizzati nell&#8217;HTML. Servono per organizzare informazioni in modo chiaro e strutturato, dai semplici elenchi puntati ai&hellip;<\/p>\n","protected":false},"author":2,"featured_media":164212,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_seopress_robots_primary_cat":"1246","_seopress_titles_title":"Liste HTML: Ordered, Unordered e Definition List %%sep%% %%sitename%%","_seopress_titles_desc":"Guida completa alle liste HTML: liste ordinate, non ordinate e di definizione. Scopri come usare ul, ol, dl e personalizzarle con CSS.","_seopress_robots_index":"","footnotes":""},"categories":[1246],"tags":[787],"class_list":["post-164032","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html","tag-sviluppo-web"],"_links":{"self":[{"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/posts\/164032","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/comments?post=164032"}],"version-history":[{"count":0,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/posts\/164032\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/media\/164212"}],"wp:attachment":[{"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/media?parent=164032"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/categories?post=164032"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/tags?post=164032"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}