7 La struttura globale di un documento HTML

Argomenti

  1. Introduzione alla struttura di un documento HTML
  2. Informazioni sulla versione dell'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. Gli identificatori degli elementi: gli attributi id e class
    3. Gli elementi a livello blocco ed in linea
    4. Gli elementi di raggruppamento: gli elementi DIV e SPAN
    5. Le titolazioni: gli elementi H1, H2, H3, H4, H5, H6
    6. L'elemento ADDRESS

7.1 Introduzione alla struttura di un documento HTML

Un documento HTML 4.0 è composto di tre parti:

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

Spazi bianchi (spazi, nuove righe, tabulazioni, e commenti) possono apparire prima o dopo ogni sezione. Le sezioni 2 e 3 dovrebbero essere delimitate dall'elemento HTML.

Ecco un esempio di un semplice documento HTML:


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

7.2 Informazioni sulla versione dell'HTML

Un documento HTML valido dichiara quale versione dell'HTML è usata nel documento. La dichiarazione del tipo di documento nomina la definizione del tipo di documento (DTD) impiegata per il documento (consultate [ISO8879]).

L'HTML 4.0 specifica tre DTD, cosicché gli autori devono includere una delle seguenti dichiarazioni del tipo di documento nei loro documenti. Le DTD variano negli elementi che implementano.

L'URI in ogni dichiarazione del tipo di documento consente agli interpreti HTML di prelevare la DTD ed ogni insieme di entità che è richiesto. I seguenti URI si riferiscono a DTD e all'insieme di entità per 'HTML 4.0 che il W3C sostiene:

Il legame tra gli identificatori pubblici ed i file può essere specificato impiegando un file di catalogo che segue il formato raccomandato dal SGML Open Consortium (si consulti [SGMLOPEN]). Un esempio di un file di catalogo per l'HTML 4.0 è incluso all'inizio della sezione sulle informazioni di riferimento sullo SGML per l'HTML. Le ultime due lettere della dichiarazione indicano la lingua della DTD. Per l'HTML, questo è sempre l'inglese (English) ("EN").

7.3 L'elemento HTML


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

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

Tag iniziale: facoltativo, Tag finale: facoltativo

Definizioni degli attributi

version = cdata [CN]
Disapprovato. Il valore di questo attributo specifica quale versione della DTD dell'HTML governa il documento. Questo attributo è stato disapprovato perché è ridondante con l'informazione sulla versione fornita dalla dichiarazione del tipo di documento.

Attributi definiti altrove

Dopo la dichiarazione del tipo di documento, il resto di un documento HTML è contenuto all'interno dell'elemento HTML. Così, un tipico documento HTML ha questa struttura:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40/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 prima 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 di nomi delle meta-info --
  >

Tag iniziale: facoltativo, Tag finale: facoltativo

Definizioni degli attributi

profile = uri [CT]
Questo attributo specifica la locazione di uno o più profili sulle metainformazioni, separati da spazi bianchi. Per future estensioni, gli interpreti HTML dovrebbero considerare il valore come una lista anche se questa specifica considera solo il primo URI come significativo. I profili sono discussi in seguito nei metadati.

Attributi definiti altrove

L'elemento HEAD contiene informazioni circa il documento corrente, quali il titolo dello stesso, parole chiave che possono essere utili ai motori di ricerca, ed altre informazioni che non sono considerate come contenuto del documento. Gli interpreti HTML generalmente non mostrano gli elementi che appaiono nella HEAD come contenuto. Essi possono, comunque, rendere disponibili agli utenti attraverso altri meccanismi le informazioni nella HEAD.

7.4.2 L'elemento TITLE


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

Tag iniziale: richiesto, Tag finale: richiesto

Attributi definiti altrove

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

Gli autori dovrebbero usare l'elemento TITLE per identificare il contenuto di un documento. Poiché gli utenti spesso consultano documenti fuori argomento, gli autori dovrebbero fornire titoli ricchi di significato. Così, invece di un titolo quale "Introduzione", che non fornisce molta conoscenza del contesto, gli autori dovrebbero invece fornire un titolo quale "Introduzione sull'apicoltura medievale".

Per ragioni di accessibilità, gli interpreti HTML devono sempre rendere il contenuto dell'elemento TITLE disponibile agli utenti (inclusi gli elementi TITLE che capitano nei frame). Il meccanismo per fare ciò dipende dall'interprete HTML (ad es., come una didascalia, parlato).

I titoli possono contenere entità carattere (per caratteri accentati, caratteri speciali, ecc.), ma non possono contenere altri marcatori. Ecco un esempio di un titolo di documento:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<HTML>
<HEAD>
<TITLE>Uno studio delle dinamiche della popolazione</TITLE>
... altri elementi dell'intestazione...
</HEAD>
<BODY>
... corpo del documento...
</BODY>
</HTML>

7.4.3 L'attributo title

Definizioni degli attributi

title = text [CS]
Questo attributo offre informazioni preliminari circa l'elemento per il quale è fissato.

Al contrario dell'elemento TITLE, che fornisce informazioni circa un intero documento e può apparire solo una volta, l'attributo title può annotare qualsiasi numero di elementi. Si prega di consultare la definizione di un elemento per verificare se consente questo attributo.

I valori dell'attributo title possono essere resi dagli interpreti HTML in parecchie maniere. Per esempio, gli interpreti visuali frequentemente mostrano il title come un "tooltip" (o noticina, un breve messaggio che appare quando il puntatore si ferma su un oggetto). Gli interpreti vocali possono pronunciare l'informazione title in un contesto simile. Per esempio, impostare l'attributo in un collegamento consente agli interpreti HTML (visuali e non visuali) di riferire agli utenti la natura della risorsa collegata:


...del testo...
Ecco una foto
<A href="http://qualcheposto.it/robacarina.gif" title="una mia immersione con autorespiratore">
</A>
...ancora del testo...

L'attributo title ha un addizionale ruolo quando è usato congiuntamente all'elemento LINK per designare un foglio di stile esterno. Si prega di consultare il paragrafo sui collegamenti ed i fogli di stile per i dettagli.

Nota. Per migliorare la qualità della sintesi vocale per i casi gestiti poveramente dalle tecniche standard, le future versioni dell'HTML potranno includere un attributo per codificare l'informazione fonemica e prosodica.

7.4.4 I metadati

Durante la stesura di questa specifica, è in corso il lavoro che consentirà agli autori di assegnare più ricche informazioni "leggibili da macchine" riguardanti i documenti HTML e le altre risorse accessibili tramite la rete. IL W3C Linguaggio di Descrizione delle Risorse (consultare [RDF]) è in sviluppo come struttura comune per i metadati.

L'HTML lascia specificare agli autori i metadati -- informazioni circa il documento piuttosto che sul contenuto del documento -- in vari 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à (qui "Author") e assegna un valore ad essa (qui "Dave Raggett").

Questa specifica non definisce un insieme di proprietà legali dei metadati. Il significato di una proprietà e l'insieme di valori legali per quella proprietà dovrebbero essere definiti in un dizionario di riferimento chiamato profilo. Per esempio, un profilo progettato per aiutare i motori di ricerca a catalogare i documenti potrebbe definire proprietà quali "author", "copyright", "keywords", ecc.

Specificare i metadati  

In generale, specificare i metadati implica due fasi:

  1. Dichiarare una proprietà ed un valore per quella proprietà. Ciò può essere fatto in due modi:
    1. Dall'interno di un documento, mediante l'elemento META.
    2. Dall'esterno di un documento, collegando i metadati mediante l'elemento LINK (consultare il paragrafo sui tipi di collegamento).
  2. Riferendosi ad un profilo nel quale è definita la proprietà ed i suoi valori legali. Per designare un profilo, usate l'attributo profile dell'elemento HEAD.

Notate che poiché un profilo è definito per l'elemento HEAD, lo stesso profilo si applica a tutti gli elementi META e LINK nell'intestazione del documento.

Non è richiesto che gli interpreti HTML implementino i meccanismi dei metadati. Per quelli che scelgono di implementare i metadati, questa specifica non definisce come i metadati debbano essere interpretati.

L'elemento META 


<!ELEMENT META - O EMPTY               -- metainformazione generica -->
<!ATTLIST META
  %i18n;                               -- lang, dir, per uso con contenuto --
  http-equiv  NAME           #IMPLIED  -- nome d'intestazione della risposta HTTP --
  name        NAME           #IMPLIED  -- nome della metainformazione --
  content     CDATA          #REQUIRED -- informazione associata --
  scheme      CDATA          #IMPLIED  -- seleziona la forma del contenuto --
  >

Tag iniziale: richiesto, Tag finale: proibito

Definizioni degli attributi

Per i seguenti attributi, i valori consentiti e le loro interpretazioni sono dipendenti dal profile:

name = name [CS]
Questo attributo identifica un nome di una proprietà. Questa specifica non elenca valori legali per questo attributo.
content = cdata [CS]
Questo attributo specifica un valore della proprietà. Questa specifica non elenca valori legali per questo attributo.
scheme = cdata [CS]
Questo attributo nomina uno schema da usare per interpretare il valore della proprietà (consultare il paragrafo su profile per i dettagli).
http-equiv = name [CI]
Questo attributo può essere usato in luogo dell'attributo name. I server HTTP usano questo attributo per ottenere informazioni sulle intestazioni dei messaggi HTTP di risposta.

Attributi definiti altrove

L'elemento META può essere usato per identificare le proprietà di un documento (ad es. autore, data di scadenza, lista di parole chiave, ecc.) ed assegna valori a queste proprietà. Questa specifica non definisce 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 il linguaggio per il valore dell'attributo content. Ciò consente ai sintetizzatori vocali di applicare le regole di pronuncia dipendenti dalla lingua.

In questo esempio, si dichiara che il nome dell'autore sia francese:


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

Nota. L'elemento META è un meccanismo generico per specificare metadati. Comunque, Alcuni elementi ed attributi dell'HTML già gestiscono certe porzioni di metadati e possono essere usati dagli autori in luogo di META per specificare questi pezzi: l'elemento TITLE, l'elemento ADDRESS, gli elementi INS e DEL, l'attributo title, e l'attributo cite.

Nota. Quando una proprietà specificata dall'elemento META assume un valore che sia un URI, alcuni autori preferiscono specificare il metadato mediante l'elemento LINK. Di conseguenza, la seguente dichiarazione di metadato:


<META name="DC.identifier"
      content="ftp://ds.internic.net/rfc/rfc1866.txt">

può anche essere trascritta:


<LINK rel="DC.identifier"
         type="text/plain"
         href="ftp://ds.internic.net/rfc/rfc1866.txt">

META e le intestazioni dell'HTTP

L'attributo http-equiv può essere usato in luogo dell'attributo name ed ha un significato speciale quando i documenti sono prelevati mediante il Protocollo di Trasferimento dell'Ipertesto (o "Hypertext Transfer Protocol" o "HTTP"). I server HTTP possono usare i nomi delle proprietà specificate dall'attributo http-equiv per creare una intestazione nella risposta dell'HTTP rispettando lo stile della [RFC822]. Si prega di consultare la specifica dell'HTTP ([RFC2068]) per i dettagli su una valida intestazione dell'HTTP.

Il seguente esempio di dichiarazione META:


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

avrà come risultato l'intestazione dell'HTTP:

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

Questa potrà essere usata dalle cache per determinare quando prelevare una nuova copia del documento associato.

Alcuni interpreti consentono l'uso di META per aggiornare la pagina corrente dopo un determinato numero di secondi, con la possibilità di sostituirla con un differente URI.


<META http-equiv="refresh" content="3,http://www.acme.com/intro.html">

Il contenuto è un numero che specifica i secondi di ritardo, seguito dall'URI da caricare quando il tempo è trascorso. Questo meccanismo generalmente è usato per mostare fugacemente agli utenti le pagine d'introduzione. Comunque, poiché alcuni interpreti HTML non implementano questo meccanismo, gli autori dovrebbero includere del contenuto nella pagina d'introduzione per consentire agli utenti di navigare lontano da lì (così non restano "arenati" nella pagina d'introduzione).

META ed i motori di ricerca

Un impego comune di META è quello di specificare le parole chiave che un motore di ricerca può usare per migliorare la qualità dei risultati di ricerca. Quando più elementi META forniscono su un documento informazioni dipendenti dalla lingua, i motori di ricerca possono filtrare basandosi sull'attributo lang per mostrare i risultati della ricerca usando le preferenze dell'utente sulla lingua. Per esempio,


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

L'efficienza dei motori di ricerca può anche essere aumentata usando l'elemento LINK per specificare collegamenti a traduzioni del documento in altre lingue, collegamenti a versioni del documenti in altro formato (ad es. PDF), e, quando il documento è parte di una raccolta, collegamenti ad un appropriato punto di inizio per visionare la raccolta.

Ulteriore aiuto è fornito nella sezione su come aiutare i motori di ricerca ad indicizzare il vostro sito Web.

META e PICS
La Piattaforma per la Selezione del Contenuto in Internet (PICS, specificata in [PICS]) è una infrastruttura per associare etichette (metadati) a dei contenuti in internet. Progettata in origine per aiutare i genitori ed i docenti a controllare ciò a cui i bambini hanno accesso in Internet, facilita anche altri impieghi per le etichette, inclusa l'autentificazione del codice, privacy, e la gestione del diritto di proprietà.

Questo esempio illustra come si possa 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 e le informazioni predefinite

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

Il seguente esempio specifica la codifica dei caratteri per un documento come ISO-8859-5


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

I profili dei metadati 

L'attributo profile dell'elemento HEAD specifica la locazione di un profilo sui metadati. Il valore dell'attributo profile è un URI. Gli interpreti HTML possono usare questo URI in due modi:

Questo esempio si riferisce ad un ipotetico profilo che definisce proprietà utili per l'indicizzazione dei documenti. I valori delle proprietà definite da questo profilo -- incluse "author", "copyright", "keywords", e "date" -- sono impostate da dichiarazioni META successive.


 <HEAD profile="http://www.azienda.com/profili/nucleo">
  <TITLE>Come completare le copertine dei Promemoria</TITLE>
  <META name="author" content="Mario Rossi">
  <META name="copyright" content="&copy; 1997 Acme Corp.">
  <META name="keywords" content="societario,linee guida,catalogazione">
  <META name="date" content="1994-11-06T08:49:37+00:00">
 </HEAD>

Mentre questa specifica è scritta, è pratica comune usare i formati di datazione descritti in [RFC2068], sezione 3.3. Siccome questi formati sono relativamente difficili da gestire, consigliamo che gli autori usino il formato di datazione [ISO8601]. Per ulteriori informazioni, consultare i paragrafi sugli elementi INS e DEL.

Gli attributi scheme consentono agli autori di fornire agli interpreti HTML un contesto più ampio per l'interpretazione corretta dei metadati. A volte, questi metadati addizionali possono essere critici, come quando i metadati possono essere specificati in differenti formati. Per esempio, un autore potrebbe specificare la data nell'(ambiguo) formato "10-9-97"; ciò significa 9 ottobre 1997 o 10 settembre 1997? Il valore dell'attributo scheme "Month-Date-Year" renderebbe chiaro questo valore della data.

Altre volte, l'attributo scheme può fornire informazioni utili ma non rilevanti agli interpreti HTML.

Per esempio, la seguente dichiarazione scheme può aiutare un interprete HTML a determinare che il valore della propietà "identifier" è un numero di codice ISBN:


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

Valori per l'attributo scheme dipendono dalla proprietà name e l'associato profile.

Nota. Un profilo di esempio è il Dublin Core (vedere [DCORE]). Questo profilo definisce un insieme di proprietà consigliate per le descrizioni bibliografiche in formato elettronico, ed ha lo scopo di promuovere l'interoperabilità tra disparati modelli di descrizione.

7.5 Il corpo del documento

7.5.1L'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 --
  >

Tag iniziale: facoltativo, Tag finale: facoltativo

Definizioni degli attributi

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

Attributi definiti altrove

Il corpo di un documento contiene il contenuto del documento. Il contenuto può essere reso da un interprete HTML in una varietà di modi. Per esempio, per i browser visuali, potete pensare al corpo come una tela dove appare il contenuto: testo, immagini, colori, grafici, ecc. Per i browser vocali, lo stesso contenuto può essere letto. Poiché i fogli di stile sono adesso la maniera preferita di specificare la rappresentazione di un documento, gli attributi di rappresentazione di BODY sono stati disapprovati.

ESEMPIO DISAPPROVATO:
I seguenti frammenti HTML illustrano l'impiego degli attributi disapprovati. Imposta il colore dello sfondo della tela come bianco, il colore di primo piano del testo come nero ed il colore dei collegamenti ipertestuali come rosso all'inizio, fucsia quando attivati, e marroni quando visitati.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
   "http://www.w3.org/TR/REC-html40/loose.dtd">
<HTML>
<HEAD>
 <TITLE>Uno studio sulle dinamiche 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, lo stesso effetto potrebbe essere ottenuto come segue:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<HTML>
<HEAD>
 <TITLE>Uno studio sulle dinamiche 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>

Usando i fogli di stile esterni (collegati) si ha la flessibilità di cambiare la resa senza revisionare il documento HTML sorgente:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<HTML>
<HEAD>
 <TITLE>Uno studio sulle dinamiche della popolazione</TITLE>
 <LINK rel="stylesheet" type="text/css" href="smartstyle.css">
</HEAD>
<BODY>
  ... corpo del documento...
</BODY>
</HTML>

Insieme di frame e corpi di documento HTML. I documenti che contengono un insieme di frame sostituiscono l'elemento BODY mediante l'elemento FRAMESET. Si prega di consultare il paragrafo sui frame per ulteriori informazioni.

7.5.2 Gli identificatori degli elementi: gli attributi id e class

Definizioni degli attributi

id = name [CS]
Questo attributo assegna un nome ad un elemento. Questo nome deve essere univoco nel documento.
class = cdata-list [CS]
Questo attributo assegna il nome di una classe oppure un insieme di nomi di classi ad un elemento. Lo stesso o gli stessi nomi di classi possono essere assegnati a qualsiasi numero di elementi. Più nomi di classi devono essere separati da caratteri di spazio bianco.
L'attributo id assegna un unico identificatore ad un elemento (che può essere verificato da un parser SGML ). Per esempio, i seguenti paragrafi sono distiniti mediante i loro valori id:


<P id="myparagraph"> Questo è un paragrafo definito univocamente.</P>
<P id="yourparagraph"> Anche questo è un paragrafo definito univocamente.</P>

L'attributo id svolge vari ruoli nell'HTML:

L'attributo class, d'altra parte, assegna una o più nomi di classi ad un elemento; l'elemento può essere considerato come appartenente a queste classi. Un nome di una classe può essere condiviso da più istanze d'elemento. L'attributo class ha vari ruoli nell'HTML:

Nel seguente esempio, l'elemento SPAN è usato insieme agli attributi id e class per definire i messaggi del documento. I messaggi appaiono in entrambe le versioni inglese e francese.


<!-- Messaggi inglesi -->
<P><SPAN id="msg1" class="info" lang="en">Variable declared twice</SPAN>
<P><SPAN id="msg2" class="warning" lang="en">Undeclared variable</SPAN>
<P><SPAN id="msg3" class="error" lang="en">Bad syntax for variable name</SPAN>


<!-- Messaggi francesi -->
<P><SPAN id="msg1" class="info" lang="fr">Variable d&eacute;clar&eacute;e deux fois</SPAN>
<P><SPAN id="msg2" class="warning" lang="fr">Variable ind&eacute;finie</SPAN>
<P><SPAN id="msg3" class="error" lang="fr">Erreur de syntaxe pour variable</SPAN>

Le seguenti regole di stile CSS comunicherebbero ai browser visuali di mostrare i messaggi d'informazione in verde, i messaggi d'avvertimento in giallo, ed i messaggi d'errore in rosso:


SPAN.info    { color: green }
SPAN.warning { color: yellow }
SPAN.error   { color: red }

Notate che il messaggio francese "msg1" e quello inglese "msg1" possono non apparire nello stesso documento siccome condividono lo stesso valore id. Gli autori possono usare ulteriormente l'attributo id per rifinire la rappresentazione dei messaggi individuali, renderli riferimenti di destinazione, ecc.

Possono essere assegnate informazioni degli identificatori e delle classi a quasi ogni elemento HTML.

Supponete, per esempio, che stiamo scrivendo un documento riguardante un linguaggio di programmazione. Il documento deve includere un certo numero di esempi preimpostati. Noi usiamo l'elemento PRE per comporre gli esempi. Noi assegnamo anche un colore di sfondo (verde) a tutte le instanze dell'elemento PRE appartenente 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">
...codice di esempio qui...
</PRE>
</BODY>

Impostando l'attributo id per questo esempio, possiamo (1) creare un collegamento ipertestuale ad esso e (2) sostituire le informazioni sullo stile della classe con le informazioni sullo stile dell'istanza.

Nota. L'attributo id condivide lo stesso intervallo di nomi dell'attributo name quando usato per i nomi dei riferimenti. Si prega di consultare la sezione sui riferimenti con id per ulteriori informazioni.

7.5.3 Gli elementi a livello blocco e in linea

Certi elementi HTML che possono apparire nel BODY sono detti essere "a livello blocco" (block-level) mentre altri sono "in linea" (inline) - conosciuti anche come "a livello testo" (text level). La distinzione è fondata su varie nozioni:

Modello di contenuto
Generalmente, gli elementi a livello blocco possono contenere elementi in linea ed altri elementi a livello blocco. Generalmente, gli elementi in linea possono contenere solamente dati ed altri elementi in linea. Inerente a questa distinzione strutturale è l'idea che gli elementi a blocco creino strutture "più larghe" che gli elementi in linea.
Impostazione
Per scelta predefinita, gli elementi a livello blocco sono impostati differentemente dagli elementi in linea. Generalmente, gli elementi a livello blocco iniziano su nuove righe, gli elementi in linea no. Per informazioni circa gli spazi bianchi, interruzioni di riga, e impostazione dei blocchi, si prega di consultare il paragrafo sul testo.
Direzione
Per ragioni tecniche riguardanti l'algoritmo per il testo bidirezionale [UNICODE], gli elementi a livello blocco e in linea differiscono nella maniera in cui ereditano le informazioni sulla direzione. Per dettagli, si prega di consultare il paragrafo sull'ereditarierà della direzione del testo.

I fogli di stile forniscono la maniera di specificare la visualizzazione di elementi arbitrari, incluso se un elemento è reso come blocco oppure in linea. In alcuni casi, quali un foglio di stile in linea per le liste di elementi, ciò potrebbe essere appropriato, ma generalmente parlando, gli autori sono scoraggiati dallo scavalcare l'interpretazione convenzionale degli elementi HTML in questo modo.

L'alterazione degli idiomi di presentazione tradizionali per gli elementi a livello blocco e in linea ha anche un impatto sull'algoritmo per il testo bidirezionale. Consultare il paragrafo sugli effetti dei fogli di stile sulla direzione per ulteriori informazioni.

7.5.4 Gli elementi di raggruppamento: gli elementi DIV e SPAN


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

Tag iniziale: richiesto, Tag finale: richiesto

Attributi definiti altrove

Gli elementi DIV e SPAN, insieme agli attributi id and class, offrono un meccanismo generico per strutturare i documenti. Questi elementi definiscono il contenuto come in linea (SPAN) o a livello blocco (DIV) ma non impongono altri idiomi di rappresentazione sul contenuto. Così, gli autori possono usare questi elementi congiuntamente ai fogli di stile, all'attributo lang, etc., per conformare l'HTML ai propri bisogni e gusti.

Supponete, per esempio, che vogliamo generare un documento HTML basato su un database di informazioni sui clienti. Poiché l'HTML non include elementi che identifichino oggetti quali "cliente", "numero telefonico", "indirizzo e-mail", ecc., usiamo DIV e SPAN per ottenere gli effetti strutturali e di presentazione desiderati. Noi potremmo usare l'elemento TABLE come segue per strutturare l'informazione:


<!-- Esempio di dati dal database sui clienti: -->
<!-- Nome: Stephane Boyera, Tel: (212) 555-1212, Email: ql@tipo.org -->

<DIV id="client-boyera" class="client">
<P><SPAN class="client-title">Informazioni sul cliente:</SPAN>
<TABLE class="client-data">
<TR><TH>Cognome:<TD>Boyera</TR>
<TR><TH>Nome:<TD>Stephane</TR>
<TR><TH>Tel:<TD>(212) 555-1212</TR>
<TR><TH>Email:<TD>sb@foo.org</TR>
</TABLE>
</DIV>

<DIV id="client-lafon" class="client">
<P><SPAN class="client-title">Informazioni sul cliente:</SPAN>
<TABLE class="client-data">
<TR><TH>Cognome:<TD>Lafon</TR>
<TR><TH>Nome:<TD>Yves</TR>
<TR><TH>Tel:<TD>(617) 555-1212</TR>
<TR><TH>Email:<TD>yves@cucu.com</TR>
</TABLE>
</DIV>

In seguito, potremmo facilmente aggiungere una dichiarazione per foglio di stile per rifinire la presentazione di questi elementi del database.

Per un altro esempio d'uso, si prega di consultare l'esempio nel paragrafo sugli attributi class e id.

I browser visuali generalmente inseriscono un'interruzione di riga prima e dopo gli elementi DIV, per esempio:


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

che è tipicamente visualizzato come:


aaaaaaaaa
bbbbbbbbb
ccccc

ccccc

7.5.5 Le titolazioni: gli elementi H1, H2, H3, H4, H5, H6


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

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

Tag iniziale: richiesto, Tag finale: richiesto

Attributi definiti altrove

Un elemento di titolazione descrive brevemente l'argomento della sezione che introduce. Le informazioni sulle intestazioni può essere usata dagli interpreti HTML, per esempio, per costruire automaticamente una tabella dei contenuti per un documento.

Ci sono sei livelli di titolazione nell'HTML con H1 di maggiore importanza e H6 di minore. I browser visuali generalmente visualizzano le intestazioni più importanti medianti caratteri più grandi di quelle meno importanti.

Il seguente esempio mostra come usare l'elemento DIV per associare un'intestazione con il paragrafo del documento che lo segue. Fare così vi consente di definire uno stile per il paragrafo (colorare lo sfondo, impostare il carattere, ecc.) con i fogli di stile.


<DIV class="section" id="forest-elephants" >
<H1>Gli elefanti di foresta</H1>
<P>in questo paragrafo, noi discutiamo i meno conosciuti elefanti di foresta.
...questo paragrafo continua...
<DIV class="subsection" id="forest-habitat" >
<H2>Habitat</H2>
<P>Gli elefanti di foresta non vivono negli alberi ma tra questi.
...questo sottoparagrafo continua...
</DIV>
</DIV>

Questa struttura può essere decorata con informazioni sullo stile come:


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

Sezioni numerate e riferimenti
L'HTML non permette che i numeri delle sezioni vengano generati dalle titolazioni. Comunque questa agevolazione può essere offerta dagli interpreti HTML. Presto, i linguaggi per fogli di stile quali CSS consentiranno agli autori di controllare la generazione dei numeri di sezione (utile per i rimandi nei documenti stampati, come in "Consulta il paragrafo 7.2").

Alcune persone considerano che saltare i livelli di titolazione sia una cattiva pratica. Essi accettano H1 H2 H1 mentre non accettano H1 H3 H1 poiché il livello di titolazione H2 è saltato.

7.5.6 L'elemento ADDRESS


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

Tag iniziale: richiesto, Tag finale: richiesto

Attributi definiti altrove

L'elemento ADDRESS può essere usato dagli autori per fornire informazioni su chi contattare riguardo il documento oppure una parte rilevante del documento quale un modulo. Questo elemento spesso appare all'inizio o alla fine di un documento.

Per esempio, una pagina del sito web del W3C riguardante l'HTML potrebbe includere la seguente informazione su chi contattare:


<ADDRESS>
<A href="../People/Raggett/">Dave Raggett</A>, 
   <A href="../People/Arnaud/">Arnaud Le Hors</A>, 
persone da contattare riguardo l'<A href="Activity">Attivit&agrave; del W3C sull'HTML</A><BR> 
$Date: 1998/04/02 00:20:03 $
</ADDRESS>