7 Struttura globale di un documento HTML

Sommario

  1. Introduzione alla struttura di un documento HTML
  2. Informazioni sulla versione di HTML
  3. L'elemento HTML
  4. L'intestazione del documento
    1. L'elemento HEAD
    2. L'elemento TITLE
    3. L'attributo title
    4. I metadati
  5. Il corpo del documento
    1. L'elemento BODY
    2. Identificatori di elemento: gli attributi id e class
    3. Elementi a livello di blocco e in riga
    4. Raggruppare gli elementi: gli elementi DIV e SPAN
    5. Intestazioni: gli elementi H1, H2, H3, H4, H5, H6
    6. L'elemento ADDRESS

7.1 Introduzione alla struttura di un documento HTML

Un documento HTML si compone di tre parti:

  1. una riga contenente informazioni sulla versione di HTML,
  2. una sezione esplicativa di intestazione (delimitata dall'elemento HEAD),
  3. un corpo, che contiene il contenuto effettivo del documento. Il corpo può essere implementato per mezzo dell'elemento BODY o dell'elemento FRAMESET.

Dello spazio bianco (spazi, a capo, tabulazioni e commenti) può comparire prima o dopo ciascuna sezione. Le sezioni 2 e 3 dovrebbero essere delimitate dall'elemento HTML.

Ecco qui un esempio di un semplice documento HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
   <HEAD>
      <TITLE>Il mio primo documento HTML</TITLE>
   </HEAD>
   <BODY>
      <P>Ciao mondo!
   </BODY>
</HTML>

7.2 Informazioni sulla versione di HTML

Un documento HTML valido dichiara quale versione di HTML è usata nel documento. La dichiarazione del tipo di documento menziona la definizione del tipo di documento (DTD) in uso per il documento (si veda [ISO8879]).

L'HTML 4.01 specifica tre DTD, così gli autori devono includere nei loro documenti una delle seguenti dichiarazioni del tipo di documento. Le DTD differiscono negli elementi che esse supportano.

L'URI presente in ciascuna dichiarazione del tipo di documento consente ai programmi utente di scaricare la DTD e tutti gli insiemi di entità necessari. I seguenti URI (relativi) rimandano alle DTD e agli insiemi di entità per l'HTML 4:

Il legame tra identificatori pubblici e file può essere specificato usando un file di catalogo che segue il formato raccomandato dall'Oasis Open Consortium (si veda [OASISOPEN]). Un file di catalogo esemplificativo per HTML 4.01 è incluso all'inizio della sezione sulle informazioni di riferimento SGML per HTML. Le ultime due lettere della dichiarazione indicano la lingua della DTD. Per l'HTML, questa è sempre l'inglese ("EN").

Nota. A partire dalla versione del 24 Dicembre di HTML 4.01, Il Gruppo di lavoro su HTML rimanda alla seguente linea programmatica:

Ciò significa che in una dichiarazione del tipo di documento, gli autori possono usare in tutta sicurezza un identificatore di sistema che rimanda all'ultima versione di una DTD di HTML 4. Gli autori possono anche scegliere di usare un identificatore di sistema che si riferisce ad una specifica (datata) versione di una DTD di HTML 4, quando è richiesta la conformità a quella particolare DTD. Il W3C farà ogni sforzo per conservare i documenti d'archivio indefinitamente disponibili presso i loro indirizzi originali nella loro forma originale.

7.3 L'elemento HTML

<!ENTITY % html.content "HEAD, BODY">

<!ELEMENT HTML O O (%html.content;)    -- elemento radice del documento -->
<!ATTLIST HTML
  %i18n;                               -- lang, dir --
  >

Marcatore iniziale: facoltativo, marcatore finale: facoltativo

Definizioni di attributo

version = cdata [CN]
Disapprovato. Il valore di questo attributo specifica quale versione di DTD HTML governa il documento corrente. Questo attributo è stato disapprovato perché è ridondante rispetto alle informazioni sulla versione fornite dalla dichiarazione del tipo di documento.

Attributi definiti altrove

Dopo la dichiarazione del tipo di documento, la parte rimanente di un documento HTML è contenuta all'interno dell'elemento HTML. Pertanto un tipico documento HTML ha questa struttura:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
...L'intestazione, il corpo, ecc. vanno qui...
</HTML>

7.4 L'intestazione del documento

7.4.1 L'elemento HEAD

<!-- %head.misc; definito precedentemente come "SCRIPT|STYLE|META|LINK|OBJECT" -->
<!ENTITY % head.content "TITLE & BASE?">

<!ELEMENT HEAD O O (%head.content;) +(%head.misc;) -- intestazione del documento -->
<!ATTLIST HEAD
  %i18n;                               -- lang, dir --
  profile     %URI;          #IMPLIED  -- dizionario designato di metainformazioni --
  >

Marcatore iniziale: facoltativo, marcatore finale: facoltativo

Definizioni di attributo

profile = uri [CT]
Questo attributo specifica la locazione di uno o più profili di metadati, separati da spazio bianco. In vista di future estensioni, i programmi utente dovrebbero considerare il valore come un elenco anche se queste specifiche considerano solo il primo URI come significativo. I profili saranno discussi più sotto nella sezione dedicata ai metadati.

Attributi definiti altrove

L'elemento HEAD contiene informazioni circa il documento corrente, quali il suo titolo, le parole chiave che possono essere utili ai motori di ricerca, ed altri dati che non sono considerati come contenuto del documento. I programmi utente generalmente non riproducono gli elementi che appaiono in HEAD come contenuto. Essi possono, tuttavia, rendere disponibili agli utenti attraverso altri meccanismi le informazioni presenti in HEAD.

7.4.2 L'elemento TITLE

<!-- L'elemento TITLE non è considerato come parte del flusso di testo.
       Esso dovrebbe essere visualizzato, ad esempio, come intestazione della pagina
       o come titolo della finestra. È richiesto esattamente un titolo per documento.
    -->
<!ELEMENT TITLE - - (#PCDATA) -(%head.misc;) -- titolo del documento -->
<!ATTLIST TITLE %i18n>

Marcatore iniziale: obbligatorio, marcatore finale: obbligatorio

Attributi definiti altrove

Ogni documento HTML deve avere un elemento TITLE nella sezione HEAD.

Gli autori dovrebbero usare l'elemento TITLE per identificare i contenuti di un documento. Poiché gli utenti consultano spesso documenti fuori contesto, gli autori dovrebbero fornire titoli ricchi di informazioni contestuali. Così, invece di un titolo come "Introduzione", che non presenta granché di restroscena contestuale, gli autori dovrebbero fornire un titolo del tipo "Introduzione all'apicoltura medioevale".

Per ragioni di accessibilità, i programmi utente devono sempre rendere il contenuto dell'elemento TITLE disponibile agli utenti (con l'inclusione degli elementi TITLE che sono presenti nei frame). Il meccanismo per ottenere ciò dipende dal tipo di programma utente (es., come una didascalia, come parlato).

I titoli possono contenere entità carattere (per i caratteri accentati, i caratteri speciali, ecc.), ma non possono contenere altro codice di marcatura (compresi i commenti). Ecco qui un esempio tipico di titolo di documento:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>Uno studio sulla dinamica della popolazione</TITLE>
... altri elementi d'intestazione...
</HEAD>
<BODY>
... corpo del documento...
</BODY>
</HTML>

7.4.3 L'attributo title

Definizioni di attributo

title = text [CS]
Questo attributo offre informazioni per la consultazione relative all'elemento per il quale è impostato.

A differenza dell'elemento TITLE, che offre informazioni su un intero documento e può apparire una volta soltanto, l'attributo title può chiosare un qualsiasi numero di elementi. Si consulti la definizione di un elemento per verificare se esso supporta questo attributo.

I valori dell'attributo title possono essere rappresentati dai programmi utente in una varietà di modi. Per esempio, i browser visuali mostrano frequentemente il titolo come un "consiglio utile" (un breve messaggio che appare quando il dispositivo di puntamento si ferma su un oggetto). I programmi utente di tipo acustico possono, in un contesto analogo, dire a voce l'informazione presente nel title. Ad esempio, impostare tale attributo in un collegamento consente ai programmi utente (visuali e non visuali) di dire agli utenti qualcosa sulla natura della risorsa collegata:

...del testo...
Ecco una foto di  
<A href="http://someplace.com/neatstuff.gif" title="Una mia immersione con l'autorespiratore">
   me in immersione con l'autorespiratore l'estate scorsa
</A>
...dell'altro testo...

L'attributo title ha una funzione aggiuntiva quando usato insieme con l'elemento LINK per designare un foglio di stile esterno. Si consulti per dettagli la sezione su collegamenti e fogli di stile.

Nota. Per migliorare la qualità della sintesi vocale nei casi trattati in modo insoddisfacente per mezzo delle tecniche standard, future versioni dell'HTML potranno includere un attributo per la codifica di informazioni fonematiche e prosodiche.

7.4.4 I metadati

Nota. Il Resource Description Framework [Sistema di Descrizione delle Risorse] del W3C (si veda [RDF10]) divenne una Raccomandazione W3C nel Febbraio 1999. RDF consente agli autori di specificare metadati leggibili da macchine relativi a documenti HTML e ad altre risorse accessibili via rete.

L'HTML lascia agli autori la possibilità di specificare dei metadati -- informazioni su un documento piuttosto che il contenuto di un documento -- in una varietà di modi.

Per esempio, per specificare l'autore di un documento, si può usare l'elemento META come segue:

<META name="Author" content="Dave Raggett">

L'elemento META specifica una proprietà (in questo caso "Author") e le assegna un valore (in questo caso "Dave Raggett").

Queste specifiche non definiscono un insieme di proprietà legali dei metadati. Il significato di una proprietà e l'insieme dei valori legali per quella proprietà dovrebbero essere definiti all'interno di un lessico di riferimento chiamato profilo. Ad esempio, un profilo progettato per aiutare i motori di ricerca ad indicizzare i documenti dovrebbe definire proprietà quali "author", "copyright", "keywords", ecc.

Specificare i metadati

In generale, specificare i metadati richiede due passi:

  1. Dichiarare una proprietà ed un valore per quella proprietà. Questo può essere fatto in due modi:
    1. Dall'interno di un documento, per mezzo dell'elemento META.
    2. Dall'esterno di un documento, attraverso un collegamento ai metadati effettuato per mezzo dell'elemento LINK (si veda la sezione sui tipi di collegamento).
  2. Rinviare ad un profilo dove la proprietà ed i suoi valori legali sono definiti. Per designare un profilo, si usi l'attributo profile dell'elemento HEAD.

Si noti che, una volta che è stato definito un profilo per l'elemento HEAD, il medesimo profilo si applica a tutti gli elementi META e LINK presenti nell'intestazione del documento.

Non si richiede ai programmi utente di supportare i meccanismi dei metadati. Per quelli che scelgono di supportare i metadati, queste specifiche non definiscono come i metadati dovrebbero essere interpretati.

L'elemento META 

<!ELEMENT META - O EMPTY               -- metainformazione generica -->
<!ATTLIST META
  %i18n;                               -- lang, dir, da usare con content --
  http-equiv  NAME           #IMPLIED  -- nome dell'intestazione HTTP di risposta --
  name        NAME           #IMPLIED  -- nome della metainformazione --
  content     CDATA          #REQUIRED -- informazioni associate --
  scheme      CDATA          #IMPLIED  -- modello di contenuto scelto --
  >

Marcatore iniziale: obbligatorio, marcatore finale: proibito

Definizioni di attributo

Per i seguenti attributi, i valori consentiti e la loro interpretazione sono dipendenti dal profilo:

name = name [CS]
Questo attributo identifica un nome di proprietà. Queste specifiche non elencano valori legali per tale attributo.
content = cdata [CS]
Questo attributo specifica un valore di proprietà. Le presenti specifiche non elencano valori legali per questo attributo.
scheme = cdata [CS]
Questo attributo designa uno schema da adoperarsi per interpretare il valore di una proprietà (si veda la sezione sui profili per dettagli).
http-equiv = name [CI]
Questo attributo può essere usato al posto dell'attributo name. I server HTTP usano questo attributo per raccogliere informazioni per le intestazioni dei messaggi di risposta HTTP.

Attributi definiti altrove

L'elemento META può essere usato per identificare delle proprietà di un documento (es., autore, data di scadenza, un elenco di parole chiave, ecc.) ed assegnare valori a quelle proprietà. Queste specifiche non definiscono un insieme normativo di proprietà.

Ogni elemento META specifica una coppia proprietà/valore. L'attributo name identifica la proprietà e l'attributo content specifica il valore della proprietà.

Per esempio, la seguente dichiarazione imposta un valore per la proprietà Author:

<META name="Author" content="Dave Raggett">

L'attributo lang può essere usato con META per specificare la lingua per il valore dell'attributo content. Ciò consente ai sintetizzatori vocali di applicare regole di pronuncia dipendenti dalla lingua.

In questo esempio, il nome dell'autore è dichiarato essere francese:

<META name="Author" lang="fr" content="Arnaud Le Hors">

Nota. L'elemento META è un meccanismo generico per specificare metadati. Tuttavia alcuni elementi ed attributi HTML già trattano certi frammenti di metadati e possono essere usati dagli autori al posto di META per specificare quei frammenti: l'elemento TITLE, l'elemento ADDRESS, gli elementi INS e DEL, l'attributo title e l'attributo cite.

Nota. Quando una proprietà specificata da un elemento META ha come valore una URI, alcuni autori preferiscono specificare i metadati per mezzo dell'elemento LINK. Così, la seguente dichiarazione di metadati:

<META name="DC.identifier"
      content="http://www.ietf.org/rfc/rfc1866.txt">

potrebbe anche essere scritta nella forma:

<LINK rel="DC.identifier"
         type="text/plain"
         href="http://www.ietf.org/rfc/rfc1866.txt">
META e intestazioni HTTP

L'attributo http-equiv può essere usato al posto dell'attributo name ed ha un'importanza particolare quando i documenti sono recuperati attraverso Hypertext Transfer Protocol (HTTP) [Protocollo di Trasferimento degli Ipertesti]. I server HTTP possono usare il nome della proprietà specificata dall'attributo http-equiv per creare un'intestazione basata su [RFC822] nella risposta HTTP. Si vedano le specifiche HTTP ([RFC2616]) per dettagli sulle intestazioni HTTP valide.

La seguente dichiarazione META di esempio:

<META http-equiv="Expires" content="Tue, 20 Aug 1996 14:25:27 GMT">

avrà come risultato l'intestazione HTTP:

Expires: Tue, 20 Aug 1996 14:25:27 GMT

Questa può essere usata dalle memorie cache per determinare quando andare a prelevare una copia aggiornata del documento associato.

Nota. Alcuni programmi utente supportano l'uso di META per rinnovare la pagina corrente dopo un determinato numero di secondi, con l'opzione di sostituirla con un URI differente. Gli autori non dovrebbero usare questa tecnica per rinviare gli utenti a pagine differenti, poiché tale sistema rende la pagina inaccessibile per alcuni utenti. Al contrario, l'inoltro automatico di una certa pagina dovrebbe essere fatto usando i reindirizzamenti lato server.

META e motori di ricerca

Un uso comune di META è di specificare le parole chiave che un motore di ricerca può adoperare per accrescere la qualità dei risultati della ricerca. Quando una serie di elementi META fornisce informazioni dipendenti dalla lingua su un documento, i motori di ricerca possono attivare un filtro sull'attributo lang per visualizzare i risultati della ricerca in base alle preferenze linguistiche dell'utente. Ad esempio,

<-- Per chi parla l'inglese americano -->
<META name="keywords" lang="en-us" 
         content="vacation, Greece, sunshine">
<-- Per chi parla l'inglese britannico -->
<META name="keywords" lang="en" 
         content="holiday, Greece, sunshine">
<-- Per chi parla francese	 -->
<META name="keywords" lang="fr" 
         content="vacances, Gr&egrave;ce, soleil">

L'efficacia dei motori di ricerca può essere accresciuta anche usando l'elemento LINK per specificare collegamenti a traduzioni del documento in altre lingue, collegamenti a versioni del documento per altri media (es., PDF), e, quando il documento è parte di un insieme, collegamenti ad un punto di partenza appropriato per scorrere l'insieme.

Un ulteriore aiuto è fornito nella sezione su come aiutare i motori di ricerca a indicizzare il vostro sito Internet.

META e PICS

La "Platform for Internet Content Selection" [Piattaforma per la Selezione dei Contenuti di Internet] (PICS, descritto in [PICS]) è un'infrastruttura per associare etichette (metadati) con contenuti di Internet. Progettata in origine per aiutare genitori e insegnanti nel controllo delle risorse a cui i bambini possono accedere su Internet, essa agevola anche altri usi delle etichette, comprese firme cifrate, riservatezza e gestione dei diritti di proprietà intellettuale.

Questo esempio illustra come si può usare una dichiarazione META per includere un'etichetta PICS 1.1:

<HEAD>
 <META http-equiv="PICS-Label" content='
 (PICS-1.1 "http://www.gcf.org/v2.5"
    labels on "1994.11.05T08:15-0500"
      until "1995.12.31T23:59-0000"
      for "http://w3.org/PICS/Overview.html"
    ratings (suds 0.5 density 0 color/hue 1))
 '>
  <TITLE>... titolo del documento ...</TITLE>
</HEAD>
META ed informazioni predefinite

L'elemento META può essere usato per specificare le informazioni predefinite per un documento nei seguenti casi:

L'esempio seguente specifica la codifica dei caratteri per un documento come ISO-8859-5:

<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-5"> 

Profili dei metadati 

L'attributo profile dell'elemento HEAD specifica l'ubicazione di un profilo dei metadati. Il valore dell'attributo profile è un URI. I programmi utente dovrebbero usare questo URI in due modi:

Questo esempio rimanda ad un ipotetico profilo che definisce proprietà utili per l'indicizzazione del documento. Le proprietà definite da questo profilo -- con l'inclusione di "author", "copyright", "keywords" e "date" -- ricevono i loro valori dalle successive dichiarazioni META.

 <HEAD profile="http://www.acme.com/profili/base">
  <TITLE>Come completare le copertine del Rapporto</TITLE>
  <META name="author" content="Mario Rossi">
  <META name="copyright" content="&copy; 1997 Acme S.p.A.">
  <META name="keywords" content="aziendale,direttive,catalogazione">
  <META name="date" content="1994-11-06T08:49:37+00:00">
 </HEAD>

All'epoca della stesura di queste specifiche, è pratica comune usare i formati per la data descritti in [RFC2616], sezione 3.3. Poiché tali formati sono relativamente difficili da elaborare, si raccomanda agli autori di utilizzare il formato per la data [ISO8601]. Per maggiori informazioni si vedano le sezioni sugli elementi INS e DEL.

L'attributo scheme permette agli autori di fornire ai programmi utente maggiori informazioni contestuali per la corretta interpretazione dei metadati. A volte tali informazioni aggiuntive possono essere decisive, come nel caso in cui è possibile specificare i metadati in formati differenti. Un autore, ad esempio, potrebbe indicare una data nel formato (ambiguo) "10-9-97": significa 9 Ottobre 1997 o 10 Settembre 1997? Il valore "Month-Day-Year" ["Mese-Giorno-Anno"] dell'attributo scheme renderebbe non più ambiguo questo valore di data.

Altre volte l'attributo scheme può fornire ai programmi utente informazioni utili ma non critiche.

Ad esempio, la seguente dichiarazione dell'attributo scheme può aiutare un programma utente a determinare che il valore della proprietà "identifier" è un numero di codice ISBN:

<META scheme="ISBN" name="identifier" content="0-8230-2355-9">

I valori per l'attributo scheme dipendono dal nome della proprietà e dal profilo associato.

Nota. Un profilo campione è il Dublin Core (si veda [DCORE]). Questo profilo definisce un insieme di proprietà raccomandate per le descrizioni bibliografiche in formato elettronico e mira a promuovere l'interoperabilità tra disparati modelli di descrizione.

7.5 Il corpo del documento

7.5.1 L'elemento BODY

<!ELEMENT BODY O O (%block;|SCRIPT)+ +(INS|DEL) -- corpo del documento -->
<!ATTLIST BODY
  %attrs;                              -- %coreattrs, %i18n, %events --
  onload          %Script;   #IMPLIED  -- il documento è stato caricato --
  onunload        %Script;   #IMPLIED  -- il documento è stato rimosso --
  >

Marcatore iniziale: facoltativo, marcatore finale: facoltativo

Definizioni di attributo

background = uri [CT]
Disapprovato. Il valore di questo attributo è un URI che designa una risorsa di tipo immagine. L'immagine generalmente ricopre in porzioni lo sfondo (per i browser visuali).
text = color [CI]
Disapprovato. Questo attributo imposta il colore di primo piano del testo (per i browser visuali).
link = color [CI]
Disapprovato. Questo attributo imposta il colore del testo che evidenzia i collegamenti ipertestuali non visitati (per i browser visuali).
vlink = color [CI]
Disapprovato. Questo attributo imposta il colore del testo che evidenzia i collegamenti ipertestuali visitati (per i browser visuali).
alink = color [CI]
Disapprovato. Questo attributo imposta il colore del testo che evidenzia i collegamenti ipertestuali quando selezionati dall'utente (per i browser visuali).

Attributi definiti altrove

Il corpo di un documento racchiude il contenuto del documento. Il contenuto può essere presentato da un programma utente in una varietà di modi. Ad esempio, per quanto riguarda i browser visuali, si può pensare al corpo come a una sorta di tela in cui il contenuto appare: testo, immagini, colori, grafici, ecc. Per quanto riguarda i programmi utente di tipo acustico, il medesimo contenuto può essere reso in parole. Dal momento che i fogli di stile sono ora il sistema privilegiato per specificare la presentazione di un documento, gli attributi presentazionali dell'elemento BODY sono stati disapprovati.

ESEMPIO DISAPPROVATO:
Il seguente frammento di HTML illustra l'uso degli attributi disapprovati. Esso imposta il colore di sfondo della finestra a bianco, il colore di primo piano del testo a nero, ed il colore degli ipercollegamenti inizialmente a rosso, a fucsia quando attivati e a marrone scuro una volta visitati.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
 <TITLE>Uno studio sulla dinamica della popolazione</TITLE>
</HEAD>
<BODY bgcolor="white" text="black"
  link="red" alink="fuchsia" vlink="maroon">
  ... corpo del documento...
</BODY>
</HTML>

Usando i fogli di stile, il medesimo effetto potrebbe essere raggiunto come segue:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
 <TITLE>Uno studio sulla dinamica della popolazione</TITLE>
 <STYLE type="text/css">
  BODY { background: white; color: black}
  A:link { color: red }
  A:visited { color: maroon }
  A:active { color: fuchsia }
 </STYLE>
</HEAD>
<BODY>
  ... corpo del documento...
</BODY>
</HTML>

L'uso di fogli di stile esterni (collegati) dà la flessibilità per cambiare la presentazione senza modificare il documento HTML originale:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
 <TITLE>Uno studio sulla dinamica della popolazione</TITLE>
 <LINK rel="stylesheet" type="text/css" href="stilerapido.css">
</HEAD>
<BODY>
  ... corpo del documento...
</BODY>
</HTML>

Documenti a frame e corpi HTML. I documenti che contengono insiemi di frame sostituiscono l'elemento BODY con l'elemento FRAMESET. Si consulti la sezione dedicata ai frame per maggiori informazioni.

7.5.2 Identificatori di elemento: gli attributi id e class

Definizioni di attributo

id = name [CS]
Questo attributo assegna un nome ad un elemento. Questo nome deve essere univoco all'interno di un documento.
class = elenco di tipo cdata [CS]
Questo attributo assegna un nome di classe o un insieme di nomi di classe ad un elemento. Un qualsiasi numero di elementi può essere assegnato allo stesso nome o agli stessi nomi di classe. Una successione di nomi di classe deve essere separata con caratteri spazio bianco.

L'attributo id assegna un identificatore univoco ad un elemento (il che può essere verificato da un analizzatore SGML). Ad esempio, i seguenti paragrafi si distinguono per mezzo dei loro valori id:

<P id="mioparagrafo"> Questo è un paragrafo denominato univocamente.</P>
<P id="tuoparagrafo"> Anche questo è un paragrafo denominato univocamente.</P>

L'attributo id può essere usato in HTML con svariate funzioni:

L'attributo class, dal canto suo, assegna uno o più nomi di classe ad un elemento; si può dire che l'elemento appartiene a queste classi. Un nome di classe può essere condiviso da differenti istanze di elemento. L'attributo class è usato in HTML con più funzioni:

Nell'esempio seguente, l'elemento SPAN è usato in congiunzione con gli attributi id e class per contraddistinguere dei messaggi nel documento. I messaggi appaiono nelle versioni inglese e francese.

<!-- messaggi in inglese -->
<P><SPAN id="msg1" class="info" lang="en">Variable declared twice</SPAN>
<P><SPAN id="msg2" class="avviso" lang="en">Undeclared variable</SPAN>
<P><SPAN id="msg3" class="errore" lang="en">Bad syntax for variable name</SPAN>
<!-- messaggi in francese -->
<P><SPAN id="msg1" class="info" lang="fr">Variable d&eacute;clar&eacute;e deux fois</SPAN>
<P><SPAN id="msg2" class="avviso" lang="fr">Variable ind&eacute;finie</SPAN>
<P><SPAN id="msg3" class="errore" lang="fr">Erreur de syntaxe pour variable</SPAN>

Le seguenti regole di stile CSS indicherebbero ai programmi utente visuali di mostrare i messaggi informativi in verde, i messaggi di avviso in giallo e i messaggi di errore in rosso:

SPAN.info    { color: green }
SPAN.avviso  { color: yellow }
SPAN.errore  { color: red }

Si noti che il francese "msg1" e l'inglese "msg1" non possono apparire nel medesimo documento dal momento che condividono lo stesso valore id. Gli autori possono fare un uso ulteriore dell'attributo id per perfezionare la presentazione di messaggi individuali, renderli àncore di destinazione, ecc.

A quasi tutti gli elementi HTML si possono assegnare un identificatore ed informazioni di classe.

Supponiamo, ad esempio, che stiamo scrivendo un documento su un linguaggio di programmazione. Il documento dovrà includere una certa quantità di esempi preformattati. Adoperiamo l'elemento PRE per formattare gli esempi. Assegniamo anche un colore di sfondo (il verde) a tutte le istanze dell'elemento PRE appartenenti alla classe "esempio".

<HEAD>
<TITLE>... titolo del documento ...</TITLE>
<STYLE type="text/css">
PRE.esempio { background : green }
</STYLE>
</HEAD>
<BODY>
<PRE class="esempio" id="esempio-1">
...il codice di esempio va qui...
</PRE>
</BODY>

Impostando l'attributo id per questo esempio, è possibile (1) creare un ipercollegamento ad esso e (2) sovrascrivere le informazioni di stile relative alla classe con informazioni di stile relative all'istanza.

Nota. L'attributo id condivide il medesimo spazio dei nomi con l'attributo name quando usato come nome di àncore. Si consulti la sezione sulle àncore con id per maggiori informazioni.

7.5.3 Elementi a livello di blocco e in riga

Certi elementi HTML che appaiono nel BODY sono detti "a livello di blocco" mentre altri "in riga" (conosciuti anche come "a livello del testo"). La distinzione è fondata su una serie di nozioni:

Modello di contenuto
In generale, gli elementi a livello di blocco possono contenere elementi in riga ed altri elementi a livello di blocco. Generalmente gli elementi in riga possono contenere solo dati e altri elementi in riga. Inerente a questa distinzione strutturale è l'idea che gli elementi a livello di blocco creino strutture "più ampie" di quelle degli elementi in riga.
Formattazione
Gli elementi a livello di blocco sono formattati in modo predefinito diversamente dagli elementi in riga. In genere gli elementi a livello di blocco cominciano su nuove righe, gli elementi in riga no. Per informazioni su spazio bianco, interruzioni di riga e formattazione dei blocchi si consulti la sezione sul testo.
Direzione del testo
Per motivi tecnici che riguardano l'algoritmo di testo bidirezionale [UNICODE], gli elementi a livello di blocco ed in riga differiscono nel modo in cui ereditano le informazioni sulla direzione del testo. Per dettagli, si veda la sezione su eredità della direzione del testo.

I fogli di stile forniscono gli strumenti per determinare la riproduzione di elementi arbitrari, compreso se un elemento è reso come elemento di blocco o in riga. In alcuni casi, qualcosa come uno stile in riga per elementi di elenco può risultare appropriato, ma in linea generale si disincentivano gli autori dal rovesciare in questo modo l'interpretazione convenzionale degli elementi HTML.

L'alterazione dei tradizionali idiomi di presentazione per elementi a livello di blocco ed in riga genera anche conseguenze sull'algoritmo per il testo bidirezionale. Si veda, per maggiori informazioni, la sezione sugli effetti dei fogli di stile sulla bidirezionalità.

7.5.4 Raggruppare gli elementi: gli elementi DIV e SPAN

<!ELEMENT DIV - - (%flow;)*            -- contenitore generico di lingua/stile -->
<!ATTLIST DIV
  %attrs;                              -- %coreattrs, %i18n, %events --
  >
<!ELEMENT SPAN - - (%inline;)*         -- contenitore generico di lingua/stile -->
<!ATTLIST SPAN
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

Marcatore iniziale: obbligatorio, marcatore finale: obbligatorio

Attributi definiti altrove

Gli elementi DIV e SPAN, insieme con gli attributi id e class, offrono un meccanismo generico per aggiungere struttura ai documenti. Questi elementi definiscono il contenuto o come in riga (SPAN) o come a livello di blocco (DIV), ma non impongono alcun altro idioma presentazionale sul contenuto. Pertanto, gli autori possono usare questi elementi in congiunzione con i fogli di stile, con l'attributo lang, ecc., per adattare l'HTML ai propri bisogni ed ai propri gusti.

Si supponga, ad esempio, di voler generare un documento HTML basato su un database di informazioni sui clienti. Poiché l'HTML non include elementi che identificano oggetti quali "cliente", "numero telefonico", "indirizzo di posta elettronica", ecc., si usano DIV e SPAN per ottenere i desiderati effetti strutturali e presentazionali. Si potrebbe usare l'elemento TABLE così come indicato di seguito per strutturare le informazioni:

<!-- Esempio di dati dal database dei clienti: -->
<!-- Nome: Stefano Borghi, Tel: (06)5551212, E-mail: sb@foo.org -->

<DIV id="cliente-borghi" class="cliente">
<P><SPAN class="cliente-titolo">Informazioni sul cliente:</SPAN>
<TABLE class="cliente-dati">
<TR><TH>Cognome:<TD>Borghi</TR>
<TR><TH>Nome:<TD>Stefano</TR>
<TR><TH>Tel:<TD>(06)5551212</TR>
<TR><TH>E-mail:<TD>sb@foo.org</TR>
</TABLE>
</DIV>

<DIV id="cliente-laforgia" class="cliente">
<P><SPAN class="cliente-titolo">Informazioni sul cliente:</SPAN>
<TABLE class="cliente-dati">
<TR><TH>Cognome:<TD>Laforgia</TR>
<TR><TH>Nome:<TD>Ivano</TR>
<TR><TH>Tel:<TD>(02)4441212</TR>
<TR><TH>E-mail:<TD>ivano@coucou.com</TR>
</TABLE>
</DIV>

In seguito sarà possibile aggiungere facilmente dichiarazioni di fogli di stile per affinare la presentazione di queste voci di database.

Per un altro esempio di utilizzo, si consulti l'esempio nella sezione sugli attributi class e id.

In genere i programmi utente visuali inseriscono un'interruzione di riga prima e dopo gli elementi DIV. Ad esempio:

<P>aaaaaaaaa<DIV>bbbbbbbbb</DIV><DIV>ccccc<P>ccccc</DIV>

è riprodotto tipicamente come:

aaaaaaaaa
bbbbbbbbb
ccccc

ccccc

7.5.5 Intestazioni: gli elementi H1, H2, H3, H4, H5, H6

<!ENTITY % heading "H1|H2|H3|H4|H5|H6">
<!--
  Vi sono sei livelli di intestazioni, da H1 (il più importante)
  ad H6 (il meno importante).
-->

<!ELEMENT (%heading;)  - - (%inline;)* -- intestazione -->
<!ATTLIST (%heading;)
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

Marcatore inziale: obbligatorio, marcatore finale: obbligatorio

Attributi definiti altrove

Un elemento di intestazione descrive brevemente l'argomento della sezione che esso introduce. Le informazioni di intestazione possono essere usate dai programmi utente, ad esempio, per costruire automaticamente un sommario per un documento.

Vi sono in HTML sei livelli di intestazione, con H1 come il più importante ed H6 come il meno importante. I programmi utente di tipo visuale riproducono di solito le intestazioni più importanti con caratteri più grandi di quelli usati per le meno importanti.

L'esempio successivo mostra come usare l'elemento DIV per associare un'intestazione con la sezione del documento che la segue. Questo metodo consente di definire uno stile per la sezione (colorare lo sfondo, impostare il carattere, ecc.) con i fogli di stile.

<DIV class="sezione" id="elefanti-foresta" >
<H1>Elefanti di foresta</H1>
<P>In questa sezione parleremo dei poco conosciuti elefanti di foresta.
...questa sezione continua...
<DIV class="sottosezione" id="habitat-foresta" >
<H2>Habitat</H2>
<P>Gli elefanti di foresta non vivono sugli alberi ma tra essi.
...questa sottosezione continua...
</DIV>
</DIV>

Questa struttura può essere ornata per mezzo di informazioni di stile quali:

<HEAD>
<TITLE>... titolo del documento ...</TITLE>
<STYLE type="text/css">
DIV.sezione { text-align: justify; font-size: 12pt}
DIV.sottosezione { text-indent: 2em }
H1 { font-style: italic; color: green }
H2 { color: green }
</STYLE>
</HEAD>

Sezioni numerate e riferimenti
L'HTML non produce di per sé stesso la generazione dei numeri di sezione a partire dalle intestazioni. Questa agevolazione può tuttavia essere offerta dai programmi utente. Tra breve i linguaggi per i fogli di stile come CSS consentiranno agli autori di controllare la generazione di numeri di sezione (comodo per i riferimenti in avanti nei documenti stampati, del tipo "Si veda la sezione 7.2").

Alcuni considerano il saltare dei livelli di intestazione una cattiva consuetudine. Essi accettano H1 H2 H1, mentre non accettano H1 H3 H1, poiché il livello di intestazione H2 risulta saltato.

7.5.6 L'elemento ADDRESS

<!ELEMENT ADDRESS - - (%inline;)* -- informazioni sull'autore -->
<!ATTLIST ADDRESS
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

Marcatore iniziale: obbligatorio, marcatore finale: obbligatorio

Attributi definiti altrove

L'elemento ADDRESS può essere usato dagli autori per fornire informazioni di contatto per un documento o per la parte più significativa di un documento, quale un modulo. Questo elemento compare spesso all'inizio o alla fine di un documento.

Ad esempio, una pagina sul sito Internet del W3C relativa all'HTML potrebbe includere le seguenti informazioni di contatto:

<ADDRESS>
<A href="../People/Raggett/">Dave Raggett</A>, 
<A href="../People/Arnaud/">Arnaud Le Hors</A>, 
persone da contattare per le <A href="Activity">Attività del W3C su HTML</A><BR> 
$Date: 1999/12/24 23:07:14 $
</ADDRESS>