HTML - Elenchi

L'HTML offre agli autori web tre modi per specificare elenchi di informazioni. Tutti gli elenchi devono contenere uno o più elementi di elenco. Gli elenchi possono contenere:

  • <ul>- Un elenco non ordinato. Questo elencherà gli elementi usando semplici proiettili.

  • <ol>- Un elenco ordinato. Questo utilizzerà diversi schemi di numeri per elencare i tuoi articoli.

  • <dl>- Un elenco di definizioni. Questo organizza i tuoi elementi nello stesso modo in cui sono disposti in un dizionario.

Elenchi non ordinati HTML

Un elenco non ordinato è una raccolta di elementi correlati che non hanno un ordine o una sequenza speciale. Questo elenco viene creato utilizzando HTML<ul>etichetta. Ogni elemento nell'elenco è contrassegnato da un punto elenco.

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>

Questo produrrà il seguente risultato:

Il tipo Attribute

Puoi usare typeattributo per il tag <ul> per specificare il tipo di punto che ti piace. Per impostazione predefinita, è un disco. Di seguito sono riportate le possibili opzioni:

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

Esempio

Di seguito è riportato un esempio in cui abbiamo 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>

Questo produrrà il seguente risultato:

Esempio

Di seguito è riportato un esempio in cui abbiamo 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>

Questo produrrà il seguente risultato:

Esempio

Di seguito è riportato un esempio in cui abbiamo 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>

Questo produrrà il seguente risultato:

Elenchi ordinati HTML

Se ti viene richiesto di inserire i tuoi articoli in un elenco numerato invece che puntato, verrà utilizzato un elenco ordinato HTML. Questo elenco viene creato utilizzando<ol>etichetta. La numerazione inizia da uno e viene incrementata di uno per ogni successivo elemento dell'elenco ordinato contrassegnato con <li>.

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>

Questo produrrà il seguente risultato:

Il tipo Attribute

Puoi usare typeattributo per il tag <ol> per specificare il tipo di numerazione che ti piace. Per impostazione predefinita, è un numero. Di seguito sono riportate le possibili opzioni:

<ol type = "1"> - Default-Case Numerals.
<ol type = "I"> - Upper-Case Numerals.
<ol type = "i"> - Lower-Case Numerals.
<ol type = "A"> - Upper-Case Letters.
<ol type = "a"> - Lower-Case Letters.

Esempio

Di seguito è riportato un esempio in cui abbiamo 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>

Questo produrrà il seguente risultato:

Esempio

Di seguito è riportato un esempio in cui abbiamo 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>

Questo produrrà il seguente risultato:

Esempio

Di seguito è riportato un esempio in cui abbiamo 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>

Questo produrrà il seguente risultato:

Esempio

Di seguito è riportato un esempio in cui abbiamo 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>

Questo produrrà il seguente risultato:

Esempio

Di seguito è riportato un esempio in cui abbiamo 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>

Questo produrrà il seguente risultato:

L'attributo iniziale

Puoi usare startattributo per il tag <ol> per specificare il punto di partenza della numerazione di cui hai bisogno. Di seguito sono riportate le possibili opzioni:

<ol type = "1" start = "4">    - Numerals starts with 4.
<ol type = "I" start = "4">    - Numerals starts with IV.
<ol type = "i" start = "4">    - Numerals starts with iv.
<ol type = "a" start = "4">    - Letters starts with d.
<ol type = "A" start = "4">    - Letters starts with D.

Esempio

Di seguito è riportato un esempio in cui abbiamo 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>

Questo produrrà il seguente risultato:

Elenchi di definizioni HTML

HTML e XHTML supportano uno stile di elenco che viene chiamato definition listsdove le voci sono elencate come in un dizionario o in un'enciclopedia. L'elenco delle definizioni è il modo ideale per presentare un glossario, un elenco di termini o un altro elenco di nomi / valori.

L'elenco delle definizioni utilizza i seguenti tre tag.

  • <dl> - Definisce l'inizio della lista
  • <dt> - Un termine
  • <dd> - 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>

Questo produrrà il seguente risultato: