Gli Attributi HTML

Abbiamo visto alcuni tags HTML e il loro utilizzo come i tags per le intestazioni <h1>, <h2>, il tag per i paragrafi <p> e qualche altro. Finora li abbiamo utilizzati nella loro forma più semplice, infatti la maggior parte dei tag HTML può anche avere degli attributi che forniscono informazioni aggiuntive.

Un attributo viene utilizzato per definire le caratteristiche di un elemento HTML ed è collocato all'interno del tag di apertura dell'elemento. Tutti gli attributi sono costituiti da due componenti: un nome e un valore:

Il nome indica la proprietà che si desidera impostare. Ad esempio, l'elemento paragrafo <p> nell'esempio successivo contiene un attributo il cui nome è align, che può essere utilizzato per indicare l'allineamento del paragrafo nella pagina.
Il valore indica il valore che si desidera impostare per la proprietà specificata, ed è sempre inserito fra doppi apici. L'esempio seguente mostra tre possibili valori per l' attributo align: left, center e right.

Il nome e il valore non sono case-sensitive. Ma il World Wide Web Consortium (W3C) raccomanda di utilizzare sempre lettere minuscole per gli attributi/valori nelle raccomandazioni dello standard HTML 4.

Esempio

<!DOCTYPE html>
<html>
<head>
<title>Align Attribute  Example</title>
</head>
<body>
<p align="left">This is left aligned</p>
<p align="center">This is center aligned</p>
<p align="right">This is right aligned</p>
</body>
</html>

Fornirà il seguente risultato:

This is left aligned

This is center aligned

This is right aligned

Attributi Fondamentali

I quattro attributi principali che possono essere utilizzati nella maggiorparte degli elementi HTML (non per tutti) sono:

id
title
class
style

L' attributo id

L' attributo id di un tag HTML può essere utilizzato per identificare univocamente qualsiasi elemento all' interno della pagina HTML. Ci sono due principali motivi per cui è consigliato utilizzare gli attributi id:

Se un elemento contiene un attributo id in quanto identificatore univoco è possibile identificare solo quell' elemento ed il suo contenuto.
Se due elementi all' interno della pagina web (o nel foglio di stile CSS) hanno lo stesso nome, è possibile utilizzare l' attributo id per distinguerli.

Parleremo dei fogli di stile in una guida separata. Per adesso iniziamo ad usare l' attributo id per distinguere due elementi paragrafo come mostrato qui di seguito.

Esempio

<p id="html">Qui per spiegare cos' è l' HTML.</p>
<p id="css">Qui per spiegare cos' è un Cascading Style Sheet</p>

L' attributo title

L' attributo title suggerisce un titolo per l' elemento. La sintassi dell' attributo title è simile a quella dell' attributo id:

Il comportamento di questo attributo dipenderà dal tipo di elemento in cui è inserito, spesso viene visualizzato come suggerimento (tooltip) quando il cursore del mouse è posizione sull' elemento o mentre l'elemento è ancora in fase di caricamento.

Esempio

<!DOCTYPE html>
<html>
<head>
<title>Esempio attributo title</title>
</head>
<body>
<h3 title="Hello HTML!">Titled Heading Tag Example</h3>
</body>
</html>

Produrrà il seguente risultato:

Titled Heading Tag Example

Adesso prova a lasciare il cursore del mouse sopra la scritta "Titled Heading Tag Example" e vedrai che che il valore dell' attributo title scritto nel codice apparirà come tooltip sopra il cursore.

L' attributo class

L' attributo class è utilizzato per associare una classe del foglio di stile (style sheet) ad un elemento. Imparerai qualcosa in più al riguardo quando studierai i Cascading Style Sheet (CSS). Quindi per adesso può essere saltato.

Possono essere presenti più valori per l' attributo class, in questo caso saranno separati da uno spazio. Per esempio:

class="className1 className2 className3"

The style Attribute

The style attribute allows you to specify Cascading Style Sheet (CSS) rules within the element.

<!DOCTYPE html>
<html>
<head>
<title>The style Attribute</title>
</head>
<body>
<p style="font-family:arial; color:#FF0000;">Some text...</p>
</body>
</html>

Produrrà il seguente risultato:

Some text...

Poichè a questo punto non stiamo studiando i fogli di stile CSS, ma gli attributi e come vengono utilizzati in HTML, possiamo procedere oltre.

Attributi di Internazionalizzazione

Ci sono tre tipi di attributi di internazionalizzazione, che sono disponibili per molti (ma non tutti) elementi XHTML.

dir
lang
xml:lang

L' attributo dir

L' attributo dir permette di indicare al browser la direzione del testo. L' attributo dir può assumere un valore fra i due disponibili, come si può vedere nella tabella seguente:

Valore	Significato
ltr	Da sinistra a destra (valore di default)
rtl	Da destra a sinistra (per lingue come l' Ebreo o l' Arabo che vengono lette da destra verso sinistra)

Esempio

<!DOCTYPE html>
<html dir="rtl">
<head>
<title>Display Directions</title>
</head>
<body>
This is how IE 5 renders right-to-left directed text.
</body>
</html>

Produrrà il seguente risultato:

This is how IE 5 renders right-to-left directed text.

Quando l' attributo dir è inserito all' interno el tag <html>, determina come dovrà essere mostrato il testo in tutta la pagina. Invece quando è inserito all' interno di un' altro tag, controlla la direzione del testo solo per il contenuto del suddetto tag.

L' attributo lang

L' attributo lang permette di indicare il linguaggio principale utilizzato nel documento, quest' attributo viene mantenuto nello standard HTML solo per una questione di compatibilità con le versioni precedenti di HTML. Infatti nei nuovi documenti XHTML è stato sostituito dall' attributo xml:lang.

Il valore dell' attributo lang è un valore di due caratteri che definisce la lingua e stabilito dallo standard ISO-639. Vai a HTML Language Codes: ISO 639 per un elenco completo delle lingue disponibili.

Esempio

<!DOCTYPE html>
<html lang="en">
<head>
<title>English Language Page</title>
</head>
<body>
This page is using English Language
</body>
</html>

L' attributo xml:lang

L' attributo xml:lang è il sostituto XHTML per l' attributo lang. Il valore dell' attributo xml:lang dev' essere un anche in questo caso un valore preso dallo standard ISO-639.

Attributi Generici

A seguire una tabella con alcuni attributi facilmente utilizzabili con molti tags HTML.

Attributo	Opzioni	Funzione
align	right, left, center	Tag per allineamento orizzontale.
valign	top, middle, bottom	Tag per allineamento verticale all' interno di un elemento HTML.
bgcolor	Valore numerico, esadecimale, RGB	Inserisce un colore di sfondo ad un elemento.
background	URL	Inserisce un immagine di sfondo ad un elemento.
id	Definito dall' utente	Identica un elemento per definirlo nel Cascading Style Sheets.
class	Definito dall' utente	Classifica un elemento per definirlo nel Cascading Style Sheets.
width	Valore Numerico	Definisce la larghezza di una tabella, immagine, o cella di una tabella.
height	Valore Numerico	Definisce l' altezza di una tabella, immagine, o cella di una tabella.
title	Definito dall' utente	Fa apparire un "Pop-up" quando il cursore si trova sopra l'elemento.

Vedremo i relativi esempi quando studieremo i tags HTML. Per un elenco completo dei tags HTML e del loro utilizzo vai alla pagina Lista Tags HTML.