HTML - Le Liste

  »   HTML  »   HTML Tutorial - Lists Creating and using them

Nel linguaggio HTML possiamo trovare tre tipi di liste. <ol> visualizza una lista ordinata mentre <ul> visualizza una lista semplice. Per una lista di definizione si usa invece <dl>. Grazie agli attributi type e start è possibile fare una lista in base alle vostre richieste.

HTML has three types of lists. <ol> shows a ordinate list while <ul> a unsorted one, and for making a definition list is used <dl>. Use the attributes type and start for making a list depending on your requests.

  • <ul> - elenco non ordinato, punti
  • <ol> - elenco ordinato, numerato
  • <dl> - lista di definizioni

HTML - La lista ordinata

Usa l'etichetta <ol> per introdurre una lista ordinata e utilizza <li></li> per ogni elemento della lista.

html<h4>Obiettivi</h4>

<ol>
	<li>Trovare lavoro</li>
	<li>Guadagnare tanti soldi </li>
	<li>Cambiare città</li>
</ol>

Demo

Obiettivi

  1. Trovare lavoro
  2. Guadagnare tanti soldi
  3. Cambiare città

Puoi iniziare la lista con un qualsiasi numero semplicemente specificando il numero di partenza con l'attributo start.

html<h4>Objective</h4>

<ol start="4" >
	<li>Trovare lavoro</li>
	<li>Guadagnare tanti soldi </li>
	<li>Cambiare città</li>
</ol>

Demo

Objective

  1. Trovare lavoro
  2. Guadagnare tanti soldi
  3. Cambiare città

Questo elemento non fa nulla fuori dal comune, ma a volte è piuttosto utile.

HTML - Altri tipi di lista ordinata

Escludendo l'esempio precedente ci sono altri quattro tipi di lista ordinata. Invece che utilizzare la normale numerazione è possibile utilizzare la numerazione romana o le lettere e in entrambi i casi è possibile utilizzare caratteri maiuscoli o minuscoli. Per modificare il tipo di numerazione bisogna utilizzare l'attributo type.

html<ol type="a">
<ol type="A">
<ol type="i">
<ol type="I">

A seconda dei casi, la lista può assomigliare a questa:

Lettere minuscoleLettere maiuscoleNumerazione romana con lettere minuscoleNumerazione romana con lettere maiuscole
  1. Un lavoro
  2. Soldi
  3. Altra città
  1. Un lavoro
  2. Soldi
  3. Altra città
  1. Un lavoro
  2. Soldi
  3. Altra città
  1. Un lavoro
  2. Soldi
  3. Altra città

Lista non ordinata

La lista non ordinata è introdotta dall'etichetta <ul> e può essere di tre tipi: a quadrati, a frecce e a cerchi. la maggior parte dei browser utilizza come tipo standard le frecce.

html<h4>Lista della spesa </h4>

<ul>
	<li>latte</li>
	<li>formaggio</li>
	<li>uova</li>
	<li>zucchero</li>
</ul>

Demo

Lista della spesa

  • latte
  • formaggio
  • uova
  • zucchero

Nel prossimo esempio vengono paragonati i tre tipi di lista non ordinata.

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

HTML - La lista di definizione

Per introdurre la lista di definizione bisogna invece utilizzare l'etichetta <dl>; . In questo tipo di lista viene marcata in grassetto la parola di cui viene fornita la definizione in modo da renderla più evidente.

html<dl>
	<dt>Queso</dt>
	<dd>Parola spagnola per formaggio.</dd>
	
	<dt>Ordenador</dt>
	<dd>Parola spagnola per computer portatile.</dd>
</dt>

Demo

Queso
Parola spagnola per formaggio.
Ordenador
Parola spagnola per computer portatile.