Liste in HTML

Elenchi puntati e numerati

creativecode avatar Giulio Tiseo

17 Ott, 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 preoccuparti di come inserire i link per poter navigare, cerca 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 troppo complicato, interpretala come una sfida da superare prima di passare agli articoli successivi!

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.

*Se non riesci a capire come creare il secondo elenco, la soluzione è creare un nuovo <ul> all’interno del list item Galleria.

Lascia un commento

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