Liste in HTML

Elenchi puntati e numerati

creativecode avatar Giulio Tiseo

26 Giu, 2019

~3min.

In questo articolo imparerai a creare liste in HTML per strutturare elenchi numerati o puntati. Le liste sono un elemento molto importante perché sono utilizzate spesso dai designer per definire i menu principali di un sito web.

Requisiti

Devi sapere con precisione come costruire un tag e come scrivere gli attributi. In questo articolo verranno mostrati elementi annidati fra loro, perciò non è ideale affrontare la lettura di questo articolo se non hai consolidato preventivamente delle basiTi consiglio inoltre di analizzare la forma degli elementi descritti in questo articolo attraverso i developer tools. Se non sai cosa sono, corri a leggere l’articolo Vedere il codice di un sito web

# Liste in HTML ordinate e non ordinate

Le liste HTML più utilizzate sono di due tipologie: la lista ordinata (<ol>) e la lista non ordinata (<ul>).

<ol></ol>
<ul></ul>

Le singole voci delle liste sono espresse con il tag <li>  (list item) e rappresentano il contenuto degli elementi <ol>  o <ul>.

<ol>
  <li>Elemento ordinato 1</li>
  <li>Elemento ordinato 2</li>
  <li>Elemento ordinato 3</li>
</ol>

<ul>
  <li>Elemento non ordinato 1</li>
  <li>Elemento non ordinato 2</li>
  <li>Elemento non ordinato 3</li>
</ul>

# Liste in HTML per creare elenchi di definizione

Esistono inoltre delle liste, utilizzate molto più raramente, che permettono di creare elenchi di definizione tramite il tag  <dl>(definition list). Tali elenchi sono caratterizzati da un termine, definito con il tag  <dt>(definition term) e la relativa descrizione con il tag  <dd> (definition description). Il criterio su cui si fonda questo tipo di lista è piuttosto simile a quello delle tabelle, dove possiamo associare una descrizione ad una parola chiave.

<dl>
  <dt>Termine</dt> 
  <dd>Descrizione del termine</dd> 
</dl>

Ecco a te un esempio che mostra degli esempi su come scrivere correttamente delle liste in HTML:

<hgroup>
  <h2>Creare liste in HTML</h2>
  <h3>Lista non ordinata</h3>
  <h4>Linguaggi per il web più comuni</h4>
</hgroup>
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>Javascript</li>
  <li>PHP</li>
</ul>
<hr />
<hgroup>
  <h3>Lista ordinata</h3>
  <h4>I Browser più utilizzati</h4>
</hgroup>
<ol>
  <li>Google Chrome</li>
  <li>Mozilla Firefox</li>
  <li>Opera</li>
  <li>Edge</li>
  <li>Safari</li>
</ol>
<hr />
<hgroup>
  <h3>Lista di definizione</h3>
  <h4>Descrizione Creativecode.it</h4>
</hgroup>
<dl>
  <dt>creativecode.it</dt>  
  <dt>CREATIVE CODE</dt>
  <dd>Guide gratuite per imparare a programmare siti web, app e installazioni multimediali. Tutorial, videolezioni e percorsi formativi per web developer.</dd>
</dl>

Nello snippet in alto, ho creato tre liste separate da una linea orizzontale:

  1. Una lista non ordinata di linguaggi per il web;
  2. Un elenco ordinato di quelli che sono i Browser che utilizzo di più;
  3. Una lista di definizione dove descrivo creativecode.it.

Approfondimento

Le liste ordinate accettano degli attributi che permettono di modificare l’ordinamento, il punto di inizio della lista e la tipologia del marcatore:

  • <ol reversed>,  permette di mostrare l’elenco in modo discendente;
  • <ol start="n">, dove n indica il numero a partire dal quale iniziare la numerazione;
  • <ol type="val"> dove al posto di val potrai inserire i seguenti valori: 1 per avere un classico elenco numerico, a per l’elenco alfabetico minuscolo e A per quello maiuscolo. Poi puoi utilizzare anche i per gli elenchi contrassegnati da numeri romani minuscoli e I per avere invece i numeri romani maiuscoli.

Creare una pagina web in puro HTML – Il classico social (Parte 2)

Esercizio 1:  Creare liste in HTML delle vostre passioni

Riprendi il Classico social e aggiornalo con un elenco che farà da menu di navigazione. Al momento non ci preoccuparti di come inserire i link per poter navigare, preoccupati solo di preparare la seguente struttura:

  • Home
  • Informazioni
  • Galleria
    • Foto
    • Video
  • Amici

Come vedi si tratta di una lista piuttosto semplice da realizzare. L’unico piccolissimo intoppo che potresti incontrare è l’annidamento del sottomenu nella voce Galleria. Niente di complicato, interpretala come una sfida che ti lancio.

Ciò che devi fare è realizzare semplicemente un nuovo elenco all’interno del list item Galleria.

Saper creare le liste in HTML vuol dire essere preparati a costruire menu sempre più complessi.

Nella prossimo articolo, vedrai un altro elemento strutturale molto comune: le tabelle.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *