HTML - Le Liste

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

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

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:

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

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