Sei sulla pagina 1di 5

LINGUAGGIO HTML

Titoli ed elenchi

Linguaggio HTML – Titoli ed elenchi


Argomenti trattati
Titoli
o Esempio 12: Definire titoli nel documento
Elenchi
Elenchi ordinati (numerati)
Elenchi NON ordinati (puntati)
o Esempio 13: Creare elenchi e sotto-elenchi
Elementi deprecati

Tag: hn, ol, ul, li

Titoli
Mediante l'inserimento di opportuni titoli il testo di una pagina HTML può essere suddivisa in
capitoli e sottocapitoli. Per i titoli HTML sono previsti sei livelli gerarchici.
Il tag per definire un titolo è hn dove n è un intero che va da 1 a 6. Ciò significa che si possono
avere sei livelli di titolazione, da h1 (livello superiore) a h6 (livello inferiore).
In visualizzazione i titoli appaiono come paragrafi a sé stanti con caratteristiche di formattazione
legate al livello di titolazione. È importante inserire dei titoli nei testi delle pagine web perché
questo incrementa notevolmente la leggibilità e perché i motori di ricerca, quando catalogano i siti
web, spesso si basano anche sui titoli presenti nella pagina per classificarne gli argomenti.

Esempio 12: Definire titoli nel documento


esempio12.html
<html>
<head>
<title> Esempio 12 </title>
</head>
<body>
<h1> Titolo di livello 1 </h1>
<h2> Titolo di livello 2 </h2>
<h3> Titolo di livello 3 </h3>
<h4> Titolo di livello 4 </h4>
<h5> Titolo di livello 5 </h5>
<h6> Titolo di livello 6 </h6>
</body>
</html>

Elenchi
Gli elenchi rappresentano uno dei modi più diffusi per organizzare informazioni all'interno di siti
Web. Una delle loro caratteristiche principali è quella di fornire un quadro chiaro e sintetico
dell'argomento trattato. HTML mette a disposizione diversi tipi di elenchi che di seguito andiamo a
trattare singolarmente.
1
Autore: Bocchi Cinzia
Ultimo aggiornamento: 23/09/2008
LINGUAGGIO HTML
Titoli ed elenchi

Elenchi ordinati (numerati)


Gli elenchi ordinati sono costituiti da un singolo tag di apertura e chiusura <ol></ol> e tanti tag di
apertura per quante sono le voci di menu <li>. Questa è la corretta sintassi per creare elenchi
ordinati:

<ol>
<li> prima voce di menu </li>
<li> seconda voce di menu </li>
<li> terza voce di menu </li>
………………………………
</ol>

Se non stabilito diversamente, il tipo di elenco ordinato che il browser visualizzato è numerato (cioè
l'elenco è costituito da una serie di numeri che da 1 crescono progressivamente). Le ultime versioni
di HTML prevedono la possibilità di elenchi ordinati che contengono un sistema di indicizzazione
diverso dai numeri visti in precedenza.

Indicizzazione alfabetica maiuscola:


<ol type= “A”>
<li> prima voce di menu </li>
<li> seconda voce di menu </li>
<li> terza voce di menu </li>
………………………………
</ol>

Indicizzazione alfabetica minuscola:


<ol type= “a”>
<li> prima voce di menu </li>
<li> seconda voce di menu </li>
<li> terza voce di menu </li>
………………………………
</ol>

Indicizzazione con numeri romani maiuscoli:


<ol type= “I”>
<li> prima voce di menu </li>
<li> seconda voce di menu </li>
<li> terza voce di menu </li>
………………………………
</ol>

2
Autore: Bocchi Cinzia
Ultimo aggiornamento: 23/09/2008
LINGUAGGIO HTML
Titoli ed elenchi

Indicizzazione con numeri romani minuscoli:


<ol type= “i”>
<li> prima voce di menu </li>
<li> seconda voce di menu </li>
<li> terza voce di menu </li>
………………………………
</ol>

L’attributo start consente di specificare il numero iniziale dell’elenco.


<ol start= “numero intero”>
<li> prima voce di menu </li>
<li> seconda voce di menu </li>
<li> terza voce di menu </li>
………………………………
</ol>
L’elenco creato inizia dal numero intero indicato.

Elenchi NON ordinati (puntati)


Gli elenchi non ordinati funzionano in modo simile a quelli ordinati. La differenza di fondo è che le
risorse indicizzate non sono legate da stretti rapporti di successione gerarchica, per cui non sono
previsti elenchi progressivi quali numeri o lettere. Gli elenchi non ordinati (o puntati) si
compongono di un tag unico di apertura e chiusura <ul></ul> e tanti tag di elenco per quante sono
le voci da indicizzare <li>. La corretta sintassi per definire un elenco puntato è la seguente:

<ul>
<li> prima voce di menu </li>
<li> seconda voce di menu </li>
<li> terza voce di menu </li>
………………………………
</ul>

Se non definito diversamente l'elenco è costituito da una serie di pallini.


Come per gli elenchi numerati anche in questo caso è possibile indicare diversi tipi di elenco: per
default i pallini sono pieni; questi si possono ottenere anche con l’attributo type uguale a disc.

<ul type= “disc”>


<li> prima voce di menu </li>
<li> seconda voce di menu </li>
<li> terza voce di menu </li>
………………………………
</ul>

3
Autore: Bocchi Cinzia
Ultimo aggiornamento: 23/09/2008
LINGUAGGIO HTML
Titoli ed elenchi

L'attributo circle imposta pallini vuoti all'interno:


<ul type= “circle”>
<li> prima voce di menu </li>
<li> seconda voce di menu </li>
<li> terza voce di menu </li>
………………………………
</ul>

L'attributo square imposta elenchi definiti da quadratini pieni:


<ul type= “square”>
<li> prima voce di menu </li>
<li> seconda voce di menu </li>
<li> terza voce di menu </li>
………………………………
</ul>

Esempio 13: Creare elenchi e sotto-elenchi


Questo esempio mostra come creare un elenco numerato che contiene un sotto-elenco puntato.
Esempio13.html
<html>
<head>
<title> Esempio 13 </title>
</head>
<body>
<ol>
<li> Prima voce elenco </li>
<li> Seconda voce elenco </li>
<ul>
<li> Prima voce sotto-elenco </li>
<li> Seconda voce sotto-elenco </li>
<li> Terza voce sotto-elenco </li>
</ul>
<li> Terza voce elenco </li>
</ol>
</body>
</html>

Elementi deprecati (specifica HTML 4.01 del W3C)


Tutti gli attributi del tag ol
Tutti gli attributi del tag ul

Quest'opera è stata rilasciata sotto la licenza Creative Commons Attribuzione-Non commerciale 2.5 Italia. Per leggere una copia della
licenza visita il sito web http://creativecommons.org/licenses/by-nc/2.5/it/ o spedisci una lettera a Creative Commons, 171 Second
Street, Suite 300, San Francisco, California, 94105, USA.

4
Autore: Bocchi Cinzia
Ultimo aggiornamento: 23/09/2008
LINGUAGGIO HTML
Titoli ed elenchi

5
Autore: Bocchi Cinzia
Ultimo aggiornamento: 23/09/2008