HyperText Markup Language (HTML)Daniele Fusi – bozza cap. 3 (HTML) 1 HyperText Markup Language (HTML) Web e ipertesti Il web è un sistema distruibuito di ipertesti1 grafici globale,

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.


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).

http://www.microsoft.com/

http://www.microsoft.com/


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.


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.


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


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.


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.


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


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;


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>


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:


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.


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>


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.


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.


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).


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ì


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>


19


<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:


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


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).


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


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


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 { ... }).


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:


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>


<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>


<title>Esempio JS</title>


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


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


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>


<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.


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>


<title>JavaScript non intrusivo</title>


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.


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.


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.


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.


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,


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>


<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>


</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.


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>



</ul>

</nav>

<section>

<article>

<header>Article Title</header>


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


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.


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


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).


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


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


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


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.


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:


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.


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.

Documents

HyperText Markup Language (HTML)Daniele Fusi – bozza cap. 3 (HTML) 1 HyperText Markup Language (HTML) Web e ipertesti Il web è un sistema distruibuito di ipertesti1 grafici globale,