Guida ad HTML5: struttura della pagina

In questo post riprendiamo lo scheletro di pagina web HTML 5 vista fugacemente nel post precedente e – passo per passo – vediamo le informazioni essenziali da aggiungere per trasformarla in una pagina vuota, pronta da utilizzare come modello e da riempire con i contenuti desiderati.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>

Radice del documento (html)

Lingua. La prima e fondamentale informazione relativa ad una pagina web è rappresentata dalla lingua principale dei contenuti, che è consigliabile specificare mediante l’attributo lang. I valori ammessi sono stringhe che rappresentano codici standard internazionali per le lingue: ad esempio it (italiano), en (inglese), es (spagnolo), … .

<!DOCTYPE html>
<html lang="it">
<head>
</head>
<body>
</body>
</html>

Sul web sono disponibili la lista completa dei codici ed un comodo motore di ricerca, che vi consente di trovare il codice di una lingua a partire dal nome inglese della stessa mediante la form Find.

Modalità offline. La possibilità di funzionare offline dipende dall’esistenza di un file manifest, ossia un documento di testo contenente la lista delle pagina web da scaricare localmente in modo da renderne possibile la fruizione anche in assenza di una connessione a Internet.

Per utilizzarlo effettivamente occorre aggiungere all’elemento html l’attributo manifest, il cui valore corrisponde al percorso (assoluto o relativo rispetto alla pagina corrente) del file manifest. Generalmente, è sufficiente collocare i due file nella medesima cartella, assegnando all’attributo manifest semplicemente il nome scelto per il file corrispondente (nell’esempio, cache.manifest).

<!DOCTYPE html>
<html lang="it">
<head>
</head>
<body>
</body>
</html>

La sintassi del file manifest e l’utilizzo delle funzionalità offline verrà affrontato in dettaglio in un post successivo.

Metadati e proprietà del documento (head)

Questa sezione fornisce un’ampia varietà di informazioni in merito ai contenuti della pagina e merita un’attenzione almeno pari a quella profusa nella progettazione dei contenuti veri e propri.

Codifica dei caratteri

La prima informazione da aggiungere è rappresentata dalla codifica dei caratteri, ossia il codice utilizzato per rappresentare (a basso livello) un insieme di caratteri alfabetici mediante dei valori numerici.

Rispetto al linguaggio XHTML, l’aggiunta di questa informazione è stata semplificata in nome di una maggiore chiarezza e immediatezza: è sufficiente aggiungere un elemento meta all’interno di head e assegnare al relativo attributo charset il valore desiderato. Per garantire la massima compatibilità, assicurandosi così che la pagina sia visualizzata correttamente in tutto il mondo (o quasi), si raccomanda di utilizzare la codifica UTF-8.

Si raccomanda altresì di inserire questo elemento come primo figlio di head, in modo tale da comunicare il prima possibile al browser (o il generico software che analizza la pagina) la codifica utilizzata: così facendo si avrà la certezza che tutte le informazioni successive (a partire dal titolo della pagina) verranno interpretate correttamente.

<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="utf-8" />
</head>
<body>
</body>
</html>

Titolo (title)

Il titolo del documento – rappresentato mediante l’elemento title – rappresenta un’informazione obbligatoria, utilizzata solitamente nel nome della finestra del browser o del segnalibro, e dovrebbe essere scelto in modo tale da permettere di identificare facilmente la pagina al di fuori del contesto specifico del sito (ad esempio per facilitarne la ricerca tra segnalibri).

In genere si include nel titolo del documento non solo il nome della pagina (specificato mediante l’elemento h1) ma anche il sito di appartenenza, in modo tale che dalla sua sola lettura si possano identificare univocamente il sito e la pagina specifica. La prassi prevede di indicare le informazioni dal particolare (titolo della pagina) al generale (nome del sito).

<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="utf-8" />
<title>Titolo della pagina - Nome del sito</title>
</head>
<body>
</body>
</html>

Risorse esterne (link)

HTML è un linguaggio concepito per organizzare e descrivere il contenuto di una pagina dal punto di vista semantico: la presentazione (fogli di stile CSS) ed il comportamento (script JS) della pagina vengono gestiti separatamente ed è buona prassi (per non dire regola ferrea) inserire tali informazioni in file separati.

Questi devono essere poi richiamati dalla pagina affinché il browser li recuperi e utilizzi durante il caricamento; i vantaggi che ne derivano sono evidenti, primo fra tutti la possibilità di definire (una sola volta) e aggiornare lo stile vedendolo applicato automaticamente a tutte le pagine.

Attributi obbligatori. L’elemento link consente di 1) incorporare file esterni o 2) inserire collegamenti a informazioni esterne e prevede 2 attributi obbligatori:

href
Indica l’indirizzo del file da incorporare. Si raccomanda di utilizzare indirizzi assoluti, in modo da garantire il corretto caricamento del file a prescindere dalla posizione della pagina web sul server.
rel
Indica il tipo del file da incorporare. I valori assegnabili sono riportati integralmente in questa lista, mentre riepiloghiamo qui solo i più diffusi:

  • author (informazioni sull’autore della pagina);
  • icon (icona del sito, mostrata sulla scheda del browser a sinistra del titolo);
  • license (licenza di distribuzione dei contenuti del documento);
  • next (collegamento alla pagina successiva, qualora il contenuto sia distribuito su più pagine);
  • stylesheet (fogli di stile CSS);

Sebbene sia una situazione rara, è possibile assegnare valori multipli tra quelli elencati, separati da spazi.

Attributi opzionali. Di seguito si riportano i più comuni attributi opzionali:

media
Se l’elemento link incorpora un file esterno, questo elemento consente di limitare i tipi di dispositivi cui la risorsa si applica (ove risulti assente, si applica a tutti). Ciò consente – ad esempio – di definire fogli di stile differenti a seconda del dispositivo con cui l’utente visita la pagina: i valori più comuni sono screen (schermo tradizionale), print (stampa) e handheld (dispositivi mobili), ma è possibile fornire specifiche dettagliate utilizzando questa sintassi.
hreflang, title
Se l’elemento link rappresenta un collegamento ipertestuale ad una pagina web, questi attributi consentono di specificare rispettivamente lingua (per i valori ammissibili, v. sezione precedente) e titolo della pagina di destinazione.

Metadati (meta)

L’elemento meta consente di fornire due tipi di informazioni (oltre alla codifica dei caratteri vista in precedenza): le proprietà del documento o le direttive HTTP.

In entrambi i casi l’attributo content è obbligatorio e specifica il valore della proprietà del documento o della direttiva HTTP corrispondente.

Codifica dei caratteri charset
Proprietà del documento name content
Direttive HTTP http-equiv
Annunci

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...