HyperText Markup Language (HTML)Daniele Fusi – bozza cap. 3 (HTML) 1 HyperText Markup Language...
Transcript of HyperText Markup Language (HTML)Daniele Fusi – bozza cap. 3 (HTML) 1 HyperText Markup Language...
Daniele Fusi – bozza cap. 3 (HTML)
1
HyperText Markup Language (HTML)
Web e ipertesti
Il web è un sistema distruibuito di ipertesti1 grafici globale, interattivo e multipiattaforma che opera su
internet, la rete mondiale di computer; sin dalla comparsa del primo browser web (il tipo di programmi usato
per navigare su web) grafico (Mosaic), la navigazione web non avviene più tramite complessi programmi a
linea di comando, ma si avvale di un’interfaccia grafica intuitiva e sempre più ricca di funzionalità.
Data la sua vocazione globale il web è essenzialmente multipiattaforma, cioè accessibile da qualsiasi
sistema, da un tradizionale computer desktop (quale che sia il suo sistema operativo: Windows, Mac, Linux,
etc.) a portatili, tablet, smartphone, e molto altro. Si tratta di un sistema distribuito su milioni di siti, ospitati
su computer operanti come web server.
Essenzialmente un web server è un computer che risponde alle richieste dei web browser, i programmi di
navigazione che girano nei dispositivi di chi naviga su web (come Chrome, Firefox, Edge, Safari, etc.), che
operano quindi nel ruolo complementare a quello del server, chiamato client: il client effettua una richiesta,
e il server risponde. Quando l’utente di un web browser richiede di visualizzare una pagina di un sito, dotata
di un suo indirizzo (URL2) all’interno del web, il browser si connette al server che lo ospita, che una volta
accettata la connessione invia la sua risposta, spesso sottoforma di un ipertesto HTML. Tradizionalmente,
l’insieme delle pagine correlate servite da uno (o talora più) di questi server costituisce un sito web.
HyperText Transfer Protocol (HTTP)
Il principale protocollo di comunicazione usato nel web è HTTP (HyperText Transfer Protocol), tramite il
quale vengono trasmesse le pagine web di un sito con tutti i loro contenuti (ad es. immagini, video, etc.),
denominati genericamente risorse. Quando si visita un sito web si stabilisce una comunicazione fra due
computer, che agiscono da client e server: il primo rappresenta il computer del visitatore, che effettua
(tramite il web browser) delle richieste al secondo, che ospita il sito web. Il server genera la propria risposta,
la rispedisce al client, e chiude la comunicazione: il protocollo HTTP infatti in sé è eminentemente privo di
stato (stateless), nel senso che non mantiene alcuna informazione relativa alla connessione fra i due
computer. HTTP non è cioè concepito per "ricordare" ogni richiesta ricevuta associandola a uno specifico
client, ma solo per rispondere indifferentemente a tutte le richieste, senza preoccuparsi di quelle ricevute in
precedenza. Per fare un esempio banale, è come se in un dialogo la persona cui ci si rivolge dimenticasse
dopo ogni sua risposta il proprio interlocutore e tutta la conversazione intrattenuta fino a quel momento. Ci
sono però varie tecnologie software utilizzate dai server per dare all'utente di un sito l'impressione di un
dialogo continuo, dove ogni sua azione e richiesta modifica il tipo di risposta inviata; queste tecnologie
comunque non riguardano il protocollo di comunicazione HTTP in sé, che è semplicemente un modo di
scambiare risorse (identificate da un URL) fra due computer collegati in rete.
Le richieste e le relative risposte in questo dialogo sono espresse con messaggi in forma testuale, secondo
la sintassi del protocollo HTTP: in termini assai generali, questa prevede una riga iniziale di testo, specifica a
1 Un ipertesto consente di leggere un testo in modo non lineare, ma saltando di volta in volta al punto di proprio inte-resse tramite l’uso di collegamenti (link). 2 URL sta per Uniform Resource Locator e rappresenta un indirizzo a una qualsiasi risorsa pubblicata su web; esso inizia con l’indicazione del protocollo di comunicazione da utilizzare (ad es. HTTP per recuperare una pagina HTML, o FTP per scaricare un file), e prosegue specificando il nome del dominio che ospita la risorsa desiderata (ad es. www.fusisoft.it) e di norma la collocazione della risorsa all’interno del dominio.
Daniele Fusi – bozza cap. 3 (HTML)
2
seconda del tipo di richiesta o risposta3, seguita eventualmente da varie righe di intestazione ciascuna con
una coppia nome: valore, e da una riga vuota cui segue il corpo della risposta (ad es. il codice HTML
rappresentante la pagina del sito richiesta). Ad esempio, la richiesta generata dal browser del computer client
quando si digita l'indirizzo web di un sito come http://www.microsoft.com è simile a questa:
GET http://www.microsoft.com/ HTTP/1.1 Accept: text/html, application/xhtml+xml, */*
Accept-Language: en-US
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36
(KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36
Accept: image/webp,image/*,*/*;q=0.8
Accept-Encoding: gzip, deflate
Connection: Keep-Alive
Host: www.microsoft.com
esempio di una richiesta HTTP da parte del computer client
Nella richiesta viene fra l'altro specificato il formato digitale accettato dal browser in risposta (Accept: qui
anzitutto un testo contenente codice HTML che rappresenta la pagina web) e la lingua preferita (Accept-
Language), il tipo di browser utilizzato (User-Agent), etc.
A questa richiesta il server risponde inviando a sua volta un testo simile a:
HTTP/1.1 200 OK
Cache-Control: public
Content-Type: text/html; charset=utf-8
Expires: Sun, 20 Feb 2011 14:37:40 GMT
Last-Modified: Mon, 14 Feb 2011 08:00:58 GMT
ETag: 634332384580000000
Vary: Accept-Encoding
Server: Microsoft-IIS/7.5
X-AspNet-Version: 4.0.30319
VTag: 279204714500000000
X-Powered-By: ASP.NET
Date: Sun, 20 Feb 2011 14:27:40 GMT
Content-Length: 74447
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en">
3 La prima riga di una richiesta si articola in tre parti separate da spazio: un "metodo" (ad es. GET, che indica la richiesta di ricevere una risorsa), l'indirizzo della risorsa oggetto della richiesta (ad es. l'indirizzo di una pagina web), e la versione del protocollo HTTP utilizzata. Nell'esempio citato sotto, la prima riga del messaggio di richiesta inviato dal computer client è appunto GET http://www.microsoft.com/en/us/default.aspx HTTP/1.1, dove GET è il
metodo, http://...default.aspx l'indirizzo della pagina richiesta, e HTTP/1.1 identifica la versione 1.1 del
protocollo HTTP. Un metodo molto simile è ad esempio HEAD, che limita la richiesta alla sola intestazione, evitando di ricevere anche tutto il corpo della risposta contenente la risorsa richiesta, e viene tipicamente usato per esaminarne le caratteristiche senza effettivamente scaricarla, a vantaggio della velocità dell'operazione; un altro metodo di largo impiego è poi POST, utilizzato per inviare dati su cui il server deve operare in qualche modo, ad esempio quando si riempiono i campi di un modulo digitale all'interno di una pagina e si inviano poi al server. Parallelamente a quanto visto per la richiesta, la prima riga di una risposta si articola in versione del protocollo, un codice numerico indicante il tipo di risposta (status code, destinato a essere interpretato dal browser), e una sua descrizione verbale (reason, in inglese, destinata alla lettura da parte di eventuali operatori umani): nell'esempio citato si trova appunto HTTP/1.1 200 OK,
dove la versione di HTTP è 1.1, il codice di risposta 200, e la sua descrizione verbale OK. Quando ad esempio la pagina web richiesta non viene trovata (perché magari il suo indirizzo è stato digitato in modo scorretto, o la pagina è stata spostata o rinominata sul server) la prima riga della risposta sarà invece HTTP/1.1 404 Not Found, dove 404 è il
codice numerico associato a questo errore e Not Found la sua descrizione. Il codice numerico è un numero intero a tre cifre, di cui la prima indica la categoria: 1 corrisponde a un messaggio puramente informativo, 2 (come in 200) il successo dell'operazione, 3 il fatto che il client è stato rinviato a un altro indirizzo (ad es. perché il sito è stato spostato), e 4 e 5 indicano un errore rispettivamente da parte del client o del server (come in 404 la mancanza della risorsa richiesta dal client).
Daniele Fusi – bozza cap. 3 (HTML)
3
<head>
<title>Microsoft Corporation</title>
...
</head>
<body>...</body>
</html>
esempio di una risposta HTTP da parte del computer server
In questo testo si trovano una serie di dati relativi alla risposta generata dal server (il numero di stato del
server 200, indicante che la pagina richiesta è stata correttamente trovata e seguirà nella trasmissione, il
formato della pagina e la codifica testuale da essa utilizzata — Content-Type4: qui HTML codificato in
Unicode serializzato in UTF-8 —, il software utilizzato dal server — Server: qui Microsoft-IIS nella sua
versione 7.5 — e la data e l'ora in esso impostati, la lunghezza della pagina trasmessa, etc.), seguiti dal codice
HTML che rappresenta la homepage del sito richiesto.
Il protocollo HTTP costituisce quindi un modo standard in cui i computer possono comunicare fra loro,
scambiandosi messaggi testuali codificati secondo le precise convenzioni da esso definite e correttamente
implementate dai browser internet.
HTML
La funzione essenziale svolta fin dalle origini dal web browser è recuperare un documento ipertestuale (di
norma tramite una richiesta a un server) e visualizzarlo per l’utente, interpretando il linguaggio creato per
definire gli ipertesti del web, HTML.
HTML è l’acronimo di HyperText Markup Language, un linguaggio di marcatura per pagine web derivato
dal più generico (e complesso) SGML (Standard Generalized Markup Language), che sta alla base della mag-
gioranza dei linguaggi di marcatura usati per definire struttura e formato di documenti per la stampa e per il
web.
Marcatura
Le tecnologie di marcatura derivano dall’industria editoriale: in origine la marcatura (markup) non era
altro che una serie di annotazioni apposte in margine al manoscritto dell’autore, per indicare al tipografo
come impaginarlo.
In ambito informatico, una forma di marcatura familiare a ogni utente di computer è ad esempio la
marcatura procedurale (procedural markup), dove l’autore formatta il suo testo in un programma di
videoscrittura utilizzando vari comandi (come grassetto, corsivo, tipo e dimensioni di carattere, colore, etc.).
In tal caso l’autore analizza implicitamente la struttura del suo documento e in base ad essa decide come
formattarne ogni parte (altro sarà un titolo, altro un paragrafo, etc.). Tutte queste informazioni tipografiche
rappresentano appunto la marcatura del documento, e sono memorizzate in un qualche formato digitale di
rich text: un esempio di questo formato è appunto RTF5, che costituisce quindi una marcatura procedurale
del testo, cui sono inframmezzati innumerevoli comandi di formattazione inizianti per alcuni caratteri
riservati (come backslash o parentesi graffe: ad esempio \b indica grassetto, \i corsivo, \fs24 corpo 12
punti per il carattere, etc.). Questo tipo di marcatura ha il suo principale limite nella sua stessa natura più
4 Content-Type è uno dei componenti più importanti di un’intestazione HTTP e specifica il cosiddetto tipo MIME,
cioè in pratica il formato digitale della risorsa trasmessa, come ad esempio HTML (text/html), XHTML
(application/xhtml+xml), CSS (text/css), JPEG (image/jpeg), etc. L’acronimo sta per Multimedia Internet Mail Extensions, in quanto si tratta di una convenzione definita in origine per gli allegati dei messaggi di posta elet-tronica. La funzione di questa indicazione dunque è simile a quella dell’estensione di un file (.doc, .txt, .jpg, etc.) nei sistemi operativi Windows, senza la quale il software non saprebbe come interpretare la sequenza di bit trattata. 5 Su RTF si veda il capitolo dedicato alle codifiche testuali.
Daniele Fusi – bozza cap. 3 (HTML)
4
formale che strutturale: si tratta infatti di una serie di comandi che indicano minutamente ogni aspetto della
veste tipografica del documento, e in quanto tali non ne definiscono la struttura (anche se ne sono una
conseguenza), né sono scalabili nella misura in cui ogni cambiamento alle convenzioni di formattazione
implica una modifica manuale dell’intero documento.
Questo tipo di marcatura procedurale ha subito un’evoluzione in senso più astratto sostituendo ai singoli
specifici comandi di formattazione delle procedure esterne (macro), variamente implementate da diversi
software; non si tratta ancora di una marcatura puramente strutturale, perché le macro si riferiscono sempre
a nozioni tipografiche, ma è un passo in quella direzione in virtù della loro maggiore genericità e della
possibilità di essere implementate in modi diversi a seconda delle esigenze, lasciando inalterato il documento
originale. Un celebre esponente di questo tipo di marcatura è TeX,6 utilizzato specie per testi di carattere
scientifico, dotato di una sintassi simile a quella di RTF; ad esempio, in TeX per lasciare un certo ammontare
di spazio verticale si utilizzano macro come \smallskip o \bigskip, dove non si specifica un valore esatto,
ma una sua indicazione più generica, come appunto “piccolo” o “grande”: è poi lo stile generale associato al
documento a interpretare questa indicazione, traducendola in un effettivo e preciso comando di format-
tazione.
Un tipo di marcatura completamente orientato in senso strutturale, in quanto concepito per descrivere
la struttura generale di un documento piuttosto che la sua veste tipografica superficiale, è invece rappre-
sentato da SGML: la sua marcatura non esprime affatto l’aspetto tipografico (con nozioni come tipo di
carattere, dimensioni, stile, colore, etc.), ma solo la struttura (con nozioni come titolo, paragrafo, etc.), e può
essere molto varia, ma si conforma a uno schema che ne definisce ogni aspetto ed è trattabile in modo
automatico. SGML in effetti non definisce una struttura standard che ogni documento deve seguire, dato che
sarebbe impossibile prevedere e limitare a priori la struttura di qualsiasi tipo di documento: si pensi a quanto
diversi siano libri, articoli, lettere commerciali o private, documenti amministrativi o tecnici, dizionari,
elenchi, diari, rubriche, pagine web, etc. Invece quindi di definire un insieme chiuso di marcatori si offre un
metalinguaggio, cioè un linguaggio di marcatura capace di descriverne altri. Si tratta di un sistema con cui
gli autori possono definire la struttura dei propri documenti, e utilizzare poi le relative marcature, diverse e
specializzate di volta in volta. SGML è dunque flessibile e indefinitamente aperto, e rappresentava uno
standard internazionale ben prima della nascita di HTML: non è un caso che da esso derivino appunto lin-
guaggi di marcatura così diffusi come HTML e XML.
HTML è un’applicazione di SGML, ovvero semplicemente un insieme di marcatori definiti secondo le
regole di SGML per adattarsi a ipertesti. Per HTML vale lo stesso principio strutturale di SGML: la prima
versione di HTML non si curava affatto del design, e le stesse immagini furono aggiunte solo in un secondo
momento7. L’implicita assunzione è che la maggior parte dei documenti considerati hanno degli elementi in
comune come titoli, paragrafi, elenchi, tabelle, etc., e proprio queste sezioni sono soggette a marcatura da
parte di HTML: tranne che per alcuni periodi della sua storia, HTML per lo più non descrive mai l’aspetto
esteriore della pagina, ma si limita piuttosto a marcare la sua struttura.
Questo è naturalmente funzionale alla necessità dei documenti web di adattarsi a qualsiasi piattaforma,
da computer desktop a piccoli dispositivi portatili, ciascuno dei quali ha le sue caratteristiche fisiche e spesso
specifiche limitazioni, il suo sistema operativo e il suo browser web: è infatti evidente che lo stesso contenuto
6 La sigla nelle intenzioni del creatore del formato (Donald Knuth, 1978) si pronuncia [ˈtɛx] sul modello del greco, ma più spesso semplicemente [ˈtɛk]. Anche in TeX come nel più popolare (ma posteriore) RTF si riservano per informazioni metatestuali inframmezzate al testo essenzialmente backslash e parentesi graffe. 7 Il browser sviluppato in origine da Tim Berners Lee consentiva l’uso di immagini, ma visualizzate in una finestra di popup a parte, senza esser parte integrale dell’impaginazione del documento HTML.
Daniele Fusi – bozza cap. 3 (HTML)
5
dovrà assumere forme diverse a seconda se ad esempio lo schermo a disposizione abbia dimensioni di pochi
pollici o di oltre una ventina, se sia a colori o monocromatico, se si tratti di un computer o di un dispositivo
dalla potenza di calcolo molto più ridotta, etc., per cui non sarebbe possibile definire una veste grafica adatta
a tutti. Si tratta naturalmente di una prospettiva molto diversa da quella connessa a un tradizionale docu-
mento a stampa, dove si ha il pieno controllo su ogni singolo dettaglio della sua impaginazione tipografica e
il risultato appare identico a chiunque lo legga, laddove una pagina HTML può apparire nelle forme più varie
a seconda del client.
Tag, elementi e attributi
Un tipico documento HTML è semplicemente un file di testo in una qualsiasi codifica standard (molto
spesso Unicode serializzato in UTF-8, o ISO Latin 8859-1), dove non tutti i caratteri rappresentano il testo
vero e proprio, ma molti rivestono piuttosto il ruolo di marcatori, il cui scopo è definire la struttura del
documento: questa informazione metatestuale si trova sempre racchiusa fra i caratteri < e > (i caratteri già
ASCII di minore e maggiore) che delimitano quello che si chiama un marcatore o tag.
Ogni tag si apre dunque con un carattere < cui segue immediatamente il nome del tag stesso, seguito
eventualmente da una serie di attributi, sottoforma di coppie dalla struttura nome="valore"; dopo il suo
contenuto, quando presente, segue il corrispondente tag di chiusura, che delimita la fine di un elemento
strutturale del documento, ed è rappresentato dal nome del tag fra <> e preceduto da / (slash) Ad esempio,
un semplice paragrafo di testo può apparire come:
<p>Questo è un paragrafo.</p>
dove <p> è il tag di apertura, che delimita l’inizio di un paragrafo (come indica il nome del tag, p, iniziale di
paragraph), seguito dal contenuto, qui rappresentato da un breve testo, e chiuso da </p>, che delimita la
fine del paragrafo. Il testo “Questo è un paragrafo.” è dunque in questo esempio marcato come un paragrafo
del documento HTML, tramite l’uso dei due tag di apertura e chiusura: la coppia dei tag di apertura e chiusura
definisce quanto in HTML si dice un elemento.
Un elemento può essere dotato di vari attributi: ad esempio, si consideri il tag che definisce un collega-
mento ipertestuale (a, iniziale di anchor):
<a href="http://www.fusisoft.it">il mio sito web</a>
In tal caso, il testo racchiuso fra i tag di apertura e chiusura è quello ‘attivo’, cliccando sul quale si è condotti
alla pagina web il cui indirizzo è specificato dall’attributo href (che sta per hypertext reference), nell’esempio
http://www.fusisoft.it. L’attributo contiene quindi un nome, href, e un valore racchiuso fra doppi
apici, http://www.fusisoft.it, associati da un segno di uguale (=), indicando in tal modo il valore
dell’indirizzo cui il collegamento ipertestuale punta. Un altro semplice esempio è offerto dal tag
rappresentante un’immagine, img (abbreviazione di image):
<img src="sample.jpg" alt="Esempio di immagine">
Qui il tag ha due attributi, di cui src (da source) specifica da dove recuperare l’immagine da visualizzare (qui
semplicemente il nome del file di immagine, sample.jpg), e alt indica un breve testo descrittivo
dell’immagine da usarsi in sua vece ove fosse necessario (ad esempio per non vedenti).
Si noti peraltro che qui il tag non ha alcun contenuto, a differenza di quanto avveniva nell’esempio del
paragrafo, dato che la sua funzione è solo quella di specificare un’immagine da visualizzare: si tratta appunto
Daniele Fusi – bozza cap. 3 (HTML)
6
di un tag vuoto (empty), che dall'epoca di XHTML8 in virtù della necessità di rispettare le regole di buona
formazione di XML (per cui ogni tag aperto deve rigorosamente essere chiuso) si può scrivere anche nella
forma:
<img src="sample.jpg" alt="Esempio di immagine"></img>
o più brevemente come:
<img src="sample.jpg" alt="Esempio di immagine"/>
dove (come da sintassi di XML) il carattere / prima di > indica che si tratta di un tag vuoto, dunque in certo
modo aperto e subito chiuso, senza alcun contenuto. Altri esempi ancora più ovvi di tag vuoti sono offerti da
<br /> e <hr />, che indicano rispettivamente un’andata a capo che interrompe in tal modo il testo (break)
e una riga orizzontale di separazione (horizontal ruler). A partire dalla versione 5 di HTML comunque questa
notazione con / non è più necessaria, sicché è possibile (e anzi consigliato) scrivere semplicemente <br>.
Codifica testuale ed entità
La maggioranza delle pagine web codifica il testo in Unicode (nella sua forma di serializzazione UTF-8), o
in standard meno moderni come ISO 8859-1. In ogni caso, caratteri speciali o i caratteri riservati in HTML alla
marcatura del metatesto (come < o >) sono rappresentabili in HTML tramite un espediente simile al ben noto
escaping: si riserva a questo scopo il carattere & (ampersand), seguito da un nome convenzionale indicante
il carattere o dal suo codice numerico Unicode (preceduto da # se decimale, o da #x se esadecimale),
terminati a loro volta da un punto e virgola. Queste sequenze definiscono le cosiddette entità (entities), che
stanno dunque a rappresentare un qualche carattere, o per via del suo nome convenzionale (named entities)
o per via del suo codice (numbered entities), come in questo esempio:
<p><>&"</p>
<p>æαβγ</p>
L’esempio rappresenta due paragrafi, il primo dei quali contenente i caratteri < > & e " (tutti riservati in HTML
a scopi metatestuali, e quindi di norma9 rappresentati piuttosto per via di entità), il secondo contenente i
caratteri æ α β e γ; in questo secondo caso dunque l’espediente può ricordare quello messo in atto da Beta
code, dove dei caratteri ASCII sono usati per rappresentare caratteri al di fuori del repertorio di quella
codifica, consentendo di scrivere testi in greco senza abbandonarla: là si tratta di una sistematica metaco-
difica, qui invece solo di un uso speciale di alcuni caratteri (anzitutto &) in virtù dei quali si possono indicare
tutti i caratteri dello standard Unicode10 semplicemente riportando il loro codice numerico.
Struttura generale ed elementi
Un documento HTML si articola in almeno tre componenti principali: la dichiarazione (<!DOCTYPE>, che
definisce il tipo e la versione del linguaggio di marcatura, in modo da istruire il browser su come interpretare
correttamente la pagina web), e all’interno del tag html l’intestazione (<head>, che contiene metadati
8 XHTML è una ridefinizione di HTML 4.01 in base alle (più rigide) regole sintattiche di XML, inizialmente assunta alla base dei futuri sviluppi di HTML ma poi abbandonata in favore di una evoluzione più compatibile e aderente alle prassi e alle necessità tecnologiche. 9 La maggior parte dei browser è comunque in grado di comprendere quando simili caratteri appaiano all’interno di un testo in funzione puramente testuale. 10 Anteriormente alla versione 4 dello standard HTML il codice numerico si riferiva a ISO 8859-1, ma come si è visto nel capitolo dedicato alle codifiche testuali Unicode riflette fedelmente nei suoi primi 128 caratteri ASCII e nei successivi 128 ISO 8859-1.
Daniele Fusi – bozza cap. 3 (HTML)
7
relativi alla pagina come titolo, parole chiave, collegamenti a fogli di stile, etc.), e il corpo (<body>, che
include il vero e proprio contenuto visibile della pagina). Ad esempio, per un documento HTML 5 la struttura
di base è:
<!DOCTYPE html>
<html>
<head>
<title>...titolo...</title>
</head>
<body>
...contenuto della pagina...
</body>
</html>
struttura base di un documento HTML 5
All’interno di questa struttura si collocano tutte le altre varie decine di elementi definiti dallo standard HTML
per rappresentare gli aspetti principali della struttura di un ipertesto; in rapporto al loro tipo di disposizione
predefinita all’interno del documento essi si dividono in elementi block e inline. Gli elementi block rappre-
sentano dei blocchi (contenenti testo, immagini, altri blocchi, etc.) all’interno della pagina, disposti l’uno
sotto l’altro (ad es. il tag <p> che delimita un paragrafo, cioè essenzialmente un blocco di testo), mentre gli
elementi inline (ad es. il tag <em> che delimita una porzione di testo messa in enfasi) vengono allineati di
seguito, senza interruzione.
Rispetto al loro contenuto poi si possono avere elementi contenitori (container elements, come ad
esempio un paragrafo, che contiene testo o altro materiale) o elementi vuoti (empty elements, come ad
esempio l’elemento indicante una semplice separazione fra blocchi, sia essa rappresentata di norma con una
riga vuota come per <br/>, o da una riga orizzontale come <hr/>).
Dato quindi che ogni elemento contenitore può includere testo e/o altri elementi, in generale il docu-
mento HTML riceve una struttura gerarchica11, che si può metaforicamente assimilare a un albero il cui tronco
è costituito dall’elemento html (chiamato in tal caso root element, in quanto primo nella gerarchia), che a
sua volta include gli elementi head e body (immaginabili come due rami che si dipartono da questo tronco),
che a loro volta includono altri elementi, e così via. Una pagina HTML come:
<html>
<head>
<title>Esempio</title>
</head>
<body>
<p>Esempio di HTML.</p>
</body>
</html>
è dunque immaginabile come in figura:
11 Questa struttura gerarchica, ben adatta a un tipico documento di testo, rappresenta un’eredità di SGML e in quanto tale si ritrova anche in altri linguaggi da esso derivati, anzitutto XML.
Daniele Fusi – bozza cap. 3 (HTML)
8
pagina HTML come un albero: html è il tronco, che ramifica in head e body; head ramifica in
title, e body ramifica in h1 e p.
o in alternativa come una serie di contenitori, ciascuno dei quali ne include altri:
pagina web come insieme di contenitori: html include head e body, head include title,
body include h1 e p.
Per avere un’idea dei tipi di elemento definiti in HTML si può scorrere il seguente (del tutto incompleto)
elenco, considerando che in aggiunta ciascuno di essi tipicamente definisce vari attributi con i rispettivi valori:
elementi strutturali html, head, body
elementi dell’intestazione link, meta, script, style, title
elementi block generici p, h1, h2, h3, h4, h5, h6, address, blockquote,
pre, div
elementi di lista dl, dt, dd, ul, ol, li
elementi di tabella table, thead, tbody, tfoot, caption, tr, th, td
elementi inline a, br, img, span, sub, sup, abbr, cite, code, em,
strong
elementi di form form, button, fieldset, legend, input, label,
select, textarea
alcuni elementi di HTML
Oltre ai già visti elementi destinati a definire la struttura generale di ogni pagina HTML, si possono consi-
derare anzitutto quelli contenuti in una tipica intestazione (head): link definisce una relazione fra docu-
menti diversi, ad esempio per collegare una pagina HTML a un foglio di stile CSS (external CSS); meta viene
utilizzato per inserire vari metadati all’interno dell’intestazione, come ad esempio parole chiave, descrizione
dei contenuti, nome dell’autore, etc.; script (presente anche nel corpo della pagina) contiene codice di
programma tipicamente in linguaggi come JavaScript, che consentono una maggiore interattività della
Daniele Fusi – bozza cap. 3 (HTML)
9
pagina; style viene usato per inserire stili CSS direttamente nella pagina (embedded CSS); title indica
invece il titolo della pagina, che di norma appare visualizzato nel titolo della finestra del web browser
utilizzato.
Elementi block generici sono poi ad esempio p, che indica un paragrafo di testo; i tag da h1 a h6, che
indicano diversi livelli gerarchici di titolo nel documento (h1 è il titolo principale, h2 un titolo di minore
importanza, e così via fino ad h6); una serie di blocchi più o meno generici: address contiene un indirizzo,
blockquote una citazione, pre del testo pre-formattato tipograficamente (visualizzato dal web browser in
un tipo di carattere a larghezza fissa come quelli della famiglia Courier, rispettando tutti i suoi spazi e andate
a capo), mentre div è un contenitore generico usato per articolare i vari contenuti anche complessi della
pagina.
Vi sono poi elementi specializzati per definire degli elenchi, variamente puntati o numerati, o delle liste di
definizioni: nel primo caso si inserisce ogni voce dell’elenco (li) dentro un elemento ul od ol (rispet-
tivamente per elenchi puntati – unordered list – o numerati – ordered list –), nel secondo una coppia di
elementi dt/dd (rispettivamente indicanti il termine e la sua definizione) dentro un elemento dl.
Per le tabelle vi sono inoltre table, indicante l’intera tabella, e una serie di elementi indicanti le sue
articolazioni, come intestazione, corpo e piede (thead, tbody, tfoot), legenda (caption), righe (tr) e celle
(distinte in celle di intestazione – th – e celle di dati – td –).
Quanto agli elementi inline, fra i più comuni vi sono a (che rappresenta un collegamento ipertestuale), br
(indicante un’interruzione – break – fra due sezioni del documento, tipicamente resa con un a capo), img
(rappresentante un’immagine inserita in un documento), e vari tag che modificano porzioni di testo a
significare enfasi (em, o il più forte strong), parole citate (cite), codice di un programma citato (code),
abbreviazioni (abbr), o il generico span, usato per raggruppare elementi inline (si tratta in certo modo
dell’equivalente inline di div).
Chiudono l’elenco esemplificativo riportato sopra una serie di elementi utili nel definire i campi di moduli
elettronici (form) che l’utente riempie per passare delle informazioni al server di un sito, come caselle di
testo, caselle a spunta, pulsanti, etc.
L’esempio seguente mostra l’uso in una pagina web di quasi tutti i tag citati:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta name="author" content="Daniele Fusi"/>
<meta name="keywords" content="HTML, Fusi, informatica umanistica" />
<title>Titolo della pagina</title>
<link href="styles/web.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
font-family:"Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida
Sans", Arial, sans-serif;
}
h1 {
font-size:1.1em;
font-family:Arial, Helvetica, sans-serif;
}
span.title {
font-style:italic;
}
blockquote {
font-style:italic;
font-family:"Times New Roman", Times, serif;
Daniele Fusi – bozza cap. 3 (HTML)
10
}
div#contact {
font-size:0.8em;
margin-left:2em;
margin-right:2em;
background-color:#CCCCCC;
}
div#contact p {
margin:0;
}
table {
font-size:0.9em;
}
table caption {
background:silver;
color:white;
}
td {
border:1px silver solid;
}
</style>
</head>
<body>
<h1>Esempi di elementi HTML</h1>
<p><strong>Paragrafo</strong> di <em>testo</em>. Cito <span
class="title">Inf.1,1-3</span>:</p>
<blockquote>Nel mezzo del cammin di nostra vita<br/>
mi ritrovai per una selva oscura <br/>
ché la diritta via era smarrita.</blockquote>
<p>Segue un testo preformattato<sup>*</sup>:</p>
<pre>
for (int i = 0; i < 10; i++)
{
Console.WriteLine(i.ToString());
}
</pre>
<p><sup>*</sup>Si tratta del codice di un programma, <code>for</code> indica
un ciclo.</p>
<p>I miei elementi HTML preferiti (vedi <a href="http://www.w3.org"
target="_blank">W3C</a>):</p>
<ul>
<li>p</li>
<li>h1</li>
<li>div</li>
</ul>
<p>La loro definizione:</p>
<dl>
<dt>p</dt>
<dd>paragrafo</dd>
<dt>h1</dt>
<dd>titolo di primo livello</dd>
<dt>div</dt>
<dd>contenitore generico</dd>
</dl>
<p>Qui si trova un'immagine: <img src="Sheet.png" alt="foglio"/>, circondata
da testo.</p>
<h2>Statistiche</h2>
<table>
<caption>giorni di pioggia</caption>
<thead>
<tr>
<th>anno</th>
<th>gen</th>
<th>feb</th>
<th>mar</th>
<th>apr</th>
</tr>
</thead>
Daniele Fusi – bozza cap. 3 (HTML)
11
<tbody>
<tr>
<td>2010</td>
<td>20</td>
<td>14</td>
<td>17</td>
<td>9</td>
</tr>
<tr>
<td>2011</td>
<td>28</td>
<td>19</td>
<td>21</td>
<td>11</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td>48</td>
<td>23</td>
<td>38</td>
<td>20</td>
</tr>
</tfoot>
</table>
<h2>Form</h2>
<form>
<label>nome</label>
<input type="text"/>
<br/>
<div>
<input type="radio" value="M">maschio</input>
<input type="radio" value="F">femmina</input>
</div>
<label>commento</label>
<textarea rows="3"></textarea>
<br/>
<input type="submit" value="invia commento"></input>
</form>
<hr/>
<div id="contact">
<p>ACME SPA - [email protected]</p>
<address>Via Tal dei Tali, 123</address>
</div>
</body>
</html>
codice HTML di esempio: dopo la dichiarazione iniziale, head contiene vari tag meta, title,
link, e style con la definizione di alcuni stili CSS; body contiene un titolo seguito da paragrafi,
citazioni, testo preformattato, elenchi e definizioni, un’immagine all’interno di un paragrafo, una tabella, un modulo (form) e un riquadro finale a pie’ di pagina.
La pagina visualizzata in un browser appare come nelle seguenti figure:
Daniele Fusi – bozza cap. 3 (HTML)
12
resa del codice HTML di esempio in Internet Explorer 9 (parte superiore)
resa del codice HTML di esempio in un browser web
Evoluzione: tag logici e tipografici
Dall’epoca della sua nascita nel 1989 lo standard HTML ha subito varie trasformazioni passando attraverso
numerose versioni, indicate come di consueto con dei numeri. La versione 4 ha proposto fra l’altro l’uso di
CSS1 (giunto poi con HTML 5 alla versione 3) e introdotto XML.
Daniele Fusi – bozza cap. 3 (HTML)
13
Si è visto come essenzialmente HTML, in virtù della sua ascendenza da SGML e della sua vocazione
multipiattaforma, rappresentasse sin dall’origine un tipo di marcatura più logico (destinato a marcare la
struttura del documento) che tipografico: è infatti ovvio che tag come h1 o p si limitano a fornire una mar-
catura strutturale, indicando quali porzioni del documento sono titolo o paragrafo, ma nulla dicono su tipo
di carattere, colore, dimensione, stile, sfondo, margine, etc. Tuttavia questa distinzione fra il contenuto e la
sua presentazione è stata presto offuscata dall’evoluzione commerciale dello standard, per la quale gli autori
delle pagine web richiedevano tecnologie per rendere la loro opera più appetibile a un vasto pubblico e
definire in modo più stringente il loro design, senza rischiare che ogni browser ne visualizzasse un’inter-
pretazione completamente diversa. I produttori di web browser, anzitutto Microsoft e Netscape, iniziarono
così a introdurre nuovi elementi HTML non standard, portandosi sempre oltre nella dura lotta per la
supremazia del mercato di questi prodotti software: all’epoca di questa “guerra dei browser” si faceva
dunque a gara nell’implementare di fatto nuove aggiunte allo standard HTML, molte delle quali sono poi
state incorporate ufficialmente.
In effetti, proprio nel tentativo di arginare queste modifiche arbitrarie e stabilire ordine nello standard il
consorzio per il suo sviluppo (W3C, World Wide Web Consortium: http://www.w3.org), allora di recente
fondazione (1994), propose nel 1996 una nuova versione di HTML, la 3.2, di fatto accogliendo molte delle
pratiche in uso, anzitutto i poi deprecati tag di natura tipografica, introdotti proprio allo scopo di definire
esplicitamente delle caratteristiche di formattazione del testo (tipo di carattere, dimensione, colore, stile,
etc.). A differenza dei tag logici i tag tipografici danno precise indicazioni in merito alla formattazione del
testo: si tratta ad esempio di:
• b: grassetto (bold).
• i: corsivo (italic).
• u: sottolineato (underline).
• s: barrato (strikethrough).
• sup, sub: testo in apice (superscript) o pedice (subscript).
• tt: testo a spaziatura fissa (teletype).
• big, small: testo più grande o piccolo.
• font: indicazione del font da utilizzare, con eventuale specificazione di colore, dimensioni, etc. Ad
esempio, il tag <font family="Arial" size="4" color="red"> indica che il testo conte-
nuto deve apparire con gli specificati font, dimensione e colore).
Di fatto questo tipo di marcatura, che allontana HTML dalla sua originaria vocazione, risultava in una notevole
serie di inconvenienti pratici dovuti alla non netta distinzione tra il contenuto delle pagine web e la loro
forma, nella misura in cui l’uso di questi tag implicava proprio la fusione dei due. Si pensi ad esempio a un
sito web composto di centinaia di pagine, ciascuna contenente marcatura tipografica per definire ogni minuto
aspetto del design: colori, dimensioni, allineamento del testo, grassetti, corsivi, sottolineature, etc.: in questo
tipo di pagine la marcatura che detta esplicitamente queste caratteristiche si trova inframmezzata al
contenuto (anzitutto il testo del documento), rendendo non solo le pagine più pesanti e complesse, ma
provocando anche grandi problemi di scalabilità nella loro manutenzione. Se infatti in un simile sito tutti i
titoli fossero nel tipo di carattere Times New Roman a 18 punti, grassetto, rosso e sottolineato, e si decidesse
di cambiare il loro aspetto in Arial a 16 punti, corsivo e blu, questo significherebbe dover individuare e
modificare ogni singola marcatura contenente queste istruzioni di formattazione in ogni singola pagina
dell’intero sito. Ad esempio, un titolo nella pagina originaria potrebbe apparire come:
<h1><b><u><font family="Times New Roman" color="red" size="18">Testo del
titolo</font></u></b></h1>
Daniele Fusi – bozza cap. 3 (HTML)
14
dove un tag h1 (=titolo di primo livello) include un tag b (=grassetto) che include un tag u (=sottolineato) che
include un tag font i cui attributi specificano tipo di carattere (family), colore (color) e dimensioni (size).
Dovendo cambiare ogni simile titolo nel modo indicato, si dovrebbe riscrivere questa marcatura come:
<h1><i><font family="Arial" color="blue" size="16">Testo del
titolo</font></i></h1>
Una simile modifica andrebbe quindi ripetuta per ogni occorrenza di ogni titolo di ogni pagina del sito; un
intervento manuale sarebbe quindi immediatamente escluso per ovvi motivi pratici in qualsiasi sito dotato
di più di qualche pagina. Ci si potrebbe naturalmente avvalere di programmi di videoscrittura capaci di
effettuare sostituzioni a tappeto su più file HTML contenuti in una cartella, ma anche nel caso di questo
banale esempio si incontrerebbero già alcune difficoltà connesse alle potenziali varianti dello stesso codice
HTML; niente infatti garantisce che i tag di marcatura siano sempre disposti nello stesso ordine: potrebbe
per esempio accadere che per un qualsiasi motivo talora la sequenza fosse h1, b, u, font, talaltra b, h1, u,
font, o u, b, font, h1, o qualsiasi altra loro combinazione, il cui risultato sarebbe comunque lo stesso.
Inoltre, potrebbe anche accadere che questi tag non fossero disposti di seguito nella pagina ma magari
interrotti da vari spazi e andate a capo12, come ad esempio in:
<h1>
<b><u>
<font family="Times New Roman" color="red" size="18">Testo del
titolo</font>
</u>
</b></h1>
In tal caso, se ci si limitasse a ricercare la sequenza di caratteri <h1><b>... etc. non la si troverebbe, dato che
qui essi sono inframmezzati da un’andata a capo (ovvero tipicamente da una coppia di caratteri “di
controllo”13 dal codice 13 – CR – e 10 – LF –) e una tabulazione (codice 9 – TAB –): quindi ricercare una
sequenza di codici di carattere come:
U+003C U+0068 U+0031 U+003E U+003C U+0062 U+003E
corrispondenti appunto a <h1><b>..., non avrebbe successo rispetto a una come:
U+003C U+0068 U+0031 U+003E U+000D U+000A U+0009 U+003C U+0062 U+003E
dove la sequenza risulta interrotta dall’inserzione di codici di carattere (CR, LF, TAB) non pertinenti per HTML
ma comunque capaci di definire una diversa successione numerica. Nella migliore delle ipotesi quindi si
dovrebbero ripetere più operazioni di sostituzione globale, o ricorrere a sistemi di ricerca più complessi come
le espressioni regolari, col rischio di lasciar fuori dei casi di varianti non contemplate dall’operatore, o
all’opposto di estendere la sostituzione anche laddove non fosse richiesta.
Si pensi poi a scenari in cui la sostituzione non deve avvenire in modo indifferente su tutti i contenuti di
tutte le pagine, ma dipenda da criteri semantici o contestuali: potrebbe magari esser necessario sostituire
non tutti i titoli, ma solo quelli all’interno di determinati blocchi in ogni pagina (ad es. non tutti i tag h1, ma
12 Si ricordi infatti che in HTML spazi e andate a capo non sono significativi quando separano tag di chiusura e di aper-tura; è sempre la marcatura a definire quando il testo viene reso andando a capo (ad esempio per via della chiusura di un paragrafo, o la presenza di un elemento <br/>) o di seguito. Di fatto questa caratteristica viene sfruttuata proprio allo scopo di formattare il codice HTML in un modo più leggibile per l’utente umano, laddove per un web browser non farebbe alcuna differenza che il testo di una pagina risiedesse tutto su un’unica riga o su cento diverse. 13 Per questi codici si veda il capitolo dedicato alle codifiche testuali, in particolare ASCII. Si ricordi che la notazione standard U+HHHH dove HHHH rappresenta una qualsiasi cifra esadecimale indica un codice di carattere nello standard Unicode.
Daniele Fusi – bozza cap. 3 (HTML)
15
solo i tag h1 dentro un particolare div), oppure solo quelli seguiti da un sottotitolo (h2); in tal caso appare
evidente che qualsiasi modifica a un sito di questo genere rischia di implicare una sempre più caotica serie di
operazioni di interventi semiautomatici o affatto manuali, fino al punto da renderli del tutto antieconomici
specie per siti di grandi dimensioni.
Inoltre, la fusione del contenuto con la sua presentazione dovuta qui all’uso di tag tipografici implica
anche l’inestricabile commistione dei due, in modo tale che lo stesso documento finisce per non poter essere
fruibile su piattaforme e dispositivi diversi: si pensi ad esempio alle differenze tipografiche che implicano la
fruizione dello stesso documento sul monitor di un computer desktop, su quello di un piccolo computer
portatile, o addirittura di un dispositivo mobile come un palmare o uno smartphone, o la sua destinazione
alla stampa monocromatica, etc.: in tutti questi casi le modifiche all’impaginazione del contenuto sono
radicali, e questo implicherebbe ricostruire una nuova pagina con tutti i suoi contenuti per ogni nuovo
fruitore, dotandola di volta in volta della forma più adatta. Laddove invece il contenuto sia separato dalla sua
presentazione, nella misura in cui la pagina web si limita all’uso di marcature logiche, la medesima unica
pagina può essere fruita dai dispositivi e dalle piattaforme più diversi senza implicare alcun nuovo intervento
da parte del loro autore. Inoltre, qualsiasi modifica decisa per un qualunque elemento formale (tipo di
carattere, colori, dimensioni, margini, allineamenti, disposizioni degli elementi, etc.) può essere apportata in
modo sistematico a un intero sito senza dover effettuare alcuna modifica a nessuna delle sue pagine.
Per tutti questi motivi, con la successiva versione 4 (1997) lo standard HTML è stato ricondotto alla sua
vocazione originaria, abbandonando i tag tipografici (del tutto eliminati con la versione 5) a vantaggio di
quelli puramente logici, e riservando la formattazione all’ormai emergente CSS (la cui prima versione era già
apparsa all’epoca della versione 3 di HTML); la tendenza va anzi nella direzione di aumentare e specializzare
i tag logici, come ad esempio i seguenti:
• em: enfasi (emphasis), indica che il testo al suo interno va enfatizzato in qualche modo, formattandolo
diversamente dal contesto; di norma è reso con il corsivo.
• strong: forte enfasi, indica un’evidenziazione maggiore rispetto al semplice em, di norma resa con
il grassetto.
• dfn: indica il testo di una definizione.
• cite: racchiude il testo di una breve citazione.
• abbr: include un’abbreviazione.
• code: indica che il testo racchiuso rappresenta del codice in un qualche linguaggio informatico; di
norma la convenzione è di rappresentare questo codice in un font a larghezza fissa di carattere (ad
es. della famiglia di Courier).
• samp: indica che il testo incluso rappresenta del testo di esempio. Per lo più è reso tipograficamente
in modo simile a code.
• kbd: indica del testo che si intende dover essere digitato (kbd è l’abbreviazione di keyboard) in modo
letterale così come appare (ad es. il testo “exit” nella frase “per uscire, digitare il comando exit”).
• var: indica del testo rappresentante il nome di una variabile o qualsiasi entità in genere da sostituire
con un valore concreto (ad es. il testo “nome_file” nella frase “per cancellare un file, immettere il
comando delete nome_file”).
Come si vede, in tutti questi casi i tag forniscono indicazioni puramente semantiche, senza contenere alcun
dettaglio sulla loro resa tipografica; questa sarà specificata dal creatore della pagina (di norma tramite
un’altra tecnologia, CSS), o, in mancanza di una definizione esplicita, dal foglio di stile predefinito del browser
stesso: in questo secondo caso, benché per lo più le convenzioni tipografiche siano condivise, può ben
accadere che la resa tipografica differisca a seconda del browser utilizzato.
Daniele Fusi – bozza cap. 3 (HTML)
16
Cascading Style Sheets (CSS)
CSS (Cascading Style Sheets) è una tecnologia ideata allo scopo di esonerare HTML dal ruolo di specificare
in modo esplicito la formattazione tipografica delle pagine web; la sua prima versione risale al 1996, ma è
stato ampiamente utilizzato solo a partire dalla versione 4 di HTML. Attualmente la versione più recente dello
standard è la 3, allineata alla versione 5 di HTML.
Stili
Il concetto di CSS è piuttosto semplice, e ricorda da vicino quello degli stili corrente in qualsiasi programma
di videoscrittura: uno “stile” qui non è che un modo conveniente e sintetico di definire in una sola volta un
intero insieme di caratteristiche tipografiche diverse, di norma associandole a un nome. Qualsiasi utente di
programmi di videoscrittura come Microsoft Word è ad esempio abituato all’uso di stili per titolo o corpo del
testo, molti dei quali predefiniti: in Word è il caso di stili come “Titolo 1”, “Titolo 2”, “Normale”, etc., che
indicano appunto titoli di vario livello gerarchico, corpo del testo, etc. Ciascuno di questi stili comprende un
insieme di attributi tipografici: ad esempio14 Normale implica un tipo di carattere Calibri a 11 punti nero,
mentre Titolo 1 un tipo di carattere Cambria a 14 punti, grassetto, di colore blu, con uno spazio precedente
di 24 punti, e così via.
Il vantaggio pratico è qui evidente: invece che dover ogni volta applicare in modo manuale una ad una
tutte queste caratteristiche tipografiche, basta selezionare uno di questi stili per applicarle tutte insieme in
una sola volta. Questo garantisce non solo la completa uniformità di un documento, senza rischi di errori o
omissioni da parte del suo redattore, ma anche e soprattutto la sua estrema versatilità sul piano tipografico:
diviene infatti possibile alterare profondamente la sua veste solo modificando la definizione di uno stile,
invece che cambiando faticosamente punto per punto la formattazione di tutte le regioni di testo desiderate.
Se ad esempio si decide che tutti i titoli di primo livello non debbano più essere in blu e Cambria 14, non c’è
bisogno di scorrere tutto il documento, lungo magari centinaia di pagine, per individuare ogni regione di testo
così formattata e cambiarla manualmente in altro; basta invece modificare la definizione dello stile, e auto-
maticamente tutte e solo le regioni di testo cui esso è stato applicato risultano aggiornate alla nuova veste
tipografica.
14 L’esempio si riferisce alle versioni 2007 e 2010 di Microsoft Word. Altre versioni del programma si basano su diverse definizioni di stili (in particolare, nelle versioni precedenti il tipo di carattere predefinito era Times New Roman e per i titoli Arial).
Daniele Fusi – bozza cap. 3 (HTML)
17
finestra di dialogo per la modifica delle caratteristiche tipografiche associate a uno stile in un programma di videoscrittura come Microsoft Word: si possono osservare il nome dello stile
(Heading 1), lo stile su cui esso si basa (Normal), e le sue principali caratteristiche (tipo di
carattere Cambria, 14 punti, grassetto, colore blu, etc.).
Ciascuno stile inoltre può essere utilizzato come base per crearne di nuovi da esso dipendenti: ad esempio,
ci si può basare su uno stile di corpo del testo per derivarne uno destinato a essere applicato alle citazioni,
aggiungendovi solo margini adeguati a sinistra e destra e corsivo, mentre tutte le altre caratteristiche
tipografiche sono ereditate dallo stile di base. Se quindi lo stile di base di corpo del testo prevede un tipo di
carattere Calibri a 11 punti nero, lo stile citazione da esso derivato può semplicemente aggiungere la
definizione di margini e quella di corsivo, ereditando Calibri e 11 punti dallo stile di base. Se lo stile di base
viene poi modificato, lo sarà di conseguenza anche ogni stile derivato. In tal modo si possono costruire delle
complesse gerarchie di stili, e garantire la perfetta uniformità del documento e l’aggiornamento e la
sincronizzazione di ogni suo aspetto formale.
Dato che peraltro gli stili per loro natura sono associati a nozioni semantiche piuttosto che meramente
tipografiche, cioè si riferiscono a nozioni come “titolo”, “corpo del testo”, “enfasi”, etc. e non a specifiche
istruzioni di formattazione come “grassetto”, “corsivo”, “rosso”, etc., proprio come i tag logici di HTML essi
concorrono a definire la struttura del documento. In tal modo i programmi di videoscrittura diventano in
grado di effettuare una serie di operazioni automatiche sul testo, che risulta non più una lunga serie
indistinta di caratteri variamente formattati, ma una sequenza di blocchi logicamente distinti: per esempio, i
programmi possono esaminare tutto il documento ed estrarne solo le porzioni di testo marcate come titolo
per creare in modo del tutto automatico un sommario o una mappa interattiva e navigabile; e quand’anche
venga inserito nuovo materiale o ne venga cancellato, alterando così il numero delle pagine del documento,
il programma è in grado di mantenere sempre aggiornato un sommario così generato, nella misura in cui gli
è possibile individuare la posizione precisa di ciascuna porzione di testo marcata come titolo, quale che sia lo
spostamento da essa subito. Allo stesso modo è possibile creare e aggiornare in modo automatico riferimenti
incrociati (ad es. un’indicazione vedi pagina N, dove il numero della pagina viene automaticamente definito
dal programma in base allo stile del testo cui ci si riferisce) indici analitici, raccogliendo tutte le parole marcate
con uno stile appropriato (ad esempio uno stile “definizione”), o inserire sempre in modo automatico titoli
correnti sulle intestazioni di ciascuna pagina che riprendono il titolo del capitolo cui essa appartiene, e così
Daniele Fusi – bozza cap. 3 (HTML)
18
via: i vantaggi di una strutturazione semantica del testo sono insomma evidenti, non solo in quanto si
mantiene separata la sua veste tipografica, suscettibile così di variare liberamente senza modificare in alcun
modo il contenuto.
Come il concetto di strutturazione logica di un documento già visto a proposito di HTML viene applicato a
testi prodotti da programmi di videoscrittura, così il concetto di stile tipografico, caratteristico di questi
ultimi, viene applicato ad HTML per tramite di CSS. Anche nel caso di questa tecnologia la base è sempre
costituita da un semplice testo, dove un’apposita sintassi definisce gli stili, e, diversamente da quanto avviene
in un programma di videscrittura, anche le regole della loro applicazione. Se infatti si dovesse applicare
manualmente ogni stile a ogni porzione di testo di ogni pagina di un sito, si riproporrebbero gli stessi problemi
di scalabilità e mantenibilità già visti a proposito dei tag tipografici: con CSS invece non solo si raggruppano
attributi tipografici insieme sotto vari stili, ma si definiscono in modo anche molto complesso e potente le
regole della loro applicazione automatica a ciascun tag di ogni pagina web, sicché è lo stesso web browser ad
applicarli ovunque richiesto.
Un documento CSS non è dunque che un testo comprendente un insieme di regole che definiscono stili e
loro applicazione; ogni regola inizia con una parte che specifica a quali tag si applica lo stile, e segue con la
definizione di tutti gli attributi tipografici dello stile nella forma generica nome: valore;, inclusi fra
parentesi graffe. Ad esempio:
h1 { color: red; }
rappresenta uno stile CSS che sarà applicato a tutti i tag h1 (cioè a tutti i titoli di primo livello) di ogni pagina
del sito (posto che essa faccia riferimento a questo foglio di stile CSS), conferendo loro un colore rosso. In
altri termini, questo significa che tutti i titoli di primo livello saranno visualizzati in rosso. Anche solo questo
esempio dovrebbe essere sufficiente a mostrare i principi essenziali di questa tecnologia: grazie ad essa infatti
non è più necessario marcare ogni occorrenza di h1 con un tag font e un attributo color="red"; piuttosto,
ci si limita alla pura marcatura logica h1, che in sé nulla dice riguardo alla formattazione tipografica. Questa
viene invece delegata a un’indicazione del tutto indipendente dal codice HTML della pagina web, nel codice
CSS contenente la definizione degli stili, che vengono automaticamente applicati a ogni contenuto dell’ele-
mento h1 di ogni pagina del sito. In altri termini, il contenuto (la pagina HTML) viene creato una volta sola, e
in modo del tutto indipendente da una specifica veste tipografica; questa gli viene poi sovrapposta in base
agli stili CSS, che possono essere modificati a piacimento in qualsiasi istante, certi che ogni modifica si
ripercuoterà immediatamente sull’intero sito.
Si deve peraltro ricordare che in CSS gli stili non si limitano a controllare solo gli aspetti che più intuitiva-
mente si associano alla formattazione tipografica, come tipi e stili di carattere, dimensioni, colori, margini,
etc., ma hanno il potere di specificare l’intera impaginazione dei contenuti, definendo in modi molto vari e
complessi la posizione di ciascuna porzione della pagina (CSS positioning). Ad esempio, si consideri una tipica
impaginazione comprendente una testata in alto con il titolo del sito, una banda laterale con un menu, un
contenuto centrale e un piede di pagina con informazioni su contatti e copyright: questa intera struttura può
essere facilmente descritta per tramite di stili CSS, e si tratta di un esempio istruttivo anche nella misura in
cui evidenzia l’enorme semplificazione dei contenuti HTML. Questi ultimi infatti possono essere semplice-
mente disposti uno dopo l’altro, senza curarsi del loro posizionamento tipografico, come in questo esempio:
<!DOCTYPE html>
<html>
<head>
<title>CSS Layout Sample</title>
Daniele Fusi – bozza cap. 3 (HTML)
19
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="Layout.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="masthead">
<h1>Testata del titolo</h1>
</div>
<div id="container">
<div id="left_col">
<h2>menu</h2>
<ul>
<li>alpha</li>
<li>beta</li>
<li>gamma</li>
</ul>
</div>
<div id="page_content">
<p>Contenuto principale della pagina. Questa pagina mostra il
caratteristico layout di una pagina web ottenuto con il solo ausilio di stili
CSS.</p>
<p>Questa pagina mostra il caratteristico layout di una pagina web
ottenuto con il solo ausilio di stili CSS.</p>
<p>Questa pagina mostra il caratteristico layout di una pagina web
ottenuto con il solo ausilio di stili CSS.</p>
</div>
</div>
<div id="footer">
<p>Piede di pagina.</p>
</div>
</body>
</html>
struttura di una pagina HTML con intestazione, menu di sinistra, corpo e pie’ di pagina. Ciascuna di queste sezioni è inclusa in un elemento div dotato di un attributo id, cui si riferiscono gli stili CSS.
Se si visualizza questo codice HTML senza applicarvi uno specifico foglio di stile che ne posizioni i vari con-
tenuti, il risultato è quello riportato sotto, dove i vari elementi block si collocano l’uno sotto l’altro, nell’ordine
in cui appaiono; prima il titolo, quindi i menu, seguito dal corpo e infine dal piede di pagina:
esempio (A): resa della pagina HTML di esempio senza uno specifico foglio di stile CSS
Quanto invece si desidera ottenere qui è una collocazione di ciascun elemento div della struttura HTML
simile a quella schematizzata (in cui noto l’id di ciascun elemento fra parentesi): l’intestazione in alto, al
centro un’area divisa in due colonne, con a sinistra il menu e a destra il corpo della pagina, e in basso il piede:
Daniele Fusi – bozza cap. 3 (HTML)
20
schema dell’impaginazione desiderata per la pagina web di esempio
Gli stili CSS utilizzati per definire questa impaginazione sono riportati di seguito (per i vari elementi sono
specificati anche diverse tonalità di grigio per lo sfondo in modo che la figura qui riportata risalti meglio):
body {
margin: 0;
padding: 0;
}
#masthead {
background-color:#F0F0F0;
}
#container {
min-width: 600px;
}
#left_col {
width: 200px;
float: left;
background-color:#FAF8F8;
}
#page_content {
margin-left: 200px;
background-color:#FAFAFF;
}
#footer {
clear: both;
background-color:#F0F0F0;
}
Ogni selector rimanda qui al valore dell’attributo id dell’elemento div corrispondente nella pagina HTML
(#masthead, #container, #left_col, #page_content, #footer)15: per la testata si specifica solo un
15 Si aggiunge inoltre un selector per l’intero contenuto dell’elemento body (ovvero in pratica per tutti gli elementi del vero e proprio contenuto della pagina), che azzera margine esterno e interno (padding), che potrebbero avere valori
Daniele Fusi – bozza cap. 3 (HTML)
21
colore di sfondo (background-color: #F0F0F0;)16; per l’area destinata a contenere sia la colonna di
sinistra col menu che il corpo della pagina alla sua destra (#container) si definisce invece la larghezza
minima, in modo da evitare che ridimensionando la finestra del browser il testo finisca schiacchiato in uno
spazio troppo angusto risultando di difficile lettura (min-width: 600px; = larghezza minima 600 punti).
Per la colonna di sinistra contenente il menu invece (#left_col) si indica la larghezza (200 punti), un colore
di sfondo e si specifica che questo elemento dovrà risultare ‘ancorato’ a sinistra, in modo indipendente dalla
disposizione ordinaria dei blocchi, sicché il blocco successivo si collocherà non sotto di esso come di norma,
ma come se esso non esistesse; segue appunto il corpo della pagina (#page_content), che riceve oltre al
consueto sfondo colorato un margine sinistro pari alla larghezza della colonna ancorata a sinistra (in caso
contrario il corpo si sovrapporrebbe alla colonna sinistra), e infine il piede di pagina (#footer), anch’esso
dotato di fondo colorato e disposto in modo da cancellare ogni ancoraggio esistente (clear: both;) e
occupare l’intera larghezza della pagina, indipendentemente dal fatto che la parte superiore risulta divisa in
due colonne.
Applicando questo foglio di stile, il browser visualizza la pagina come in figura:
esempio (B): resa della pagina HTML di esempio con il foglio di stile CSS dell’esempio
ora in effetti la testata del titolo appare in alto, a sinistra si colloca il menu (con un elenco puntato che ne
rappresenta le voci), a destra il corpo della pagina (con una serie di paragrafi di testo), e in fondo il piede,
tutti con il loro fondino grigio. Basta quindi qualche riga di codice CSS per ridisegnare completamente l’intera
impaginazione del documento HTML: quest’ultimo non definisce che la struttura, come una serie di
suddivisioni (div), ed è poi l’applicazione di due diversi fogli di stile, quello predefinito del browser (esempio
A sopra) e quello specifico dell’autore della pagina (esempio B) a dare allo stesso contenuto due vesti grafiche
del tutto diverse, senza che sia necessario cambiare il codice HTML (se non per l’inserzione in head di un
elemento link che colleghi questa pagina al foglio di stile). Si tratta di un esempio estremamente semplice,
ma sufficiente a mostrare come l’uso di HTML e CSS consenta di mantenere distinti il contenuto strutturato
dai tag HTML da un lato, e una sua qualsiasi veste grafica dall’altro. La pagina web si affranca dunque da tutte
quelle marcature tipografiche che la inquinavano a partire dalla versione 3.2 dello standard, e torna ad essere
puramente logica, e per conseguenza molto più snella, mantenibile e semanticamente orientata.
Sintassi
La sintassi generale di CSS si articola dunque in una parte che seleziona la porzione di codice HTML cui
applicare lo stile (selector), e una serie di coppie proprietà : valore (declarations), ciascuna chiusa da un
punto e virgola, che dichiarano il valore di ogni proprietà di formattazione desiderata; anche in tal caso gli
maggiori di zero in quanto ereditati in cascata dai fogli di stile precedenti nella gerarchia, rovinando così l’effetto desi-derato. 16 Fra i vari modi di indicare un colore quello qui esemplificato consiste nello specificare l’intensità dei suoi componenti rosso, verde e blu, ciascuna indicata da due cifre esadecimali (per cui ad esempio il puro rosso è FF0000, il puro verde
00FF00, il puro blu 0000FF, mentre 000000 corrisponde al nero e FFFFFF al bianco).
Daniele Fusi – bozza cap. 3 (HTML)
22
spazi e le andate a capo fra questi componenti non sono rilevanti, e sono di norma inseriti per aumentare la
leggibilità del codice:
selector {
property: value;
property: value;
...
}
I selector possono essere di varia natura, e anche solo una breve elencazione dei principali tipi consente di
immaginare la potenza di un simile modello ai fini della selezione della porzione di documento HTML desi-
derata:
selector esempio descrizione esempio HTML
semplice p seleziona tutti gli elementi p. <p>paragrafo</p>
classe .abc seleziona tutti gli elementi dotati di attributo class con valore uguale
a “abc”. L’attributo class può essere applicato a qualsiasi elemento HTML, sicché questo consente notevole libertà nella marcatura.
<p class="abc">paragrafo</p>
... <div
class="abc"><p>blocco</p></div>
p.abc seleziona tutti gli elementi p dotati
di attributo class con valore uguale a “abc”.
<p class="abc">paragrafo</p>
ma non seleziona: <div
class="abc"><p>blocco</p></div>
ID #abc seleziona l’elemento dotato di attributo id con valore uguale a
“abc”. L’attributo id può essere applicato a qualsiasi elemento HTML ma dovrebbe essere unico in ciascuna pagina (viene usato di norma per interagire con uno specifico elemento utilizzando programmi in JavaScript).
<p id="abc">
p#abc seleziona l’elemento p dotato di
attributo id con valore uguale a “abc”.
<p id="abc">
gruppo h1, h2,
h3
seleziona tutti gli elementi h1
oppure h2 oppure h3.
<h1>titolo</h1>
<h2>titolo</h2>
<h3>titolo</h3>
ma non seleziona: <h4>titolo</h4>
contestuali div p seleziona tutti gli elementi p discendenti (diretti o indiretti) da un elemento div.
<div><p>...</p></div>
<div><blockquote><p>...</p></blockq
uote></div>
div > p seleziona tutti gli elementi p diretti
discendenti di un elemento div.
<div><p>...</p></div>
ma non seleziona: <div><blockquote><p>...</p></blockq
uote></div>
p ~ p seleziona tutti gli elementi p
adiacenti ad altri elementi p.
<div><p></p><p></p></div>
<div><p></p><hr/><p></p></div>
p + p seleziona tutti gli elementi p immediatamente adiacenti ad altri elementi p.
<div><p></p><p></p></div>
ma non seleziona: <div><p></p><hr/><p></p></div>
alcuni esempi di tipi di selector CSS
Daniele Fusi – bozza cap. 3 (HTML)
23
Anche solo questo (incompleto) elenco mostra come sia possibile specificare in gran dettaglio la precisa for-
mattazione da attribuire a ciascuna porzione di codice HTML, tenendo conto di tutti gli aspetti contestuali
necessari; per citare un esempio concreto si può ricordare il codice HTML con CSS incluso nel tag style
dell’intestazione usato sopra per mostrare l’applicazione concreta di vari tag:
body {
font-family:"Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida
Sans", Arial, sans-serif;
}
h1 {
font-size:1.1em;
font-family:Arial, Helvetica, sans-serif;
}
span.title {
font-style:italic;
}
blockquote {
font-style:italic;
font-family:"Times New Roman", Times, serif;
}
div#contact {
font-size:0.8em;
margin-left:2em;
margin-right:2em;
background-color:#CCCCCC;
}
div#contact p {
margin:0;
}
table {
font-size:0.9em;
}
table caption {
background:silver;
color:white;
}
td {
border:1px silver solid;
}
codice CSS di esempio
Qui si indica una formattazione generale per tutti i tag inclusi in body, ovvero in pratica per tutta la pagina
(selector body in alto); si danno poi regole per formattare titoli di primo livello (h1), citazioni (blockquote),
tabelle (table) e celle di tabella (td); si fa inoltre riferimento a solo quegli elementi span dotati di attributo
class il cui valore sia “title” (span.title), e all’elemento div il cui attributo id valga “contact”, che risulta
nel riquadro a fondino grigio in fondo alla pagina nell’esempio. Al suo interno trovano posto dei paragrafi di
testo, la cui formattazione deve essere distinta dai normali paragrafi usati altrove, anzitutto perché non
devono avere margini fra l’uno e l’altro ma apparire di seguito in modo compatto: pertanto si usa un selector
contestuale div#contact p che indica tutti i tag p discendenti di un tag div il cui attributo id sia uguale
a contact. In altri termini, questa espressione consente di formattare in modo diverso solo i paragrafi
contenuti nel blocco a fondo pagina, cui viene attribuito appunto un margine uguale a zero (ovvero nessun
margine).
Collocazione
Nell’esempio qui citato, per semplicità il codice CSS si trova direttamente inserito nell’intestazione della
pagina HTML (elemento head): una simile posizione riguarda quello che si dice un embedded CSS, cioè del
codice CSS inserito direttamente nella pagina. Di norma però il codice CSS si trova memorizzato in un file (o
più file) a parte, cui tutte le pagine HTML fanno riferimento (external CSS): questo consente di mantenere in
Daniele Fusi – bozza cap. 3 (HTML)
24
modo completamente indipendente gli stili da un lato e tutte le pagine dall’altro, senza dover modificare
queste ultime in alcun modo, quali che siano i cambiamenti della veste grafica che si desidera apportare.
Ogni pagina si riferisce in tal caso al suo foglio di stile CSS tramite un tag link, sempre contenuto nell’in-
testazione, del tipo di quello citato nell’esempio:
<!DOCTYPE html>
<html>
<head>
...
<link href="styles/web.css" rel="stylesheet" type="text/css" />
...
</head>
collegamento a un foglio di stile CSS dall’intestazione di una pagina web
In questo caso il file contenente gli stili si trova a parte nella cartella styles, col nome di web.css, come
specificato dall’attributo href (=hyperlink reference) del tag link17. Un ulteriore attributo di questo ele-
mento, chiamato media, consente peraltro di specificare i media cui la formattazione è destinata, sicché
diviene possibile creare due vesti tipografiche del tutto diverse per ogni pagina semplicemente specificando
valori diversi: ad esempio si potrebbe rinviare al foglio di stile web.css per il medium del web (la normale
navigazione con un browser), e al foglio print.css nel caso la pagina debba essere stampata (il che implica
tipicamente la rimozione delle evidenziazioni dei collegamenti ipertestuali e di tutte quelle porzioni di
contenuto connesse alla navigazione e inutili su carta, oltre che di colori e fondi diversi dal bianco)18.
In casi limite, quando per qualche motivo si desidera attribuire una formattazione estremamente specifica
a un singolo elemento della pagina, è possibile anche inserire del codice CSS direttamente nell’attributo
style di qualsiasi tag HTML (inline CSS), ad esempio:
<p style="color:red;font-weight:bold">rosso e grassetto</p>
Questa collocazione comunque di norma viene evitata proprio perché condurrebbe a quella commistione di
marcatura logica (affidata all’HTML) e tipografica (affidata al CSS) che l’introduzione di CSS ha consentito di
evitare19.
Ovunque sia collocato il foglio di stile CSS comunque il browser lo riceve in qualche modo così come riceve
il codice HTML rappresentante la pagina web, lo interpreta (così come parallelamente interpreta il codice
HTML) e applica le regole di formattazione da esso specificate alla pagina visualizzata. Il principale incon-
veniente pratico di questa tecnologia sta appunto proprio nelle diverse implementazioni fornite dai vari web
browser del medesimo standard, quale che ne sia il motivo (lacune e omissioni nella definizione dello
standard, fraintendimenti dello standard stesso da parte dei suoi destinatari, o semplici errori di programma):
pertanto nessun browser rende graficamente la stessa pagina esattamente allo stesso modo, anche se per lo
più simili differenze sono talmente lievi da non essere avvertibili dagli utenti. Non tutti i browser poi sono
17 Nell’esempio poi per completezza segue anche un ulteriore codice CSS embedded nell’elemento style, ma di norma le due collocazioni sono alternative. 18 Esiste inoltre la possibilità di tenere in considerazione il diverso tipo di medium negli stessi selettori di uno stile CSS con la regola @media, che consente quindi di trattare diversi media nello stesso foglio di stile piuttosto che in due fogli
paralleli completamente distinti. Ad esempio, un selettore @media print definisce uno stile che si applica solo nel caso la pagina venga stampata; è il browser stesso a definire un valore per il medium utilizzato, selezionando lo stile appropriato quando l’utente decide di stampare la pagina. 19 Quando si desidera attribuire una specifica formattazione a un singolo elemento della pagina è sufficiente attribuire a questo elemento un attributo id con un valore univoco (ad es. “specialparagraph”), e poi creare una definizione di
stile per quel valore (#specialparagraph { ... }).
Daniele Fusi – bozza cap. 3 (HTML)
25
altrettanto avanti nell’implementare tutti gli aspetti dello standard, anche se i maggiori fra essi risultano oggi
molto più coerenti e allineati.
Gerarchie: cascata e ereditarietà
Il termine “cascading” indica la gerarchia con cui gli stili definiti vengono ereditati “a cascata” ed even-
tualmente sostituiti di foglio di stile in foglio di stile: in assenza di un esplicito foglio di stile infatti ogni web
browser ne applica alle pagine visitate uno predefinito (browser stylesheet); a sua volta, ogni utente del
browser può personalizzare vari aspetti della visualizzazione di una pagina, e questo costituisce il secondo
livello nella gerarchia (user stylesheet), che modifica alcuni aspetti del precedente; infine, l’autore di un sito
web di norma applica un suo foglio di stile alle proprie pagine, che costituisce il terzo livello (author
stylesheet) e sostituisce tutti gli aspetti desiderati dei fogli precedenti. In generale dunque in caso di conflitto
le regole di applicazione degli stili definite nel foglio di stile dell’autore hanno la precedenza su quelle definite
nel foglio di stile dell’utente e del browser, e lo stesso vale per le regole definite nel foglio di stile dell’utente
rispetto a quelle del browser.
L’ordine di precedenza di applicazione delle regole che determina la “cascata” si basa quindi essen-
zialmente sul principio che la regola più specifica o più vicina all’elemento selezionato prevale: ogni volta che
si incontra una regola più recente o più specifica essa ha la precedenza su quelle meno recenti o più generali;
tutte le regole di stile che non sono in conflitto vengono accumulate, per cui se una specifica il colore rosso
e una seconda lo stile grassetto, il risultato sarà rosso e grassetto; se invece una specifica il rosso e una
seconda più specifica o più recente il colore blu, il risultato sarà blu.
Molte proprietà definite da uno stile CSS sono infatti ereditarie, nel senso che in mancanza di indicazione
contraria vengono applicate non solo all’elemento selezionato ma anche a tutti gli elementi in esso contenuti
nella gerarchia di HTML; per lo più si tratta delle proprietà legate al testo, come colore, tipo e stile di
carattere, allineamento e indentazione, etc. Questa ereditarietà (inheritance) evita quindi al creatore del
foglio CSS di dover ridefinire queste proprietà più e più volte, snellendo il codice corrispondente. Ad esempio,
si consideri un frammento HTML come:
<p>Questo è un paragrafo in colore <em>rosso</em>.</p>
cui si applica questo stile CSS:
p { color: red; }
in tal caso il selector della regola specifica che tutti i paragrafi (tutti i tag p) dovranno ricevere il colore rosso.
Il risultato sarà dunque che l’intero testo del paragrafo riportato sopra risulterà rosso, incluso anche quello
contenuto nell’elemento span all’interno dell’elemento p: questo accade appunto in virtù dell’ereditarietà,
per cui l’elemento span eredita il colore rosso dall’elemento p che lo include. Per impedire questo effetto e
mantenere l’elemento span in nero (colore predefinito nel foglio di stile del browser) si dovrebbe aggiungere
al CSS una nuova regola, del tipo p span { color: black; }, a indicare esplicitamente il colore di un
elemento span incluso in un elemento p.
Interattività: Javascript
Allo scopo di fornire una maggiore interattività agli utenti di un sito web, sin dalla fine degli anni Novanta
del secolo scorso si è sviluppato un apposito linguaggio di programmazione poi implementato all’interno di
ogni moderno internet browser, noto come Javascript (abbreviato in JS). Benché il suo nome richiami un altro
linguaggio di programmazione di uso molto più generale (Java), esso ne è indipendente, ed è stato creato
con lo scopo primario di interagire con la marcatura di una pagina HTML, operando all’interno di un browser:
Daniele Fusi – bozza cap. 3 (HTML)
26
questa può contenere direttamente il codice del programma (un testo di norma contenuto all’interno di un
tag script), o rimandarvi includendo un file esterno similmente a quanto accade con CSS.
Ad esempio, in una pagina HTML si possono visualizzare ora e data correnti (nel computer client) con un
codice Javascript simile a questo:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Esempio JS</title>
</head>
<body>
<h1>JavaScript Sample</h1>
<script type="text/javascript">
document.write("<p>" + Date() + "</p>");
</script>
</body>
</html>
script che visualizza data e ora correnti all’interno della pagina
In questa semplicissima pagina, all’interno del tag body si trova un tag script con una singola istruzione in
linguaggio Javascript, che istruisce il browser a generare in quel punto del documento un paragrafo il cui
contenuto è il risultato della funzione Date, cioè appunto data e ora correnti. Ogni volta che si accede alla
pagina dunque essa conterrà data e ora aggiornate.
Ancora, si consideri questo codice HTML:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Esempio JS</title>
<script type="text/javascript">
function sayHi()
{
var d = new Date();
var t = d.getHours();
var msg;
if (t < 13)
{
msg = "Buongiorno";
}
else
{
msg = "Buonasera";
}
msg = msg + ", sono le ore " + d.toLocaleTimeString();
document.getElementById("target").innerHTML = msg;
}
</script>
</head>
<body>
<h1>Esempio di JavaScript</h1>
<p>In questo esempio, JavaScript modifica un tag esistente. Il mio saluto è:
<span id="target" style="font-weight: bold;color:red">[clicca sul
pulsante]</span>.</p>
<button onclick="sayHi()" type="button">Mostra saluto</button>
</body>
</html>
esempio di programma JavaScript in una pagina HTML
Daniele Fusi – bozza cap. 3 (HTML)
27
In questo caso all’interno del tag head si trova una funzione in linguaggio Javascript, chiamata sayHi, il cui
compito è di generare un messaggio di saluto variabile a seconda dell’ora, e visualizzarlo all’interno del
contenuto già esistente nella pagina HTML, al posto del testo “[clicca sul pulsante]”. Questo testo si trova
all’interno di un tag span, con un attributo id utilizzato dal programma per identificarlo in modo univoco
all’interno della pagina. Inoltre, è presente un pulsante che quando premuto (attributo onclick) richiama
la funzione citata (onclick="sayHi()"). Questo fa sì che quando l’utente clicca il pulsante il contenuto del
tag span (a sua volta incluso in un paragrafo) venga sostituito da un messaggio variabile, che inizia per
“Buongiorno” se l’ora è anteriore alle 13 e con “Buonasera” in caso contrario, e termina con l’indicazione
dell’ora. Se si osserva il contenuto della funzione nel tag script in effetti i comandi si possono descrivere
come segue:
var d = new Date(); crea una variabile chiamata d e memorizzaci il valore della data e ora correnti
var t = d.getHours(); estrai in una variabile chiamata t l’ora corrente dalla variabile d appena creata
var msg; crea una variabile chiamata msg, destinata a contenere il messaggio di saluto
if (t < 13) msg =
"Buongiorno";
se l’ora è minore di 13, assegna al messaggio il valore di “Buongiorno”
else msg = "Buonasera"; altrimenti assegna al messaggio il valore di “Buonasera” msg = msg + ", sono le ore "
+ d.toLocaleTimeString();
aggiungi al messaggio l’indicazione dell’ora, tratta dalla variabile che la contiene (d)
document.getElementById("tar
get").innerHTML = msg;
recupera l’elemento HTML con attributo id uguale a target e cambia il suo contenuto impostandolo al valore della variabile contenente il messaggio. Questo effettivamente visualizza il messaggio al posto del testo originariamente presente nel tag span dell’esempio.
In un browser HTML, la pagina appare anzitutto come nella figura riportata qui sotto:
Quando l’utente clicca sul pulsante “Mostra saluto”, la pagina già caricata viene modificata sul momento dal
programma JavaScript:
Questo banale esempio è sufficiente a mostrare come l’aggiunta di codice Javascript a una pagina HTML
consenta di manipolare a piacimento il contenuto della pagina e offrire un’esperienza molto più interattiva
all’utente: oltre a semplici ausili visivi, che modificano l’apparenza della pagina in base all’input dell’utente e
di norma sono limitati al computer client, senza dialogo di sorta con il server (ad es. effetti allo spostamento
del mouse, visualizzazione o nascondimento di parti, transizioni animate, etc.), grazie a tecnologie come
AJAX20 Javascript viene utilizzato anche per interagire in modo più dinamico con il server, inviando richieste
e recuperando dati in seguito alle operazioni compiute dal visitatore.
20 AJAX è un acronimo (Asynchonous JavaScript and XML) coniato nel 2005 (J. GARRETT, Ajax: A New Approach to Web Applications, in http://www.adaptivepath.com/publications/essays/archives/000385.php), e indica l’uso innovativo di una serie di tecnologie esistenti, fra cui anzitutto JavaScript e XML, ma anche DOM, CSS, XSLT, etc. Lo scopo principale
Daniele Fusi – bozza cap. 3 (HTML)
28
Inconvenienti e JavaScript non intrusivo
Quanto però evidenziano questi esempi è anche un tipo di commistione di contenuti profondamente
diversi, al pari di quanto avveniva per la formattazione della pagina prima dell’introduzione di CSS: in effetti,
si tratta qui di mischiare gli ormai consolidati tag puramente logici a tag di script contenenti funzioni di un
programma, e ancor peggio di inquinare gli stessi tag sparsi per la pagina con attributi che li connettono a
una qualsiasi di queste funzioni: si pensi ad esempio al caso dell’attributo onclick, che contiene la chiamata
a una funzione o anche direttamente del codice JavaScript (proprio come si può inserire del codice CSS dentro
un attributo style nel tag stesso cui si deve applicare, nel caso visto sopra della sua collocazione inline).
Specie in passato, era in effetti molto facile che la quantità di codice Javascript proliferasse a tal punto da
risultare altrettanto invasiva della marcatura logica HTML quanto lo era la marcatura tipografica prima
dell’introduzione di CSS, con gli stessi problemi riguardanti manutenzione, leggibilità e pesantezza delle
pagine così realizzate. Si deve poi considerare che qui si tratta di veri e propri piccoli programmi infram-
mezzati a marcature di un documento, la cui dispersione, frammentarietà e ripetitività rende particolarmente
difficile la loro lettura, eventuale correzione e manutenzione nel corso del tempo da parte dei program-
matori.
Si pensi ad esempio a un pulsante che una volta premuto cambi in rosso il colore di un elemento: non era
raro che un simile comportamento venisse codificato in Javascript direttamente inline, causando una
completa commistione di piani, come in questo esempio, dove il grassetto evidenzia la porzione di marcatura
usata per ottenere questo tipo di interazione:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>JavaScript intrusivo</title>
</head>
<body>
<p id="message">Messaggio che diviene rosso</p>
<button type="button"
onclick="document.getElementById('message').style.color='red';">premere
qui</button>
</body>
</html>
esempio di JavaScript intrusivo: nell’attributo onclick del pulsante (button) viene inserito il
codice JavaScript da eseguire quando esso venga premuto: nel documento corrente viene localizzato l’(unico) elemento il cui attributo id ha il valore di “message” (qui appunto il paragrafo precedente)
e viene quindi cambiato il suo stile CSS in modo da visualizzarlo in rosso.
Qui certo si fa uso di CSS (cambiando lo stile dell’elemento da modificare) piuttosto che del deprecato tag
font per cambiare colore, sicché si evita la commistione di forma e contenuto, ma si produce comunque
quella di comportamento (come codificato da JavaScript) e contenuto. Allo scopo di evitare tale commistione
della tecnologia è di rendere le applicazioni web molto più responsive, superando il problema del ritardo inevitabilmente connesso al nuovo caricamento dell’intera pagina web a ogni azione dell’utente. Alla base di AJAX sta la capacità dei moderni browser di gestire una comunicazione asincrona fra client e server: il client può inviare una richiesta e continuare con le sue altre operazioni, senza dover attendere che arrivi una risposta, intervallo durante il quale la sua interfaccia rimarrebbe “congelata” per l’utente. Ad esempio, si pensi a una pagina web contenente un elenco di regioni e province italiani in due diverse caselle a discesa: quando si seleziona una regione nella prima casella devono apparire tutte le sue province nella seconda. Utilizzando JavaScript si può dunque reagire alla selezione di una regione inviando una richiesta asincrona al server tramite AJAX; il server recupera i dati, li invia in risposta, e lo script la riceve e ne utilizza i dati per riempire la seconda casella, senza che la pagina esistente debba essere ricaricata. Questo rende l’intero processo molto più responsivo, e avvicina l’esperienza dell’utente a quella di una normale applicazione desktop, priva di percettibili ritardi dovuti alla comunicazione client-server.
Daniele Fusi – bozza cap. 3 (HTML)
29
e tutti i suo effetti negativi, oggi si tende piuttosto a adottare un tipo di scripting non intrusivo, capace di
rimanere segregato in una specifica area centralizzata del documento, piuttosto che essere disperso e
frammentato al suo interno. Anche se le tecnologie più recenti fanno uso di veri e propri ambienti di sviluppo
assai più complessi e potenti creati per nuove generazioni di applicazioni web (si veda oltre in questo
capitolo), per riprendere il banale esempio precedente limitandosi a poche righe, lo stesso comportamento
potrebbe essere ottenuto modificando il codice come qui:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>JavaScript non intrusivo</title>
<script type="text/javascript">
window.onload = function() {
document.getElementById('btnTest').onclick = function() {
document.getElementById('message').style.color = 'red'; }; };
</script>
</head>
<body>
<p id="message">Messaggio che diviene rosso</p>
<button type="button" id="btnTest">premere qui</button>
</body>
</html>
esempio di JavaScript non intrusivo: il codice viene relegato nell’intestazione, e all’atto del caricamento della pagina nel browser inietta altro codice negli elementi da rendere interattivi (a
questo scopo questi ultimi ricevono un attributo id per poter essere manipolati dal programma).
Qui lo script è stato completamente rimosso dal corpo del documento HTML, che risulta molto più snello e
leggibile, e spostato nell’instestazione (head): l’unica aggiunta all’elemento button è un attributo id che lo
identifica in modo univoco in modo che sia richiamabile dal codice di programma. Questo viene eseguito al
caricamento della pagina nel browser (window.onload), localizza il pulsante cui assegnare il comporta-
mento desiderato (tramite la funzione getElementById, che recupera l’elemento dotato dell’attributo id
col valore specificato), e ve lo inietta assegnandovi un attributo onclick col valore corrispondente al codice
da eseguire. In pratica, è come se si fosse scritto il codice dell’esempio precedente, ma la pagina web in sé
ora ha segregato lo script in modo da non inquinare con esso la sua struttura, ed è lo stesso codice che inietta
se stesso dove richiesto all’atto del caricamento della pagina.
In applicazioni web reali sono altre le tecniche e i sistemi di sviluppo per ottenere simili risultati (e molto
altro), ma anche questo semplice esempio è sufficiente a mostrare come per via di diverse tecnologie si vada
convergendo nel comune obiettivo di separare il più possibile ogni componente logicamente distinto di una
pagina web: il contenuto, la cui stuttura spetta a HTML; la sua presentazione grafica, che spetta a CSS; e il
suo comportamento, codificato da Javascript ma in modo da risultare non intrusivo e rimanere relegato
all’intestazione. In una diffusa metafora linguistica, è come se HTML corrispondesse ai sostantivi che
definiscono la struttura e il contenuto del documento, CSS agli aggettivi che li caratterizzano, e Javascript ai
verbi che li manipolano.
HTML 5
HTML 5 ha sostituito l’evoluzione di XHTML21, XHTML 2, che dopo uno sviluppo pluriennale è stato abban-
donato a favore di una soluzione più pratica e compatibile. XHTML non era che HTML 4.01 riscritto secondo
le (più rigide) regole sintattiche di XML (per cui ad esempio i tag devono essere tutti minuscoli, non si possono
avere tag mancanti di chiusura neppure quando vuoti, e una qualsiasi malformazione sintattica pregiudica
21 Su XHTML si veda più oltre la sezione dedicata al linguaggio XML, di cui XHTML è un dialetto.
Daniele Fusi – bozza cap. 3 (HTML)
30
l’intero documento); di fatto dunque si tratta di un dialetto XML. XHTML 2 invece, avviato nel 2002, era nato
come uno standard completamente nuovo per favorire una natura molto più semantica del web. Tuttavia il
suo più grande limite, oltre alla lunghezza della sua gestazione, è stato rappresentato dalla sua incompa-
tibilità con HTML: si è già visto trattando ad esempio di Unicode come offrire soluzioni compatibili sia spesso
una delle preoccupazioni più rilevanti per una nuova tecnologia di tale diffusione. Proprio a causa di ciò, dal
2004 un gruppo (noto con l’acronimo di WHATWG22) formato da una serie di aziende operanti nel settore del
web, in disaccordo con il prevalente favore accordato dal W3C al futuro XHTML 2.0, ha iniziato a lavorare a
una serie di specifiche per dar nuova vita allo standard HTML piuttosto che sostituirlo con qualcosa di
completamente nuovo. Queste specifiche hanno costituito poi la base su cui il W3C ha sviluppato HTML 5
dopo l’abbondono di XHTML 2.0, decretandone così di fatto dal 2007 la fine.
HTML 5 si pone dunque come una nuova versione di HTML capace di soddisfare tutte le principali esigenze
evidenziate dalle prassi comuni dei creatori dei siti, e insieme imprimere una decisa direzione semantica e
orientata alle applicazioni web; con questa versione peraltro lo standard HTML è ormai più maturo, e i
browser tendono piuttosto a uniformarsi alla sua evoluzione piuttosto che anticiparla come in passato, anche
perché comunque questa riflette da vicino la prassi riscontrata nell’uso dello standard stesso.
Fra le principali novità di HTML 5 sono una generale semplificazione, nuovi tag per una più articolata e
semantica definizione di blocchi, e una migliore gestione dell’interazione con l’utente nelle form, senza
costringere più al ricorso a script per banali operazioni divenuto ormai di prassi comune.
Interattività
HTML utilizza il tag form per definire una sorta di modulo elettronico articolato in campi che l’utente
riempie con dati di varia natura per poi inviarli al server: si pensi ad esempio al modulo di registrazione a un
sito web, dove si richiedono dati come nome, cognome, email, indirizzo, etc., per i quali bisogna assicurarsi
che vengano forniti valori e che questi siano validi. Tutta una serie di compiti richiesti da questo tipo di opera-
zione risultano assai ripetitivi, e sono tradizionalmente svolti da JavaScript (ad es. evidenziare i campi obbli-
gatori che non sono stati riempiti, limitare il tipo di contenuto di un campo, magari per includere solo numeri
e non lettere, visualizzare elementi di interfaccia variabili a seconda del contenuto, etc.). HTML 5 invece offre
supporto integrato per tutte queste operazioni: alcuni esempi concreti possono mostrare il tipo di aggiunte,
che in alcuni casi possono sembrare insignificanti, ma contribuiscono sensibilmente a diminuire il ricorso a
JavaScript per realizzare aspetti ormai ritenuti caratteristici di una moderna interfaccia utente.
Ad esempio, l’attributo placeholder consente di specificare il testo che in molte moderne interfacce
appare a mo’ di filigrana in una casella destinata a ricevere l’input dell’utente, per indicare il tipo di dato
desiderato, come in questa figura23:
In questo esempio l’utente è invitato a digitare nella casella le parole da cercare nel motore di ricerca
specificato dal testo in filigrana, in tal caso Google: non appena si digita qualcosa il testo in filigrana scompare
e viene sostituito da quello inserito dall’utente, per tornare visibile quando questo venga cancellato. Si tratta
di un modo efficace di aiutare l’utente dell’interfaccia a comprendere le funzioni delle sue varie componenti
senza appesantirla con didascalie a sinistra o sopra ciascuna casella, rendendo l’insieme più compatto e più
immediato da utilizzare. In precedenza un simile effetto era realizzato con l’ausilio di JavaScript, sicché era
22 Web Hypertext Application Technology Working Group. 23 Si tratta della casella di testo destinata alla ricerca su web in una delle versioni del browser Firefox.
Daniele Fusi – bozza cap. 3 (HTML)
31
necessario ripetere lo stesso codice in tutte le pagine destinate a utilizzarlo; in HTML 5 invece è sufficiente
aggiungere un attributo all’elemento indicante la casella di testo, come in questo esempio:
<form>
...
<input name="txtSearch" placeholder="Google">
...
</form>
attributo placeholder nell’elemento input di una form HTML 5
Ancora, è comune utilizzare JavaScript per selezionare automaticamente al caricamento della pagina
l’elemento della form in esso contenuta che deve ricevere l’input,24 in modo da evitare che l’utente debba
esplicitamente cliccare con il mouse nella casella di testo prima di iniziare a digitare. Questo viene comu-
nemente realizzato nelle pagine dei motori di ricerca, che appena caricate consentono subito di digitare il
testo nella casella apposita, senza dovervi prima cliccare; un semplice script per questo scopo (opportuna-
mente collocato nella pagina in modo da essere attivato al termine del suo caricamento) sarebbe simile a:
document.getElementById("txtSearch").focus();
JavaScript per spostare il focus alla casella di testo dal nome txtSearch
Oltre al consueto inconveniente di dover ripetere il medesimo codice per ogni pagina, ulteriori difficoltà
dell’approccio tradizionale consistono nella diversa implementazione di ciascun browser, che ha spesso per
effetto spostamenti con modalità o tempi non desiderati dall’utente. Ad esempio, se la pagina HTML è
piuttosto pesante e impiega qualche secondo per essere caricata completamente, può accadere che nel
frattempo un utente più esperto abbia già iniziato a interagire con altri controlli della pagina, quando
improvvisamente il focus viene spostato dallo script, attivato quando la pagina risulta completa,
interrompendo così quanto l’utente stava facendo. In HTML 5 invece un apposito attributo (del tipo <input
name="txtSearch" placeholder="Google" autofocus>) non solo evita il ricorso allo script ma
garantisce anche uniformità di comportamento.
Inoltre, HTML 5 aggiunge una maggiore caratterizzazione semantica alle caselle destinate a ricevere input
dall’utente: ad esempio, invece del generico elemento <input type="text"> per indicare un testo
qualsiasi si può specificare meglio il tipo di input richiesto nel caso si tratti di un indirizzo di posta elettronica
(<input type="email">), o un URL (<input type="url">), consentendo così ai browser
comportamenti più appropriati25. Si possono poi limitare i valori accettabili tra gli infiniti digitabili dall’utente,
specificando un tipo di input numerico e definendone vari attributi, come in questo frammento di codice:
<input type="number" min="1" max="31" step="2">
codice HTML 5 per limitare i valori ammissibili di una casella di testo a contenuto numerico
Qui si indica che ci si attende che il testo digitato dall’utente corrisponda a un numero (e dunque in quanto
tale non debba contenere lettere, spazi, o simili), e non a un numero qualsiasi, bensì a un qualsiasi numero
dispari (step="2" indica l’incremento ammesso passando dal minimo al massimo) compreso fra 1
(min="1") e 31 (max="31"); anche in tal caso tradizionalmente simili controlli venivano effettuati con
l’ausilio di uno specifico script, sì da evitare che l’utente digitasse valori non ammessi dal sistema. Sullo stesso
piano della convalida dei dati inseriti dall’utente si possono inoltre usare nuovi attributi come required,
24 Tecnicamente si parla in questi casi di spostamento del focus, che indica il componente di un’interfaccia utente grafica attualmente selezionato per ricevere l’input. 25 Ad esempio i browser di dispositivi portatili touchscreen possono visualizzare delle diverse tastiere virtuali a seconda del tipo di casella: nel caso ad esempio di un indirizzo di posta elettronica verrà visualizzato un tasto per il carattere @, nel caso di un URL mancherà il tasto per lo spazio (che non può trovarsi all’interno di un URL), etc.
Daniele Fusi – bozza cap. 3 (HTML)
32
che indica che il dato rappresentato dall’elemento deve essere obbligatoriamente inserito. In tal modo
diviene possibile demandare al browser stesso invece che a complicato codice JavaScript il compito di
convalidare i dati inseriti dall’utente ancor prima che i dati siano inviati al server26.
È anche possibile visualizzare un controllo grafico diverso da una casella di testo, con la stessa funzione,
semplicemente cambiando l’attributo type in range, sì da mostrare il tipico controllo slider come in figura:
Similmente, HTML 5 offre controlli specializzati per l’inserimento di data e ora tramite le ormai consuete
interfacce di selezione, per tramite di un calendario interattivo: semplicemente cambiando il tipo di input
in uno dei nuovi valori (date, time, datetime, etc.) si ottiene una completa interfaccia sul tipo di quella in
figura27, senza alcun bisogno di ricorrere a complessi script:
selezione della data in HTML 5 (Opera)
Lo stesso accade per la selezione di un colore; in tal caso il valore dell’attributo type è color, che corrisponde
a un’interfaccia simile a questa:
26 In genere si distinguono due tipi di convalida dei dati: sul lato client e sul lato server. Nel primo caso il controllo viene effettuato tramite JavaScript (o tramite i nuovi tag di HTML 5), direttamente nel computer client, ancora prima di inviare dati al server. In tal modo si evita un inutile invio di dati che sarebbero comunque rifiutati in quanto non validi, e si ottiene una risposta immediata a ogni azione dell’utente (spesso addirittura durante la stessa digitazione). In un sistema implementato correttamente comunque questo non sostituisce i controlli a livello di server, sui dati ricevuti dal client (anche per motivi di sicurezza, in quanto potrebbe esser possibile per un utente smaliziato bypassare il controllo sul lato client); in tal caso i dati scorretti sono rifiutati e viene generata una nuova pagina con gli opportuni messaggi di errore e i dati da correggere. 27 In questi esempi riporto la resa del browser Opera, che al momento di scrivere è l’unico a supportare i nuovi tag HTML 5 di cui si tratta qui.
Daniele Fusi – bozza cap. 3 (HTML)
33
selezione di un colore in HTML 5 (Opera)
Un altro aspetto che evidenzia bene la tendenza di HTML 5 a supportare funzioni latamente diffuse ma
prima di esso implementabili solo grazie a componenti software aggiuntivi (plugin come ad es. Flash o
Silverlight) è rappresentato da un nuovo tag destinato a contenere direttamente un filmato; è infatti
sufficiente inserire il tag video, come in questo esempio:
<video width="320" height="240" controls="controls">
<source src="sample.ogg" type="video/ogg" />
<source src=" sample.mp4" type="video/mp4" />
<source src=" sample.webm" type="video/webm" />
Il tuo browser non supporta HTML 5.
</video>
inserimento di un filmato in HTML 5: si noti che lo stesso filmato è disponibile in diversi formati, selezionati automaticamente dal browser utilizzato. Qualora si utilizzi un browser non compatibile
con HTML 5 viene invece visualizzato il messaggio all’interno del tag video.
per visualizzare nella pagina un filmato con i relativi controlli per la riproduzione (riproduzione, pausa,
interruzione e volume) direttamente da parte del browser, senza alcun componente aggiuntivo. Similmente
accade per brani audio, che possono essere inseriti in una pagina grazie al semplice tag audio.
Semanticità
Sul piano della semanticità, anzitutto gli aspetti deprecati come obsoleti dalle precedenti versioni di
HTML, in primo luogo le marcature tipografiche, sono di fatto completamente abbandonati, in quanto ormai
sostituiti dall’uso di CSS. Rispetto alla versione 4 dello standard poi si può facilmente notare una prolife-
razione di tag logici che va nella direzione di una maggiore specializzazione di ciascuno di essi, piuttosto che
limitarsi a soli tag generici come div, che rappresentano un semplice blocco di contenuto senza ulteriore
caratterizzazione.
La maggiore semantizzazione dei blocchi consente anzitutto una più efficace analisi da parte dei motori di
ricerca, che possono identificare meglio le varie sezioni di ogni pagina, e rappresenta un punto di partenza
per il web semantico. Invece del solo generico div, si introducono tag capaci di meglio descrivere
semanticamente la funzione di ogni blocco, come header (intestazione, a qualunque livello e in qualunque
numero di occorrenze nella pagina), footer (contenente le tipiche informazioni presenti di solito a pie’ di
pagina28, come copyright, collegamenti correlati, dati sull’autore, etc.), section (una sezione dal contenuto
28 In questo come in qualsiasi altro caso non ci si deve far fuorviare dalla apparente connessione dei nomi dei nuovi tag a elementi di impaginazione: un elemento come footer infatti è così denominato solo in virtù del proprio contenuto,
Daniele Fusi – bozza cap. 3 (HTML)
34
tematicamente omogeneo29, magari preceduto da un’intestazione a mo’ di titolo), article (un contenuto
simile a quello di section, ma in sé conchiuso tanto da risultare distribuibile in modo indipendente30),
aside (contenuto correlato ma non parte di quello principale della pagina), nav (area contenente controlli
per la navigazione come menu o simili), dialog (contenente un dialogo fra interlocutori, in cui la didascalia
di ogni interlocutore è rappresentata da un tag dt e il suo testo da un tag dd), figure (che può raggruppare
in modo esplicito una legenda – tag legend – con la sua immagine), etc. Anche questa breve panoramica
mostra come in effetti simili elementi derivino proprio dall’osservazione empirica condotta su milioni di siti
da parte dei creatori del nuovo standard, analizzando che tipo di elementi veniva usato per le diverse sezioni
della pagina e formalizzando queste osservazioni in una serie di nuovi elementi.
Ad esempio, si consideri una tipica pagina HTML 4 come quella definita dal codice riportato qui sotto:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Sample</title>
</head>
<body>
<div id="mainHeader">
<h1>Page Title</h1>
</div>
<div id="navigation">
<ul>
<li><a href="page1.htm">link 1</a></li>
<li><a href="page2.htm">link 2</a></li>
</ul>
</div>
<div id="content">
<div id="article">
<div id="articleHeader">Article Title</div>
<div id="figure">
<img src="image.jpg" alt="image">
<div id="legend">an image</div>
</div>
</div>
<div id="dialog">
<dl>
<dt>John</dt>
<dd>How are you?</dd>
<dt>Dan</dt>
<dd>Fine, thanks!</dd>
</dl>
<div>
</div>
<div id="aside">
<p>This is some text put aside from the rest of the page.</p>
</div>
<div id="footer">Today is october 8, 2010</div>
</body>
</html>
codice HTML 4 di esempio (si notino i tag div che definiscono le varie sezioni del documento)
che corrisponde a quanto di solito si trova in fondo a una comune pagina web, e non ha alcun rapporto con la sua effettiva disposizione all’interno della pagina. 29 Si noti che ancora una volta è sempre il contenuto a determinare (benché con un inevitabile margine di ambiguità) l’uso di un elemento piuttosto che di un altro: se ad esempio una parte della pagina deve essere trattata in modo omogeneo ai fini dell’impaginazione, ma non risulta avere un contenuto omogeneo, si deve piuttosto continuare a utilizzare il generico div ed evitare section, che implica invece un’organizzazione tematica dei contenuti. 30 L’esempio canonico è appunto proprio un articolo di giornale, o un post in un forum o in un blog.
Daniele Fusi – bozza cap. 3 (HTML)
35
Si tratta di una pagina strutturata come in figura:
struttura della pagina definita dal codice HTML di esempio
Come si vede, all’interno di body si utilizzano una decina di tag div, ciascuno dei quali dotato di un ruolo
semanticamente distinto, identificato da un attributo id, che consente poi al foglio di stile CSS di posizionare
e formattare ognuno secondo quanto desiderato: si succedono dunque i div relativi a titolo della pagina,
pannello di navigazione (con i menu per visitare le diverse sezioni del sito), contenuto (articolato a sua volta
in articolo, titolo dell’articolo, figura, sua legenda, dialogo), contenuto separato (ad es. un testo pubblicitario
estraneo al contenuto in senso stretto della pagina), e piede di pagina. Ciascuna di queste sezioni ha un ruolo
distinto e una collocazione e formattazione anche molto diversa; nondimeno, tutte sono identificate da un
unico, generico tag div, che non facilita la lettura del codice né tantomeno l’analisi semantica della pagina
(ad esempio da parte di motori di ricerca).
La stessa pagina in HTML 5 invece può avvalersi di tutti i tag specificamente definiti per le diverse sezioni,
tipiche della maggioranza dei siti web (header, nav, section, article, figure, legend, dialog, aside,
footer):
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="utf-8">
<title>Sample</title>
</head>
<body>
<header>
<h1>Page Title</h1>
</header>
<nav>
<ul>
<li><a href="page1.htm">link 1</a></li>
<li><a href="page2.htm">link 2</a></li>
</ul>
</nav>
<section>
<article>
<header>Article Title</header>
Daniele Fusi – bozza cap. 3 (HTML)
36
<figure>
<img src="image.jpg" alt="image">
<legend>an image</legend>
</figure>
</article>
<dialog>
<dt>John</dt>
<dd>How are you?</dd>
<dt>Dan</dt>
<dd>Fine, thanks!</dd>
<dialog>
</section>
<aside>
<p>This is some text put aside from the rest of the page.</p>
</aside>
<footer>Today is <time datetime="2010-10-08">october 8,
2010</time></footer>
</body>
</html>
codice HTML 5 che sostituisce ai generici div dei tag molto più caratterizzati in senso semantico
Anche all’interno del contenuto testuale poi nuovi tag consentono una marcatura semantica più appro-
fondita: ad esempio m indica un’enfasi generica, cui non corrisponde necessariamente una formattazione
diversa, time contiene un testo che rappresenta una indicazione cronologica (ad esempio una data, magari
accompagnando il testo con un esplicito attributo datetime dove la data appare in un formato leggibile
dalla macchina, come in <time datetime="2010-12-24T19:24:00">sera della vigilia di
Natale 2010</time>), meter contiene un valore numerico riferito a un determinato intervallo come un
prezzo o una distanza, anch’esso definibile in termini espliciti per la macchina per mezzo di vari attributi (min,
max, etc.), progress indica l’avanzamento di un’operazione che richiede un certo tempo per essere
completata, etc.
Motori di ricerca e SEO
Il deciso orientamento “semantico” di HTML 5 ha naturalmente un’enorme ricaduta positiva sulle
possibilità di ricerca offerte su Internet. Si è visto come la combinazione di diverse prassi e tecnologie (HTML
con le sue varie versioni, CSS, JavaScript non intrusivo) miri a separare il più nettamente possibile i diversi
componenti di una moderna pagina web (contenuti, forme, comportamenti): uno degli obiettivi costanti di
questo sforzo è rappresentato dalla semplificazione del codice HTML, che viene così liberato da tutti i compiti
estranei alla definizione della struttura logica del documento e risulta assai più snello e leggibile. Questo
vantaggio in leggibilità si traduce infatti anzitutto in una migliore abilità dei motori di ricerca nel determinare
i contenuti semantici di ciascuna pagina di ogni sito web, sì da offrire agli utenti di volta in volta sempre i
risultati più pertinenti. La maggioranza delle informazioni offerte oggi su internet infatti è ancora pubblicata
essenzialmente sottoforma di testo, sicché la determinazione della pertinenza di una pagina ai fini di una
ricerca si deve basare anzitutto sulle parole in esso contenute, escludendo tutto quanto non rilevante (a
cominciare dalla marcatura, di qualsiasi genere sia, che pure può influenzare l’analisi dei contenuti).
In principio Internet era costituita da un insieme di siti destinati a fornire o ricevere file tramite un apposito
protocollo di trasferimento dati (FTP = File Transfer Protocol), per cui occorreva conoscere l’esatto indirizzo
del file desiderato. Con l’espansione della rete comunque apparvero i primi sistemi di indicizzazione di questi
file, come Archie (1990), basati su semplici elenchi di nomi di file, cui in seguito si aggiunsero sistemi di
indicizzazione dei contenuti di file testuali (come Gopher, che risale al 1991), capaci di aiutare nell’individuare
Daniele Fusi – bozza cap. 3 (HTML)
37
più facilmente un documento in base al suo testo, e su questa via si è giunti (dal 1993) ai veri e propri motori
di ricerca31, sistemi altamente sofisticati basati su ricerche esemplate sul linguaggio naturale.
Dietro le quinte di un motore di ricerca sta anzitutto un processo di raccolta dei dati da tutte le pagine di
tutti i siti web accessibili (o del loro sottoinsieme per motori specializzati), e quindi una serie di algoritmi per
individuare al loro interno tutti i possibili indicatori del contenuto della pagina e indicizzarli e ricercarli
opportunamente. La raccolta dei dati viene effettuata da un componente software (variamente definito
crawler, spider o robot) che visita sistematicamente e continuamente ogni pagina accessibile su web e
raccoglie parole e frasi con sistemi più o meno complessi per poi riversarli in una banca dati: si tratta quindi
di quantità enormi di informazione, all’interno della quale occorre poi effettuare complesse analisi per
determinare quali siano le pagine più rilevanti per ogni ricerca effettuata, assegnando a ciascuna un
punteggio (score) che ne rappresenta sinteticamente l’importanza. I dettagli relativi al calcolo di questo
punteggio e della conseguente classifica (ranking) dei risultati di una ricerca, definita in modo che quelli più
rilevanti appaiano per primi, sono estremamente complessi e sviluppati in segreto dai diversi motori di
ricerca, e vanno soggetti a continue mutazioni per adattarsi all’evoluzione dei contenuti del web e alle
abitudini dei loro utenti. Interi volumi sono stati scritti sulle tecniche per sfruttare al meglio le caratteristiche
di questi algoritmi, per quanto si può dedurre dall’esterno sul loro funzionamento, in modo da posizionare il
proprio sito web fra i primi risultati di ciascun motore modificando opportunamente le pagine che le
compongono: questa pratica va sotto il nome molto ampio di SEO, Search Engine Optimization: non si tratta
infatti solo di valutare la pertinenza delle parole che compaiono in un sito, ma di considerare globalmente i
più vari aspetti che contribuiscono a fornire indizi sull’effettiva pertinenza di ciascuna pagina alla ricerca
effettuata.
I motori di ricerca in effetti prendono in considerazione un gran numero di parametri nel valutare la
pertinenza di ogni pagina di un sito web: anzitutto il contenuto del testo, pesando le parole chiave rispetto a
quelle meno semanticamente rilevanti, la frequenza e la natura di ogni parola (parole banali e di uso
estremamente comune hanno per certi aspetti meno rilevanza di parole più corpose e semanticamente più
marcate: si pensi ad esempio alla famosa legge di Zipf per cui la specificità di ogni parola è inversamente
proporzionale alla sua frequenza testuale), la loro posizione all’interno del testo, il loro contesto (la loro
associazione ad altre parole pertinenti secondo modelli più o meno complessi, la loro posizione e distanza
all’interno della pagina, etc.), i loro rapporti sinonimici, il tipo di marcatura che ricevono (ad es. una parola
usata in un titolo o in un collegamento ipertestuale sarà probabilmente più significativa che una usata nel
corpo del testo), etc. Si considerano comunque anche molti altri fattori che esulano dal testo in senso stretto,
come la connessione delle pagine fra loro all’interno del sito, e anche una serie di marcature non visibili al
visitatore ma specificamente prodotte per facilitare l’indicizzazione del sito (meta tag), come le parole chiave
inserite fra i metadati dal creatore della pagina32.
31 Sotto questa generica denominazione si classificano di solito i motori di ricerca primari (che coprono sostanzialmente tutto il web, come Google o Bing), secondari (orientati a pubblico più specializzato, come Lycos o Ask.com) e tematici (decisamente specializzati in un settore particolare, come viaggi, musica, mappe geografiche, etc.). Inoltre, rispetto al processo di raccolta di materiale si possono dare differenze fra quelli completamente basati su procedure automatiche (crawler) e quelli più o meno assistiti dall’intervento di lettori umani (Yahoo! è un esempio di motore nato in origine con questo metodo, partendo proprio dagli elenchi dei siti preferiti dei suoi fondatori). 32 Questo tipo di informazioni oggi ha una rilevanza molto minore nella misura in cui i creatori di pagine web tendevano ad abusarne per indurre un motore di ricerca ad assegnare un punteggio maggiore, ad esempio inserendo centinaia di volte le stesse parole chiave (keyword spamming); l’attuale complessità degli algoritmi di valutazione di una pagina e gli innumerevoli fattori presi in considerazione (e il cui peso e numero varia di continuo) ha ormai reso inutili (quando non controproducenti) simili pratiche.
Daniele Fusi – bozza cap. 3 (HTML)
38
Altri parametri possono provenire dall’esterno dello stesso sito, come ad esempio il suo indirizzo, i
collegamenti ipertestuali interni ed esterni diretti a quella pagina o che partono da essa, soppesando la
rilevanza dei siti cui conducono o da cui provengono, il comportamento degli utenti rispetto ai risultati di una
ricerca (quali siano i siti effettivamente scelti fra quelli presentati: l’atto di cliccare su uno dei link presentati
si definisce click-through, e concorre a determinare la popolarità di un sito, ovvero la frequenza con cui i
visitatori del motore di ricerca accedono ad alcuni dei risultati piuttosto che ad altri); un gran numero di
fattori viene insomma considerato ai fini di determinare con la minor approssimazione possibile la pertinenza
del contenuto di ogni documento pubblicato su web.
Evoluzione e applicazioni web In origine HTML era essenzialmente un sistema di marcatura orientato a produrre documenti ipertestuali,
con cui tessere la tela di documenti interconnessi rappresentata dal web. Ancora oggi in effetti la maggior
parte dei suoi marcatori riguarda appunto strutture testuali (titoli, elenchi puntati o numerati, tabelle,
paragrafi, etc), né è in pratica cambiato il meccanismo di fondo per cui a una richiesta del dispositivo client
fa seguito una risposta del server, con contenuto codificato in HTML. Tuttavia, le modalità e gli intenti con
cui tale HTML viene prodotto sono stati completamente ridefiniti rispetto alle origini, ed è anche questa
capacità di innovarsi pur rimanendo al fondo la stessa tecnologia che ha decretato (in nome fra l'altro della
compatibilità) il successo di HTML rispetto ad altre possibili evoluzioni (come ad es. XHTML).
Siti statici
Un tradizionale documento HTML rappresentava essenzialmente un documento ipertestuale destinato
alla lettura da parte dei visitatori di un sito, e un sito non era che un insieme di tali documenti. Nei primi siti,
come può accadere ancora oggi in caso di piccoli siti amatoriali o estremamente antiquati, le fasi di pub-
blicazione erano le seguenti:
1. l'autore del sito scrive direttamente ogni pagina HTML in un file, manualmente (dato che si tratta in
fondo di scrivere un testo), o con l'ausilio di un editor HTML (ad es. vecchi applicativi come
DreamWeaver, FrontPage, Expression Web e simili). Questo tipo di applicativi consente per lo più
di scrivere testi HTML (con CSS) in una duplice modalità, potendo liberamente alternare l'una
all'altra: da un lato la modalità codice, in cui si digitano testo e marcatori in modo diretto, magari
con una varia serie di ausili (colorazione sintattica, autocompletamento dei nomi dei marcatori,
inserimento automatico del marcatore di chiusura una volta digitato quello di apertura, controlli di
validità in tempo reale, mappe del documento, etc.); dall'altro una modalità detta WYSIWYG
(=What You See Is What You Get), ideata soprattutto per utenti inesperti o addirittura privi di
conoscenza di HTML, dove il testo del documento viene scritto e formattato come su un tipico
programma di videoscrittura. Qui l'utente scrive paragrafi semplicemente andando a capo,
inserisce titoli selezionandoli da un elenco, applica grassetti, corsivi, sottolineature, colori, etc. ai
caratteri selezionati tramite appositi pulsanti, e così via per qualsiasi formattazione, proprio come
in un applicativo come Microsoft Word. A ogni operazione dunque si vede immediatamente il
risultato anche in termini grafici (donde l'acronimo citato sopra): il testo cui viene applicato il
grassetto appare in grassetto, etc. Dietro le quinte, il programma genera (in modi più o meno
raffinati e aderenti agli standard) il codice HTML (ed eventualmente CSS) corrispondente alle
operazioni effettuate dall'utente, che può dunque almeno in teoria produrre testi HTML anche
senza conoscere questa tecnologia.
2. una volta preparati i file HTML in questo modo, questi file con tutte le relative risorse (immagini,
fogli di stile, etc.) vengono caricati su un server web. Quando un dispositivo client richiede una
pagina di questo sito, il server non fa che recuperare il suo file HTML e passarlo al client. In questo
Daniele Fusi – bozza cap. 3 (HTML)
39
modello, di norma l'URL della pagina richiesta corrisponde direttamente al percorso e nome del file
all'interno del server: ad esempio, se al sito su http://www.esempio.com corrisponde in un
server una cartella chiamata web/miosito contenente il file index.html che rappresenta la
homepage, l'URL di questa pagina è semplicemente
http://www.esempio.com/miosito/index.html. La struttura dei file è qui esposta diret-
tamente all'utente, al pari dei file stessi, per cui ogni cambiamento nella posizione o nome dei file
si ripercuote in un cambiamento degli indirizzi web relativi.
Un simile modello non risulta scalabile, dato che ogni singola modifica a una pagina richiede la modifica
del file relativo e il suo aggiornamento su server. Soprattutto poi, le pagine sono semplici ipertesti
precostituiti e precaricati su server, per cui il sito offre un limitatissimo livello di interazione con l'utente: si
pensi quanto disti qualsiasi sito attuale, che offre contenuti selezionati in base al momento (ad es. il sito di
un quotidiano che offre notizie in tempo reale), alle richieste dell'utente (ad es. un sito di un negozio che
mostra liste di articoli in base alle richieste e consente di effettuare acquisti), al luogo da cui sta navigando
(ad es. un sito di mappe), etc.
Siti dinamici
Proprio per offrire un livello di interazione sempre maggiore e contenuti sempre più dinamici, ovvero
generati al momento della richiesta piuttosto che predefiniti in precedenza, negli scorsi decenni si sono
succedute numerose tecnologie basate su un modello dinamico. Qui le pagine sono generate all'atto stesso
della richiesta, non più dunque da un operatore umano ma da un programma, che viene eseguito dal server
e produce il testo HTML. Con la consueta semplificazione, le fasi qui si possono schematizzare come segue:
1. viene scritto il programma per generare le pagine a ogni richiesta, appoggiandosi a una delle
numerose tecnologie esistenti a questo scopo, e installato sul server. Questo richiede ovviamente
che il server abbia determinati requisiti hardware e software.
2. quando il server riceve una richiesta, la passa al programma che si incarica di generare la risposta,
di solito in formato HTML (trattandosi qui di esempi relativi a siti web tradizionalmente intesi).
Daniele Fusi – bozza cap. 3 (HTML)
40
Questo modello ha ovviamente il vantaggio della natura dinamica, per cui ogni risposta è tagliata su
misura della richiesta, personalizzata in base all'utente, etc. Tecnicamente esso richiede maggiori risorse,
dovendosi in fondo realizzare un programma con tutti i suoi sottosistemi, a cominciare ad esempio da una
banca dati cui il programma attinge per i suoi contenuti; e lo stesso server deve reggere un carico di lavoro
assai maggiore rispetto a un modello dove il suo compito si esaurisce nell'inviare un file già pronto all'utente.
Naturalmente queste schematizzazioni sono semplificate a scopo didattico, ed esistono innumerevoli sfu-
mature intermedie. Un modello sviluppato a partire da questo paradigma dinamico, e ampiamente usato in
ambiti dove chi produce i contenuti del sito non può avere competenze tecniche, è ad esempio rappresentato
dai sistemi web CMS (Content Management System). Un sistema CMS per il web (WCMS) offre una serie di
strumenti per creare, pubblicare e amministrare una serie di contenuti (testo, immagini, filmati, etc.) in modo
collaborativo, con poca o nessuna conoscenza di HTML e delle altre tecnologie correlate. La maggioranza di
questi sistemi utilizza un database relazionale per archiviare i contenuti e tutti i loro metadati utili a pubbli-
carli nelle varie pagine che compongono il sito. Una serie di modelli viene poi utilizzata per trasformare questi
dati (qualora già non siano sottoforma di HTML) in HTML, CSS e JavaScript (spesso per mezzo di XSLT), dando
così luogo alle pagine del sito, generate all'atto della loro richiesta.
Esiste un gran numero di sistemi WCMS open source basati su diverse tecnologie, che per lo più si con-
trollano attraverso semplici pagine web. Si tratta quindi di sistemi molto comodi per pubblicare e soprattutto
mantenere aggiornati interi siti, semplicemente inserendo i contenuti nella loro banca dati tramite pagine
web riservate agli amministratori, che non necessitano di particolare competenza tecnica: l'utente deve sem-
plicemente comporre il proprio testo come in un tradizionale word processor, applicando la formattazione
del caso. Questi sistemi offrono dunque una soluzione facile e di norma poco costosa, anche se proprio la
standardizzazione delle loro funzionalità e dei loro output costituisce insieme un pregio e un limite, assieme
a quello comune a tutte le applicazioni web tradizionali, che servono a ogni richiesta una pagina HTML con-
tenente interfaccia e dati insieme.
Evoluzione: applicazioni web
Sulla via della generazione dinamica delle pagine, tramite programmi specializzati o sistemi CMS precon-
fezionati, il web ha avviato così una decisa trasformazione della sua natura: piuttosto che una rete di
documenti ipertestuali, ha teso verso una rete di vere e proprie applicazioni, che girano sul server e rispon-
dono a ogni specifica richiesta dell'utente. In questo senso le pagine, piuttosto che contenitori di un semplice
ipertesto, sono divenute contenitori di complete interfacce grafiche, ricche di tutti gli elementi propri di
un'interfaccia di una tradizionale applicazione desktop: menu, barre degli strumenti, pulsanti, caselle di testo,
etc. Tutti questi elementi continuano a essere definiti tramite HTML, e dotati di stile tramite CSS, e natural-
mente possono includere anche testo; ma descrivono ormai l'interfaccia di un'applicazione, creata per
accedere a contenuti specifici in modi anche molto elaborati e riccamente interattivi. Si pensi ad esempio a
un sito di commercio elettronico, dove è possibile cercare articoli nei cataloghi, effettuare acquisti, gestire il
proprio conto, lasciare recensioni e commenti, etc. In questo senso il web, pur senza cambiare le sue tecno-
logie di base (HTML, CSS, Javascript, etc.), è divenuto sempre più una rete di applicazioni interconnesse,
piuttosto che una rete di meri documenti testuali, e proprio su questa sua nuova vocazione si basano molti
degli sviluppi correnti e futuri di HTML e delle tecnologie correlate.
Negli ultimi anni si è andata consolidando un'evoluzione che ha teso ad avvicinare sempre più queste
applicazioni web alle tradizionali applicazioni desktop, che risultavano spesso più responsive, potenti e
robuste, ma meno versatili. Un'applicazione web infatti, essendo ospitata in una pagina HTML, può al pari di
qualsiasi altra pagina essere utilizzata senza richiedere alcuna installazione o prerequisito, se non un browser
web; un enorme numero di dispositivi oggi dispone di web browser, e questo consente di poterla utilizzare
Daniele Fusi – bozza cap. 3 (HTML)
41
praticamente su qualsiasi piattaforma, indipendentemente dalle sue dimensioni e dal suo sistema operativo.
Una tradizionale applicazione desktop invece, scritta in diversi linguaggi (laddove alla fine un'applicazione
web utilizza solo Javascript), si rivolge a specifici sistemi operativi (o a loro famiglie), e spesso richiede di
essere installata prima del suo uso, installando assieme a essa tutti i suoi requisiti. Inoltre, a ogni nuovo ag-
giornamento l'installazione deve essere ripetuta. Tutto ciò rende le applicazioni web infinitamente più ver-
satili e utilizzabili, in modo immediato da qualsiasi dispositivo e luogo, su qualsiasi piattaforma.
Tuttavia, queste prime applicazioni web in confronto a quelle tradizionali risultavano spesso meno potenti
(a motivo anche delle limitazioni dei dispositivi e di Javascript) e poco responsive, nella misura in cui l'intera-
zione con l'utente richiede il continuo dialogo fra client e server che rigenera e ritrasmette le pagine, per cui
diventa difficile che l'interfaccia presente nella pagina reagisca in modo immediato, data l'inevitabile latenza
associata alla rete. Chiunque avrà fatto esperienza di questi fenomeni nella navigazione su siti di questo tipo;
un classico esempio è rappresentato dai moduli compilati online (form), che spesso devono aggiornare i
propri dati in base alla selezione dell'utente. Nei siti meno moderni non è ad esempio raro che selezionando
una regione da un elenco di regioni italiane si debba attendere qualche istante per vedere la pagina aggior-
narsi automaticamente, caricando in un secondo elenco la lista delle province comprese in quella regione.
Nei casi peggiori è persino l'intera pagina che viene ricaricata, provocando ritardi anche di vari secondi e
interrompendo le operazioni dell'utente, che nel frattempo magari ha iniziato a riempire altri campi dello
stesso modulo, per poi vederlo in modo inatteso ricaricato non in tempo reale, e dunque parzialmente riaz-
zerato.
Soprattutto poi queste applicazioni risultavano rigide, in quanto in esse l'interfaccia è inscindibile dai dati
che presenta: entrambe sono infatti generate dal server come contenuto della pagina HTML risultante, e
inviate al client. Questo le rende anche poco integrabili, dato che tutte le funzionalità e i dati offerti dall'ap-
plicazione non sono direttamente consumabili da altri sistemi. Un altro sistema potrebbe magari inserire la
pagina generata nella propria, o tentare di estrarre in qualche modo i dati di interesse dalla pagina HTML in
cui si trovano presentati, per effettuare analisi più o meno complesse, ma decisamente fragili, perché desti-
nate a fallire non appena qualsiasi elemento della pagina cambi; in ogni caso, non potrebbe avere accesso
diretto ai dati, per manipolarli o integrarli in vario modo con i propri.
Si pensi ad esempio al sito di un'azienda di trasporto urbano che offre una pagina per indicare i tempi di
passaggio di un automezzo a ogni fermata: se un autore indipendente decide di sviluppare un'applicazione
che offra lo stesso servizio (magari per dispositivi smartphone), l’unico modo a disposizione è analizzare il
codice HTML della pagina in questione, estraendone i dati. Ovviamente quella pagina ha un suo indirizzo, che
potrebbe cambiare, e un suo contenuto variamente formattato, pure soggetto a cambiamento; magari
l’orario si trova visualizzato sulla seconda colonna di una tabella, all'interno del terzo paragrafo, introdotto
da un testo in grassetto e seguito da due punti. È facile comprendere che qui basta che cambi anche un
singolo aspetto banale della pagina (magari un grassetto) per rendere l'applicazione non più funzionale, dato
che essendo cambiata la presentazione dei dati essa non riuscirà più a dedurli dal loro contesto. Questo
ovviamente accade appunto perché i dati non sono offerti in modo indipendente dalla loro presentazione
(sottoforma di pagina HTML) all'utente finale: ancora una volta, il contenuto è fuso con la sua presentazione.
Negli ultimi anni dunque si è andata definendo una nuova generazione di applicazioni web, grosso modo
riconducibili all'acronimo SPA (single-page applications), che mira a colmare il divario con le applicazioni
tradizionali offrendo pari responsività (grazie al fatto che girano nel browser web del dispositivo client, e non
più nel server) e potenza (grazie al fatto che per tutte le funzionalità che richiedono grandi potenza di calcolo
o moli di dati rimangono su server), pur rimanendo nell'alveo di una semplice pagina HTML. Il principio alla
Daniele Fusi – bozza cap. 3 (HTML)
42
loro base è infatti una ancora più decisa separazione della logica dell'applicazione (il "contenuto") dall'inter-
faccia ideata per presentarla, in due sistemi anche fisicamente distinti: un sistema su lato server, che pubblica
su web il contenuto sottoforma di un'interfaccia programmabile (API), e una applicazione web su lato client
che sfrutta queste API.
Dato che il software delle API gira nel server, mentre l'interfaccia nel dispositivo client, questo garantisce
una responsività molto vicina se non equivalente a quella di una tradizionale applicazione locale installata
nel proprio dispositivo. Inoltre, l'interfaccia è del tutto separata dal contenuto che presenta, sicché diviene
possibile integrare quest'ultimo in qualsiasi altro sistema, che può attingere alle API allo stesso titolo della
applicazione web che espone l'interfaccia utente. Nell'esempio citato sopra dell'azienda di trasporti, i dati
sarebbero pubblicati in modo diretto e non mediato da una presentazione: è sufficiente interrogare le API
per ottenerli. A quel punto, la pagina web del sito ufficiale dell'azienda così come l'applicazione per smart-
phone sviluppata da un altro soggetto non sarebbero che due applicazioni che attingono alla medesima unica
fonte di dati, presentandoli sotto vesti diverse: da un lato il modulo nella pagina HTML del sito, dall'altro
un'applicazione per smartphone; dunque un unico contenuto, con diverse presentazioni.
In questo scenario l'architettura generale si può dunque schematizzare come in figura:
Il dispositivo client qui fa una richiesta al web server, che si limita a restituire una singola pagina web e poi
esce di scena. Questa pagina non è però un documento ipertestuale: piuttosto, è una vera e propria appli-
cazione, scritta nel linguaggio nativamente compreso da ogni browser web, Javascript. Questo programma
viene avviato dal browser e gira quindi nel dispositivo client; è esso che dialoga con un secondo server, quello
che espone il contenuto sottoforma di API.
Ogni volta che sia necessario un dato o una manipolazione complessa di dati, l'applicazione client fa una
richiesta a queste API, che svolgono il loro lavoro su server e restituiscono non ipertesti, ma direttamente
dati. Il formato standard usato in queste applicazioni per rappresentarli è di norma JSON (JavaScript Object
Notation), più compatto e più adatto all'uso con JavaScript rispetto a XML. Si tratta anche qui (come di
consueto nel web) di un formato a base testuale, concepito per rappresentare dati gerarchicamente strut-
turati; similmente a XML, si parte da un elemento radice che ramifica indefinitamente in altri elementi. Invece
di delimitare dati fra marcatori, il formato è più compatto, e si avvale essenzialmente di parentesi graffe (per
Daniele Fusi – bozza cap. 3 (HTML)
43
delimitare oggetti), parentesi quadre (per delimitare sequenze di oggetti), doppi apici (per delimitare nomi e
valori) e virgole e due punti.
Ad esempio, ipotizzando un semplice elenco di studenti con nomi ed età come questo:
Mario Rossi 21
Anna Verdi 23
lo si potrebbe rappresentare in un ipotetico dialetto XML come:
<students>
<student>
<first>Mario</first>
<last>Rossi</last>
<age>21</age>
</student>
<student>
<first>Anna</first>
<last>Verdi</last>
<age>23</age>
</student>
</students>
o in JSON come:
[
{
"first": "Mario",
"last": "Rossi",
"age": 21
},
{
"first": "Anna",
"last": "Verdi",
"age": 23
}
]
Qui l'elenco è racchiuso fra parentesi quadre e comprende due oggetti, ciascuno racchiuso fra parentesi
graffe e contenente una serie di coppie "nome": "valore" che definisce le proprietà dell'oggetto. Mentre
l'esempio XML conta (escludendo gli spazi non significativi) circa 160 caratteri, quello JSON non arriva a 90,
donde una compattezza assai maggiore, e dunque un minor tempo di latenza sulla rete. Trattandosi peraltro
di un formato nato per rappresentare oggetti del linguaggio Javascript, che fa girare i programmi destinati ai
browser web, è naturale che venga ampiamente utilizzato come veicolo per trasportare dati dal server
all'applicazione client, accanto a tecnologie più tradizionali come XML.
Al di là del dettaglio implementativo, quanto va evidenziato qui è che il server API non risponde con pagine
HTML destinate alla fruizione diretta da parte dell'utente, ma con puri dati, destinati all'applicazione che gira
su lato client nel browser dell'utente, e fa da mediatore fra quest'ultimo e il server. L'applicazione client riceve
questi dati, e manipola la pagina HTML in cui risiede per visualizzarli assieme a tutti gli elementi di interfaccia
necessari. In questo senso si parla appunto di Single Page Application (SPA), dato che il browser rimane su
un'unica pagina, quella ricevuta dal server web all'inizio della connessione, e non si sposta mai da questa;
tuttavia, per l'utente essa può anche cambiare del tutto, dato che è il programma Javascript che manipola la
pagina ospite per farle assumere di volta in volta un aspetto nuovo.
Daniele Fusi – bozza cap. 3 (HTML)
44
Si ha dunque qui un paradigma dove l'utente non interagisce più in modo diretto con il sistema che ospita
i contenuti, ma per via mediata da questa applicazione web SPA che gira nel suo dispositivo e dialoga con il
server API. A questo proposito, va rimarcato che questo server non fa che restituire dati, e non loro presen-
tazioni, necessariamente incomplete e di difficile riuso, e il canale di comunicazione è costituito dal semplice
HTTP(S), lo stesso protocollo in uso per trasferire le tradizionali pagine del web.
Verso HTML 6: componentizzazione del web
Nell'ambito di una rete di applicazioni piuttosto che di semplici ipertesti, si vanno definendo una serie di
tecnologie create allo scopo di favorirne progettazione, implementazione e riuso in senso modulare. A questo
congiura una serie di innovazioni programmate per il futuro HTML 6, che ruotano attorno al concetto di
componente web (web component), basato fra l'altro sulla possibilità di utilizzare elementi personalizzabili.
Si tratta in pratica di un modo di incapsulare in un contenitore facilmente riusabile tutto l'insieme di
funzionalità e forme definite come di consueto da programmi Javascript e stili CSS. Ad esempio, invece che
caricare di volta in volta in una pagina tutte le risorse necessarie per visualizzare una mappa di Google maps
(con tutti gli inconvenienti pratici che ne derivano, come pesantezza, complessità, potenziali conflitti o
asincronie tra le varie parti in gioco), basterà essenzialmente digitare nel codice HTML il nome dell'elemento,
esattamente come qualsiasi altro elemento HTML, ad es. google-map; a quel punto, si potrà interagire con
la mappa in tutti i modi consueti, come in una vera e propria applicazione intera in miniatura.
Invece infatti di essere un linguaggio di marcatura con un lessico (=un insieme di marcatori) chiuso, come
è stato fino alla sua versione 5, HTML 6 è in certo senso aperto, in quanto rende possibile definire qualsiasi
marcatore si desideri, per assegnargli poi funzionalità e veste specifiche. Una pagina web di questo tipo viene
quindi costruita per blocchi, ciascuno dei quali autonomo e specializzato nello svolgere una specifica
funzione. Chiunque può di definire e implementare i propri marcatori per gli scopi più disparati, avvicinando
dunque in tal modo HTML alla versatilità di XML. Ad esempio, si potrebbe definire un marcatore logo per
visualizzare il logo dell'azienda di un sito, un marcatore menu per contenere i menu di navigazione, un
marcatore toolbar per una barra degli strumenti, e così via: la stessa libertà presente in XML può quindi
essere applicata anche a HTML.
A questo scopo occorre naturalmente prevedere un meccanismo che consenta di evitare confusioni tra
elementi diversi ma per cui venisse scelto lo stesso nome; e come per XML, questo meccanismo è semplice-
mente costituito dal namespace. In pratica, laddove si trovassero due nomi di marcatori uguali, essi
sarebbero comunque differenziati dal sistematico uso di un prefisso diverso per ciascuno; il prefisso per
brevità può essere scelto arbitrariamente, ma viene fatto corrispondere a un URI, che come si è visto per sua
natura garantisce unicità all’interno delle risorse web. Il W3C non riserva più dei nomi di marcatori per lo
standard HTML, ma piuttosto dei namespace. Nel caso dei marcatori HTML tradizionali, il namespace
riservato è html: dunque il marcatore html non è più html, ma html:html; il marcatore body è
html:body, il marcatore a html:a, etc. Per lo più ai tradizionali elementi corrispondono cioè elementi con
lo stesso nome e il prefisso del namespace, seguito come di consueto da due punti. Laddove sia opportuno
però si trovano divergenze rispetto all'HTML precedente: ad esempio, invece di avere marcatori diversi per
diversi tipi di media come img, video, audio si avrà un unico marcatore html:media, magari accom-
pagnato da un attributo type che indichi il suo tipo. Nel caso delle form, soggette a rapida evoluzione nella
misura in cui rappresentano da sempre gli elementi essenziali di qualsiasi interfaccia web, il namespace riser-
vato è anzi diverso, appunto form, in modo da consentire un'evoluzione dei suoi marcatori indipendente (e
presumibilmente più veloce) rispetto ai marcatori del namespace html.
I componenti web si fondano su alcune essenziali innovazioni, la cui natura tecnica non consente che una
breve e incompleta enumerazione:
Daniele Fusi – bozza cap. 3 (HTML)
45
• elementi personalizzabili: nuovi elementi, utilizzabili per qualsiasi scopo non sia adatto un elemento
HTML standard. Questi elementi si possono creare ex novo, oppure derivare da elementi esistenti
(ad es. derivare un pulsante personalizzato dal pulsante HTML standard). Una caratteristica
distintiva di questi elementi è costituita dal fatto che il loro nome deve sempre contenere almeno
un trattino, il che consente ai browser di riconoscerli facilmente.
• elemento template: un nuovo elemento il cui solo scopo è contenere la marcatura HTML che
rappresenta la struttura del componente (o di qualsiasi altro frammento di HTML si voglia riusare
in vari contesti).
• shadow DOM: una tecnologia che consente di isolare completamente i contenuti del componente
dal contesto in cui viene utilizzato. Lo scopo di questo isolamento si comprende facilmente tenendo
presente la natura degli stili CSS, che vengono ereditati a cascata. Se ad esempio nel nostro compo-
nente volessimo visualizzare in rosso tutti gli elementi p con uno stile CSS come p { color:
red; }, questo avrebbe come conseguenza di colorare in rosso tutti i paragrafi della pagina anche
al di fuori del componente. Viceversa, una tale regola nella pagina in cui si trova ospitato il compo-
nente colorerebbe anche i paragrafi di quest'ultimo, che magari invece vorremmo neri. Per essere
quindi riusabile in qualsiasi contesto un componente web deve esserne indipendente, in modo da
conservare il design desiderato e nel contempo adattarsi al resto della pagina, senza provocare
effetti collaterali con il suo inserimento in essa. Shadow DOM consente dunque tale isolamento,
garantendo la modularità dei componenti e operando come una barriera di norma non permeabile
da CSS.
• importazione di codice HTML: al pari di quanto era già possibile ad esempio per i fogli di stile o per il
codice Javascript, dove un foglio o una parte di codice ne poteva importare un altro, in HTML 6 è
possibile importare codice HTML all'interno di altro codice. Questo è ovviamente un requisito
necessario per inserire un componente web nella pagina, dato che il componente è definito da un
suo template HTML e da relativi stili CSS, oltre che dal codice Javascript che definisce il suo
comportamento. Similmente al caso di CSS, l'importazione avviene tramite l'elemento link: ad
esempio, <link rel="import" href="/abc/def/ghi.html">.
Al di là dei complessi dettagli tecnici, anche questa breve enumerazione dovrebbe rendere evidente la decisa
direzione del nuovo HTML nel senso di uno strumento sempre più versatile e adatto alla costruzione di
blocchi 'intelligenti', completi, autonomi e riusabili, con i quali costruire pagine che costituiscono ormai vere
e proprie applicazioni. Idealmente, per comporre un'applicazione diviene possibile attingere a un ricchissimo
e aperto catalogo globale di componenti, o realizzarne di propri, integrandoli in un organismo di qualsiasi
estensione e complessità.
Naturalmente la creazione di una moderna applicazione web di questo tipo è assai più che il mero assem-
blaggio di componenti: di pari passo con l'evoluzione di HTML si vanno infatti affermando nuovi linguaggi di
programmazione e ambienti di sviluppo (framework), e strumenti sempre più potenti e raffinati per la realiz-
zazione di programmi che ormai nulla hanno da invidiare al tradizionale software realizzato per desktop, e
che sfruttano appieno le nuove possibilità offerte dal futuro HTML. Di fatto, molte delle innovazioni qui
descritte sono già operative nel web attuale, benché questa versione di HTML non sia ancora uscita e i vari
browser supportino solo in parte le connesse innovazioni tecnologiche. Esistono infatti delle librerie software
Javascript create appunto per colmare queste lacune, il cui ruolo è dunque destinato a ridursi sempre più nel
corso del tempo, fino ad azzerarsi per lasciare spazio al nuovo standard non appena esso sarà pubblicato.
Daniele Fusi – bozza cap. 3 (HTML)
46
Grazie a ciò, fin da oggi è possibile avvalersi delle innovazioni del futuro HTML pur in sua assenza, consenten-
do la nascita di nuove generazioni di applicazioni web, sempre più modellato come una rete di applicazioni
piuttosto che di ipertesti.