HTML - Elenchi

HTML offre tre metodi diversi per definire un elenco. Ogni elenco può contenere uno o più elementi. Un elenco può essere definito come:

<ul> - Un elenco di elementi non ordinato. Ogni elemento sarà preceduto da un pallino.
<ol> - Un elenco di elementi ordinato. Utilizza una numerazione per elencare gli elementi.
<dl> - Un elenco di definizioni. Elenca gli elementi allo stesso modo in cui vengono inseriti.

Elenco Non Ordinato

Un elenco non ordinata crea un elenco di elementi che non hanno la necessità di seguire alcun ordine di visualizzazione. L' elenco viene creato utilizzando il tag <ul>. Ogni elemento sarà preceduto da un pallino.

Esempio

<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>

Produrrà il seguente risultato:

Beetroot
Ginger
Potato
Radish

L' Attributo type

Grazie all' attributo type del tag <ul> è possibile personalizzare i marcatore degli elementi. Di default è impostato un pallino (disc). A seguire le possibili opzioni:

<ul type="square">
<ul type="disc">
<ul type="circle">

Esempio

A seguire un esempio in cui viene utilizzato <ul type="square">

<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
   <ul type="square">
   <li>Beetroot</li>
   <li>Ginger</li>
   <li>Potato</li>
   <li>Radish</li>
   </ul>
</body>
</html>

Produrrà il seguente risultato:

Beetroot
Ginger
Potato
Radish

Esempio

A seguire un esempio in cui viene utilizzato <ul type="disc"> :

<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
   <ul type="disc">
   <li>Beetroot</li>
   <li>Ginger</li>
   <li>Potato</li>
   <li>Radish</li>
   </ul>
</body>
</html>

Produrrà il seguente risultato:

Beetroot
Ginger
Potato
Radish

Esempio

A seguire un esempio in cui viene utilizzato <ul type="circle"> :

<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
   <ul type="circle">
   <li>Beetroot</li>
   <li>Ginger</li>
   <li>Potato</li>
   <li>Radish</li>
   </ul>
</body>
</html>

Produrrà il seguente risultato:

Beetroot
Ginger
Potato
Radish

Elenco Ordinato

Se hai la necessità di inserire gli elementi in un elenco numerato dovrai utilizzare un elenco ordinato. Esso viene creato utilizzando il tag <ol>. La numerazione inizia dal numero uno e viene incrementato per ogni elemento <li> successivo.

Esempio

<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>

Produrrà il seguente risultato:

Beetroot
Ginger
Potato
Radish

L' Attributo type

L' attributo type nel tag <ol> definisce il tipo di numerazione. Di defaul è numerica. A seguire le possibili opzioni disponibili:

<ol type="1"> - Default-Numerico.
<ol type="I"> - Numeri Maiuscoli Romani.
<ol type="i"> - Numeri Minuscoli Romani.
<ol type="a"> - Lettere Minuscole.
<ol type="A"> - Lettere Maiuscole.

Esempio

A seguire un esempio in cui viene utilizzato <ol type="1">

<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
   <ol type="1">
   <li>Beetroot</li>
   <li>Ginger</li>
   <li>Potato</li>
   <li>Radish</li>
   </ol>
</body>
</html>

Produrrà il seguente risultato:

Beetroot
Ginger
Potato
Radish

Esempio

A seguire un esempio in cui viene utilizzato <ol type="I">

<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
   <ol type="I">
   <li>Beetroot</li>
   <li>Ginger</li>
   <li>Potato</li>
   <li>Radish</li>
   </ol>
</body>
</html>

Produrrà il seguente risultato:

Beetroot
Ginger
Potato
Radish

Esempio

A seguire un esempio in cui viene utilizzato <ol type="i">

<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
   <ol type="i">
   <li>Beetroot</li>
   <li>Ginger</li>
   <li>Potato</li>
   <li>Radish</li>
   </ol>
</body>
</html>

Produrrà il seguente risultato:

Beetroot
Ginger
Potato
Radish

Esempio

A seguire un esempio in cui viene utilizzato <ol type="A">

<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
   <ol type="A">
   <li>Beetroot</li>
   <li>Ginger</li>
   <li>Potato</li>
   <li>Radish</li>
   </ol>
</body>
</html>

Produrrà il seguente risultato:

Beetroot
Ginger
Potato
Radish

Esempio

A seguire un esempio in cui viene utilizzato <ol type="a">

<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
   <ol type="a">
   <li>Beetroot</li>
   <li>Ginger</li>
   <li>Potato</li>
   <li>Radish</li>
   </ol>
</body>
</html>

Produrrà il seguente risultato:

Beetroot
Ginger
Potato
Radish

L' Attributo start

L' attributo start per il tag <ol> definisce con quale valore deve iniziale la numerazione. A seguire le possibili opzioni disponibili:

<ol type="1" start="4">    - I numeri inizieranno da  4.
<ol type="I" start="4">    - I numeri inizieranno da  IV.
<ol type="i" start="4">    - I numeri inizieranno da  iv.
<ol type="a" start="4">    - Le lettere inizeranno da d.
<ol type="A" start="4">    - Le lettere inizeranno da D.

Esempio

A seguire un esempio in cui viene utilizzato <ol type="i" start="4" >

<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
   <ol type="i" start="4">
   <li>Beetroot</li>
   <li>Ginger</li>
   <li>Potato</li>
   <li>Radish</li>
   </ol>
</body>
</html>

Produrrà il seguente risultato:

Beetroot
Ginger
Potato
Radish

Elenco Definizioni

HTML e XHTML supportano uno stile di elencazione chiamato elenco definizioni in cui gli elementi sono elencati come in un dizionario o enciclopedia. Un elenco di definizioni è ideale per la rappresentazione di un glossario, elenco di termini, a altri valori nome/attributo.

Esso utilizza i seguenti tre tag.

<dl> - Definisce l' inizio dell' elenco
<dt> - Un termine
<dd> - La definizione del termine
</dl> - Definisce la fine dell' elenco

Esempio

<!DOCTYPE html>
<html>
<head>
<title>HTML Definition List</title>
</head>
<body>
<dl>
<dt><b>HTML</b></dt>
<dd>This stands for Hyper Text Markup Language</dd>
<dt><b>HTTP</b></dt>
<dd>This stands for Hyper Text Transfer Protocol</dd>
</dl>
</body>
</html>

Produrrà il seguente risultato:

HTML: This stands for Hyper Text Markup Language
HTTP: This stands for Hyper Text Transfer Protocol

Kickstart Your Career

Get certified by completing the course

Get Started