Cosa c'è nella head? Metadata in HTML

La head di un documento HTML è la parte che non viene visualizzata nel browser quando la pagina viene caricata. Contiene informazioni come il <title>, della pagina, i link ai CSS (se vuoi applicare uno stile al contenuto tramite i CSS), i link alle favicons personalizzate, e altri metadata (dati relativi all'HTML, come chi lo ha scritto, o importanti parole chiave che descrivono il documento). In questo articolo vedremo tutto ciò e anche altro, per darti una buona base del markup e di altro codice che dovrebbe trovarsi nella head.

Prerequisiti: Familiarità con le basi di HTML, spiegate in Cominciare con l'HTML.
Obbiettivi: Conoscere la head dell'HTML, qual è il suo scopo, i più importanti elementi che può contenere e quale effetto può avere sul documento HTML.

Cosa è la head?

Riprendiamo il semplice esempio di documento HTML che abbiamo visto nell'articolo precedente.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <p>This is my page</p>
  </body>
</html>

La head HTML è il contenuto dell'elemento <head> — diversamente dal contenuto dell'elemento <body> (che è visualizzato quando la pagina viene caricata dal browser), il contenuto della head non viene visualizzato nella pagina. Invece, il compito della head è di contenere dei metadata relativi al documento. Nell'esempio precedente, la head è piuttosto ridotta:

<head>
  <meta charset="utf-8">
  <title>My test page</title>
</head>

In pagine più corpose tuttavia, la head può diventare piuttosto piena di elementi — prova ad andare in qualcuno dei tuoi siti favoriti e usando i developer tools esamina il contenuto della loro head. Il nostro scopo qui, non è di mostrarti l'uso di qualsiasi cosa sia possibile mettere nella head, ma piuttosto di insegnarti come usare le cose più ovvie da mettere nella head e fare in modo che tu abbia un po' di familiarità con quelle. Andiamo a cominciare.

Aggiungere un title

Abbiamo già visto l'elemento <title> in azione — può essere usato per aggiungere un titolo ad un documento. Ciò può confondere conl'elemento <h1> che è usato per aggiungere l'intestazione principale al contenuto del body — a cui ci si riferisce lo stesso come al titolo della pagina; ma sono due cose differenti!

  • L'elemento <h1> appare nella pagina quando è caricata dal browser — in generale dovrebbe essere usato una sola volta per ogni pagina, per contrassegnare il titolo del contenuto della pagina (il titolo della storia, o l'intestazione delle notizie o qualsiasi cosa sia appropriata al tuo scopo).
  • L'elemento <title> è il metadata che rappresenta il titolo di tutto il documento HTML (non solo del contenuto del documento).

Active learning: esaminare un sempice esempio.

  1. Per avviare questo active learning, ci piacerebbe che andassi al nostro repositori Github e scaricassi una copia della nostra pagina title-example.html. Per farlo puoi usare uno dei due modi seguenti:
    1. copiare ed incollare il codice della pagina in un nuovo file di testo creato col tuo editor e salvarlo in un posto adatto;
    2. Premere il tasto "Raw" nella pagina, scegliere File > Save Page As... nel menù del browser e scegliere un posto in cui salvarlo.
  2. Adesso apri il file nel browser. Dovresti vedere questo:

    A simple web page with the title set to <title> element, and the <h1> set to <h1> element.Adesso dovrebbe essere chiaro dove appare il contenuto dell'elemento <h1> e dove appare il contenutodell'elemento <title>!

  3. Dovresti anche provare as aprire il codice nell'editor, modificare il contenuto di questi elementi, ricaricare la pagina nel browser. Adesso puoi divertiti un po'!

Il contenuto dell'elemento <title> è anche usato in altri modi. Per esempio, se provi a salvare  la pagina nei preferiti (Bookmarks > Bookmark This Page, in Firefox), vedrai il contenuto del <title> come nome suggerito per il segnalibro.

A webpage being bookmarked in firefox; the bookmark name has been automatically filled in with the contents of the <title> element

Il <title> è usato anche nelle ricerche, come vedrai più avanti.

Metadata: l'elemento <meta>

I metadati sono dati che descrivono altri dati. In HTML c'è un modo "ufficiale" per aggiungere metadata al documento: l'elemento <meta>. Inoltre, le altre cose di cui parliamo in questo articolo possono essere pensate anch'esse come metadata. Ci sono molti tipi di elementi <meta> che possono essere inseriti nella <head> del documento, ma non vogliamo cercare di parlare di tutti adesso, perché renderebbe tutto troppo complicato. Invece, spiegheremo poche cose che potrai vedere più spesso, solo per darti un'idea.

Specificare la codifica dei caratteri del documento

Nell'esempio che abbiamo visto, c'era questa riga:

<meta charset="utf-8">

Questo elemento specifica semplicemente la codifica dei caratteri del documento: il set di caratteri che il documento può usare.  utf-8 è un set di caratteri universale, che include pressoché ogni carattere di ogni linguaggio umano. Ciò significa che la tua pagina web potrà mostrare qualsiasi lingua; pertanto è una buona cosa usare questo set di caratteri per ogni pagina che crei! Per esempio, la tua pagina potrebbe tranquillamente gestire sia l'inglese che il giapponese:

a web page containing English and Japanese characters, with the character encoding set to universal, or utf-8. Both languages display fine,Se imposti il set di caratteri ISO-8859-1, per esempio (il set di caratteri per l'alfabeto latino), il rendering della pagina potrebbe essere scombinato:

a web page containing English and Japanese characters, with the character encoding set to latin. The Japanese characters don't display correctly

Active learning: esercitarsi con la codifica dei caratteri

Per questa prova, riprendi il modello di HTML che hai scaricato durante la precedente sezione riguardante l'elemento <title> (il title-example.html), prova a cambiare il set dei caratteri (il valore di charset) a ISO-8859-1 e aggiungi del giapponese alla pagina; questo è il codice che abbiamo usato:

<p>Japanese example: ご飯が熱い。</p>

Aggiungere l'autore e la descrizione

Molti elementi <meta> includono gli attributi name e content :

  • name specifica di che tipo di elemento meta si tratta; che tipo di informazioni contiene.
  • content specifica il reale contenuto dell'elemento meta.

Due degli elementi meta che è utile inserire nella pagina definiscono l'autore della pagina e una concisa descrizione della stessa. Vediamo un esempio:

<meta name="author" content="Chris Mills">
<meta name="description" content="The MDN Learning Area aims to provide
complete beginners to the Web with all they need to know to get
started with developing web sites and applications.">

Specificare un autore è utile per ricavare chi ha scritto la pagina: nel caso li si voglia contattare per chiarimenti riguardo al contenuto. Alcuni Content Management Systems (CMS) hanno dei meccanismi per estrarre automaticamente le informazioni sull'autore e renderle disponibili per questo scopo.

Specificare una descrizione che includa parole chiave relative al contenuto della pagina è utile perché può far apparire la pagina più avanti nei risultati delle ricerche fatte con i motori di ricerca (questo è un tema trattato in Search Engine Optimization, o SEO.)

Active learning: L'uso della descrizione nei motori di ricerca

La descrizione è usata anche per la generazione delle pagine dei risultati della ricerca. Facciamo un esercizio per capire meglio.

  1. Vai alla prima pagina di The Mozilla Developer Network.
  2. Guarda il sorgente della pagina (Right/Ctrl + click sulla pagina, nel menù contestuale scegli View Page Source/Visualizza sorgente pagina).
  3. Trova il meta tag description. Sarà così:
    <meta name="description" content="The Mozilla Developer Network (MDN) provides
    information about Open Web technologies including HTML, CSS, and APIs for both
    Web sites and HTML5 Apps. It also documents Mozilla products, like Firefox OS.">
  4. Adesso cerca "Mozilla Developer Network" con il tuo motore di ricerca preferito (We used Yahoo.) Vedrai il contenuto dell'elemento <meta> description e il contenuto dell'elemento <title> usati nei risultati della ricerca. — Vale decisamente la pena averli!

    A Yahoo search result for "Mozilla Developer Network"

Note: In Google, vedrai alcune altre pagine rilevanti del sito MDN elencate sotto il link alla homepage MDN — sono chiamati sitelinks e sono configurabili negli strumenti di Google per webmasters (Google's webmaster tools) — un modo per migliorare i risultati del tuo sito nelle ricerche fatte col motore di ricerca di Google.

Note: Molte proprietà <meta> non sono più usate. Per esempio, l'elemento <meta> keyword  — che si supponeva dover essere usato per fornire ai motori di ricerca termini per rendere la pagina rilevante per le ricerche di quei termini — è ignorato dai motori di ricerca perché gli spammers lo riempivano di centinaia di parole chiave, pregiudicando i risultati della ricerca.

Altri tipi di metadata

Setacciando il Web, troverai altri tipi di metadata. Molte delle proprietà che vedrai nei siti web sono creazioni proprietarie (coperte da Copyright), progettate per dotare alcuni siti (tipo i social network) di particolari informazioni che loro possono usare.

Per esempio, Open Graph Data è un insieme di metadata (un protocollo) che Facebook ha inventato per  avere dei metadata più ricchi per i siti web. Nel codice sorgente MDN troverai questo:

<meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png">
<meta property="og:description" content="The Mozilla Developer Network (MDN) provides
information about Open Web technologies including HTML, CSS, and APIs for both Web sites
and HTML5 Apps. It also documents Mozilla products, like Firefox OS.">
<meta property="og:title" content="Mozilla Developer Network">

Un effetto è che quando crei un link a MDN su facebook, il collegamento appare accompagnato da una immagine e da una descrizione: è una esperienza più ricca per gli utenti.

Open graph protocol data from the MDN homepage as displayed on facebook, showing an image, title, and description.Anche Twitter ha i suoi metadati proprietari simili, che hanno un effetto simile quando l'indirizzo del sito è mostrato su twitter.com. Per esempio:

<meta name="twitter:title" content="Mozilla Developer Network">

Aggiungere icone personalizzate al tuo sito

Per arricchire ulteriormente il progetto del tuo sito, puoi aggiungere un riferimento a delle icone personalizzate nei tuoi metadata e queste saranno mostrate in alcuni contesti.

Le humble favicon, che hanno girato per molti molti anni, sono state le prime icone di questo tipo: icone 16 x 16 pixel usate in molti modi. Le favicon possono essere aggiunte alla pagina :

  1. Salvandole nella stessa directory in cui è salvato il file index.html nel formato .ico (molti browser supportano le favicons in formati più comuni, come .gif or .png,  ma usando il formato .ico si è sicuri che funzionino anche con browser vecchi come Internet Explorer 6.)
  2. Aggiungendo la seguente riga nella <head> del docuemnto HTML per creare un riferimento all'icona:
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

I browser moderni usano le favicon in molti posti, come nella scheda in cui la pagina è aperta o nel pannello dei segnalibri quando la pagina è salvata tra i preferiti.

The Firefox bookmarks panel, showing a bookmarked example with a favicon displayed next to it.

Ci sono molti altri tipi di icone da prendere in considerazione attualmente. Per esempio, nel codice della homepage MDN troverai questo:

<!-- third-generation iPad with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.cdn.mozilla.net/static/img/favicon144.a6e4162070f4.png">
<!-- iPhone with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.cdn.mozilla.net/static/img/favicon114.0e9fabd44f85.png">
<!-- first- and second-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.cdn.mozilla.net/static/img/favicon72.8ff9d87c82a0.png">
<!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="https://developer.cdn.mozilla.net/static/img/favicon57.a2490b9a2d76.png">
<!-- basic favicon -->
<link rel="shortcut icon" href="https://developer.cdn.mozilla.net/static/img/favicon32.e02854fdcf73.png">

I commenti spiegano per cosa è usata ciascuna icona — questi elementisoddisfano esigenze quali, ad esempio, fornire una piacevole icona ad alta risoluzione quando il sito è salvato nello schermo di un iPad.

Non preoccuparti troppo di aggiungere tutti questi tipi di icone al momento — sono caratteristiche piuttosto avanzate e non ci si aspetta che tu conosca queste cose per progredire nel corso. Lo scopo principale, qui, è farti sapere cosa sono queste cose nel caso le incontri mentre navighi il codice sorgente di altri siti web.

Applicare CSS e JavaScript all'HTML

Pressoché tutti i siti web, oggi, impiegano i CSS per apparire fantastici e i  JavaScript per potenziare l'interattività, i video players, le mappe, i giochi e altro. CSS e JavaScript sono generalmente applicati alle pagine web usando l'elemento <link> e l'elemento <script> rispettivamente.

  • L'elemento <link> va sempre inserito nella head del documento; comprende due attributi: rel="stylesheet", che indica di essere riferito ad un documento foglio di stile (stylesheet); e href, che contiene il percorso fino al file css corrispondente al foglio di stile

    <link rel="stylesheet" href="my-css-file.css">
  • L'elemento <script> non deve necessariamente essere nella head; in effetti, è spesso meglio metterlo al fondo del body del documento (proprio prima di chiudere il tag </body>), per essere sicuri che il documento HTML sia a disposizione del browser prima che provi ad applicargli il javascript (se il Javascript provasse ad accedere ad un elemento che ancora non esiste, il browser darebbe un errore).

    <script src="my-js-file.js"></script>

    Note: l'elemento <script> può sembrare simile ad un elemento vuoto, ma non lo è e necessita del tag di chiusura. Invece di puntare ad un file esterno contenente uno script, puoi anche decidere di mettere lo script dentro l'elemento <script> .

Active learning: applicare CSS e JavaScript ad una pagina

  1. Per iniziare questo apprendimento attivo, preleva una copia del nostro meta-example.html, dello script.js e del file style.css , e salvali nel tuo computer nella stessa directory. Assicurati che siano salvati con i nomi e le estensioni dei nomi corrette.
  2. Apri il file HTML sia nel browser che nel tuo editor di testo
  3. Seguendo le informazioni date precedentemente, aggiungi gli elementi <link> e <script> al tuo HTML così che il CSS e il JavaScript gli siano applicati.

Se fatto correttamente, quando salvi l' HTML e ricarichi la pagina del browser, vedrai cambiare le cose (la lista non ci sarà, perché la dovete fare voi; il testo dice: "Qui sotto c'è una lista dinamica. Clicca ovunque fuori dalla lista per aggiungerle un nuovo punto. Clicca un punto della lista per cambiare il suo testo in qualcos'altro").

Example showing a page with CSS and JavaScript applied to it. The CSS has made the page go green, whereas the JavaScript has added a dynamic list to the page.

  • Il Javascript ha aggiunto una lista vuota alla pagina. Adesso, quando clicchi altrove, si aprirà una finestra di dialogo che chiederà di introdurre del testo per un nuovo punto della lista; quando premi OK, l'elemento della lista verrà aggiunto. Quando clicchi un elemento esistente, si aprirà una finestra di dialogo che ti permetterà di cambiare quell'elemento.
  • Il CSS ha reso verde il background e più grande il testo. Ha anche dato uno stile al contenuto aggiunto dal JavaScript (ha aggiunto lo sfondo rosso e il bordo nero alla lista generata dal JavaScript).

Note: se sei bloccato e non riesci ad applicare i CSS/JS , prova ad esaminare la pagina d'esempio css-and-js.html.

Impostare la lingua principale del documento

In fine. vale la pena dire che si può (e lo si dovrebbe proprio fare) impostare la lingua della pagina. Può essere fatto aggiungendo l'attributo lang al tag HTML di apertura (come visto nel meta-example.html.)

<html lang="en-US">

Ciò si rivela utile in molti modi. Il tuo documento sarà indicizzato meglio dai motori di ricerca (permettendoti di apparire correttamente nelle ricerche per linguaggi specifici) ed è utile agli utenti con disabilità visive che usano degli screen readers (per esempio, la parola "six" esiste sia in francese che in inglese, ma è pronunciata diversamente.)

Puoi anche impostare sottosezioni del documento perché vengano riconosciute come scritte in altre lingue; possiamo impostare la lingua giapponese per il nostro esempio in questo modo:

<p>Japanese example: <span lang="jp">ご飯が熱い。</span>.</p>

Questi codici sono definiti dalla ISO 639-1. Puoi trovare più informazioni a questo riguardo in Language tags in HTML and XML.

Queso segna la fine del corso accelerato sull'elemento HTML head — ci sarebbe molto di più da dire, ma un corso completo sarebbe noioso e porterebbe confusione a questo stadio dell'apprendimento; volevamo solo darti un'idea delle cose che più comunemente vi ci troverai. Nel prossimo articolo vedremo i fondamenti dell'HTML per il testo.

Tag del documento e collaboratori

 Hanno collaborato alla realizzazione di questa pagina: howilearn
 Ultima modifica di: howilearn,