{"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\/fr\/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> et <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\/fr\/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>","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>","protected":false},"author":2,"featured_media":164212,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_seopress_titles_title":"Liste HTML: Ordered, Unordered e Definition List","_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":"","_seopress_robots_follow":"","_seopress_robots_imageindex":"","_seopress_robots_snippet":"","_seopress_robots_primary_cat":"1246","_seopress_robots_breadcrumbs":"","_seopress_robots_freeze_modified_date":"","_seopress_robots_custom_modified_date":"","_seopress_robots_canonical":"","_seopress_social_fb_title":"","_seopress_social_fb_desc":"","_seopress_social_fb_img":"","_seopress_social_fb_img_attachment_id":0,"_seopress_social_fb_img_width":0,"_seopress_social_fb_img_height":0,"_seopress_social_twitter_title":"","_seopress_social_twitter_desc":"","_seopress_social_twitter_img":"","_seopress_social_twitter_img_attachment_id":0,"_seopress_social_twitter_img_width":0,"_seopress_social_twitter_img_height":0,"_seopress_redirections_value":"","_seopress_redirections_enabled":"","_seopress_redirections_enabled_regex":"","_seopress_redirections_logged_status":"both","_seopress_redirections_param":"","_seopress_redirections_type":301,"_seopress_analysis_target_kw":"liste HTML, ul HTML, ol HTML, lista ordinata, lista non ordinata","_seopress_news_disabled":"","_seopress_video_disabled":"","_seopress_video":[],"_seopress_pro_schemas_manual":[{"_seopress_pro_rich_snippets_type":"custom","_seopress_pro_rich_snippets_custom":"<script type=\"application\/ld+json\">{\"@context\":\"https:\/\/schema.org\",\"@type\":\"HowTo\",\"name\":\"Liste HTML: Ordered List, Unordered List e Definition List\",\"description\":\"Le liste sono uno degli strumenti pi\u00f9 versatili e utilizzati nell\u2019HTML. Servono per organizzare informazioni in modo chiaro e strutturato, dai semplici elenchi puntati ai\u2026\",\"step\":[{\"@type\":\"HowToStep\",\"position\":1,\"name\":\"Liste Non Ordinate: Il Tag ul\",\"text\":\"La lista non ordinata (unordered list) \u00e8 il tipo di lista pi\u00f9 utilizzato nel web. Si crea con il tag  e ogni voce \u00e8 racchiusa nel tag  (list item). Il browser visualizza ogni voce con un punto elenco (bullet point) per impostazione predefinita.\"},{\"@type\":\"HowToStep\",\"position\":2,\"name\":\"Liste Ordinate: Il Tag ol\",\"text\":\"La lista ordinata (ordered list) si crea con il tag  e, come la lista non ordinata, utilizza il tag  per ogni voce. La differenza fondamentale \u00e8 che gli elementi vengono numerati progressivamente, indicando una sequenza o un ordine di importanza.\"},{\"@type\":\"HowToStep\",\"position\":3,\"name\":\"Liste di Definizione: Il Tag dl\",\"text\":\"La lista di definizione (definition list) \u00e8 il tipo di lista meno conosciuto ma estremamente utile per presentare coppie di termini e definizioni. Si crea con il tag , che contiene tag  (definition term) per i termini e  (definition description) per le definizioni corrispondenti.\"},{\"@type\":\"HowToStep\",\"position\":4,\"name\":\"Liste Annidate: Creare Sotto-Elenchi\",\"text\":\"Una delle caratteristiche pi\u00f9 potenti delle liste HTML \u00e8 la possibilit\u00e0 di annidarle (nesting), creando strutture gerarchiche a pi\u00f9 livelli. Per creare una sotto-lista, si inserisce un nuovo  o  all'interno di un elemento  della lista padre.\"},{\"@type\":\"HowToStep\",\"position\":5,\"name\":\"Stilizzare le Liste con CSS\",\"text\":\"Il CSS offre numerose propriet\u00e0 per personalizzare l'aspetto delle liste. La propriet\u00e0 pi\u00f9 importante \u00e8 list-style-type, che controlla il tipo di marcatore (bullet point o numero) visualizzato accanto a ogni voce. I valori pi\u00f9 comuni includono disc, circle, square, decimal, lower-alpha, upper-roman e none (per rimuovere completamente il marcatore).\"},{\"@type\":\"HowToStep\",\"position\":6,\"name\":\"Accessibilit\u00e0 e Best Practice\",\"text\":\"Le liste hanno un ruolo importante nell'accessibilit\u00e0. Gli screen reader annunciano il tipo di lista e il numero di voci, fornendo all'utente un contesto prezioso. Ad esempio, \"Lista non ordinata, 5 elementi\" comunica immediatamente la struttura del contenuto. Se rimuovi i marcatori con CSS e usi la lista solo per il layout, l'utente con screen reader potrebbe ricevere informazioni fuorvianti.\"}],\"image\":\"https:\/\/gtechgroup.it\/blog\/wp-content\/uploads\/2024\/08\/html-09-liste.jpg\"}<\/script>"}],"_seopress_pro_rich_snippets_disable_all":"","_seopress_pro_rich_snippets_disable":[],"_seopress_pro_schemas":[],"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\/fr\/wp-json\/wp\/v2\/posts\/164032","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gtechgroup.it\/blog\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gtechgroup.it\/blog\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/fr\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/fr\/wp-json\/wp\/v2\/comments?post=164032"}],"version-history":[{"count":0,"href":"https:\/\/gtechgroup.it\/blog\/fr\/wp-json\/wp\/v2\/posts\/164032\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/fr\/wp-json\/wp\/v2\/media\/164212"}],"wp:attachment":[{"href":"https:\/\/gtechgroup.it\/blog\/fr\/wp-json\/wp\/v2\/media?parent=164032"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/fr\/wp-json\/wp\/v2\/categories?post=164032"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/fr\/wp-json\/wp\/v2\/tags?post=164032"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}