W3docs
it
Accedi

Tag HTML <head>

Il tag HTML <head> contiene metadati della pagina (titolo, charset, viewport, link, script). Sintassi, meta tag comuni ed esempi pratici.

Il tag <head> contiene metadati (titolo del documento, set di caratteri, stili, link, script), ovvero informazioni specifiche sulla pagina web che non vengono visualizzate all'utente. I metadati forniscono ai browser e ai motori di ricerca informazioni tecniche sulla pagina web.

Dove si trova il <head>

Il <head> è il primo elemento all'interno di <html>, posizionato direttamente prima del <body>. Mentre il <body> contiene il contenuto visibile della pagina, il <head> contiene le informazioni di sfondo di cui il browser ha bisogno per renderizzare e identificare la pagina:

<!DOCTYPE html>
<html>
  <head>
    <!-- metadata goes here -->
  </head>
  <body>
    <!-- visible content goes here -->
  </body>
</html>

Il <head> è tecnicamente obbligatorio, ma se viene omesso, i browser ne creeranno uno in modo silenzioso e sposteranno al suo interno gli elementi di livello head (come <title> e <meta>). Scriverlo esplicitamente rende il documento prevedibile e valido.

Elementi che si possono inserire nel <head>

Il <head> include i seguenti elementi:

  • Il tag <title> definisce il titolo di una pagina web (obbligatorio). Può essere confuso con il tag <h1>, ma sono diversi. Il tag <h1> specifica il titolo del contenuto della pagina, mentre il tag <title> è un metadato che rappresenta il titolo dell'intero contenuto HTML e non il suo contenuto.
  • Il tag <style> contiene codice CSS che definisce come gli elementi HTML devono essere visualizzati nel browser.
  • Il tag <base> definisce un URL assoluto (base) per tutti gli URL relativi.
  • Il tag <link> definisce la relazione tra il documento HTML corrente e la risorsa a cui fa riferimento, oppure contiene un collegamento a un foglio di stile esterno. Può avere due attributi: rel="stylesheet" e href.
  • Il tag <meta> fornisce informazioni aggiuntive (metadati) su un documento HTML. Il <head> di una pagina può includere diversi tipi di elementi <meta> che possono contenere gli attributi name e content.
  • Il tag <script> contiene uno script (generalmente JavaScript) o un riferimento a un file esterno con script. Questo elemento può essere incluso nel <head>. A volte è preferibile inserirlo in fondo al <body> per migliorare le prestazioni di caricamento della pagina. L'elemento <script> può sembrare vuoto, ma non lo è.
  • Il tag <noscript> definisce un testo alternativo che viene visualizzato se il browser non supporta gli script o se gli script sono disabilitati dall'utente.

Il tag <head> va in coppia. Il contenuto viene scritto tra il tag di apertura (<head>) e quello di chiusura (</head>).

Esempi

Esempio del tag HTML <head> usato con i tag <title> e <style>:

Esempio di un tag head HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Title of the document</title>
    <style>
      body{
        background-color: #d3d3d3;
      }
      p{
        color:  #1c87c9;
      }
      a{
        color: red;
      }
    </style>
  </head>
  <body>
    <p>Paragraph</p>
    <a href="#">Link</a>
  </body>
</html>
Provalo tu stesso »

Nell'esempio riportato, il tag <head> è usato con i tag <title> e <style>. Il tag <title> definisce il titolo del documento, che viene visualizzato nella finestra del browser. Nel tag <style> viene definito lo stile del documento: lo sfondo del documento è grigio chiaro, il testo nei paragrafi contrassegnati con il tag <p> è blu, e i link all'interno del tag <a> sono rossi.

Il contenuto della pagina

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
  </head>
  <body>
    <p>The content of the page</p>
  </body>
</html>
Provalo tu stesso »

Qui il tag <link> collega la pagina a un foglio di stile esterno in css/style.css (un file nella cartella css accanto al file HTML). Mantenere il CSS in un file separato è l'approccio standard per i progetti reali, perché lo stesso foglio di stile può essere condiviso tra molte pagine e memorizzato nella cache dal browser. La pagina sopra mostrerà gli stili solo se il file style.css esiste effettivamente nel percorso indicato.

Esempio del tag HTML <head> usato con il tag <meta>:

Tag HTML <head>

<!DOCTYPE html>
<html>
  <head>
    <meta name="title" content="HTML and CSS Books" />
    <meta name="description" content="HTML and CSS Basics for Beginners" />
    <meta http-equiv="refresh" content="30" />
  </head>
  <body>
    <p>The content of the page</p>
  </body>
</html>
Provalo tu stesso »

Il tag <meta> fornisce metadati sulla pagina. Il contenuto name="description" viene utilizzato dai motori di ricerca come testo di anteprima nei risultati di ricerca. La riga http-equiv="refresh" ricarica la pagina ogni 30 secondi — questo è raramente appropriato oggi (danneggia l'accessibilità ed è di solito sostituito da JavaScript o header HTTP), quindi usarlo con parsimonia.

I tag <meta> di cui si ha quasi sempre bisogno

Alcuni tag <meta> sono così comuni che quasi ogni pagina moderna li include.

Codifica dei caratteri e viewport

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>My Page</title>
</head>
  • <meta charset="UTF-8"> dichiara la codifica dei caratteri affinché lettere accentate, simboli ed emoji vengano visualizzati correttamente. Va inserito per primo nel <head>.
  • <meta name="viewport" content="width=device-width, initial-scale=1"> indica ai browser mobili di adattare la larghezza del layout alla larghezza del dispositivo, invece di ridurre una pagina di dimensioni desktop. Omettere questo tag è la causa più comune di pagine "minuscole" sui telefoni, quindi va incluso in ogni pagina responsive.

Tag Open Graph per la condivisione sui social

Quando qualcuno condivide il tuo URL su piattaforme come Facebook, LinkedIn o Slack, questi servizi leggono i meta tag Open Graph (og:) per costruire la card di anteprima — il titolo, il riepilogo e l'immagine in miniatura.

<head>
  <meta property="og:title" content="Learn HTML - W3docs" />
  <meta property="og:description" content="A beginner-friendly HTML tutorial." />
  <meta property="og:image" content="https://www.example.com/preview.png" />
  <meta property="og:url" content="https://www.example.com/learn-html" />
</head>

Nota che i tag Open Graph usano l'attributo property (non name). L'URL di og:image deve essere assoluto (iniziare con https://), poiché la piattaforma social lo recupera dai propri server. Consulta il capitolo <meta> per l'elenco completo dei tag <meta>.

Attributi

In HTML5, il tag <head> non ha attributi specifici. Supporta solo gli Attributi Globali e gli Attributi Evento.

Esercitazione

Pratica
Quale meta tag dovrebbe includere ogni pagina responsive nel suo head?
Quale meta tag dovrebbe includere ogni pagina responsive nel suo head?
Was this page helpful?