Home documentazione html sezione head

Elemento <head> HTML

L’elemento HTML <head> è un contenitore per gli elementi seguenti: <title>, <style>, <meta>, <link>, <script> e <base>.
L’elemento <head> è un contenitore per i metadati (dati sui dati) e viene posizionato tra il tag <html> e il tag <body>.

I metadati HTML sono dati sul documento HTML. I metadati non vengono visualizzati.

Di solito i metadati definiscono il titolo del documento, il set di caratteri, gli stili, gli script e altre informazioni meta.

L’elemento HTML `<title>`

L’elemento <title> definisce il titolo obbligatorio del documento. Il titolo deve essere solo testo ed è mostrato nella barra del titolo del browser o nella scheda della pagina.

Il contenuto del titolo della pagina è molto importante per l’ottimizzazione per i motori di ricerca (SEO). Il titolo della pagina viene utilizzato dagli algoritmi dei motori di ricerca per decidere l’ordine in cui elencare le pagine nei risultati di ricerca.

L’elemento <title>:

definisce un titolo nella barra degli strumenti del browser
fornisce un titolo per la pagina quando viene aggiunta ai preferiti
visualizza un titolo per la pagina nei risultati dei motori di ricerca

<!DOCTYPE html>
<html>
  <head>
    <title>Un Titolo Significativo per la Pagina</title>
  </head>
  <body>
    Il contenuto del documento......
  </body>
</html>

L’elemento HTML `<style>`

L’elemento <style> viene utilizzato per definire informazioni di stile per una singola pagina HTML:

<style>
  body {
    background-color: salmon;
  }
  h1 {
    color: green;
  }
  p {
    color: blue;
  }
</style>

L’elemento HTML `<link>`

L’elemento <link> definisce la relazione tra il documento corrente e una risorsa esterna.

Il tag <link> viene utilizzato più spesso per collegarsi a fogli di stile esterni:

<link rel="stylesheet" href="style.css" />

L’elemento HTML `<meta>`

L’elemento <meta> viene utilizzato tipicamente per specificare il set di caratteri, la descrizione della pagina, le parole chiave, l’autore del documento e le impostazioni del viewport.

I metadati non saranno visualizzati nella pagina, ma vengono utilizzati dai browser (per visualizzare il contenuto o ricaricare la pagina), dai motori di ricerca (parole chiave) e da altri servizi web.

Definire il set di caratteri utilizzato:

<meta charset="UTF-8" />

Definire le parole chiave per i motori di ricerca:

<meta name="keywords" content="HTML, CSS, JavaScript" />

Definire una descrizione della tua pagina web:

<meta name="description" content="Tutorial Web gratuiti" />

Definire l’autore di una pagina:

<meta name="author" content="Mario Rossi" />

Aggiornare il documento ogni 30 secondi:

<meta http-equiv="refresh" content="30" />

Impostare il viewport per far apparire il tuo sito web bene su tutti i dispositivi:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Impostare il viewport

Il viewport è l’area visibile dell’utente di una pagina web. Varia con il dispositivo: sarà più piccolo su un telefono cellulare rispetto a uno schermo di computer.

Dovresti includere l’elemento <meta> seguente in tutte le tue pagine web:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Questo dà al browser istruzioni su come controllare le dimensioni e la scala della pagina.

La parte width=device-width imposta la larghezza della pagina per seguire la larghezza dello schermo del dispositivo (che varierà a seconda del dispositivo).

La parte initial-scale=1.0 imposta il livello di zoom iniziale quando la pagina viene caricata per la prima volta dal browser.

L’elemento HTML `<script>`

L’elemento <script> viene utilizzato per definire script lato client.

Il seguente script JavaScript scrive “Ciao JavaScript!” in un elemento HTML con id=“demo”:

<script>
  function sonoUnaFunzione() {
    document.getElementById("paragrafo").innerHTML = "Ciao JavaScript!";
  }
</script>

L’elemento HTML `<base>`

L’elemento <base> specifica l’URL base e/o il target per tutti gli URL relativi in una pagina.

Il tag <base> deve avere presente l’attributo href o l’attributo target, o entrambi.

Ci può essere solo un singolo elemento <base> in un documento!

<head>
  <base href="https://www.codegrind.it/" target="_blank" />
</head>

<body>
  <img src="immagini/logo.png" width="24" height="39" alt="Logo Codegrind" />
  <a href="blog/articolo-a-caso.html">Link ad un articolo</a>
</body>

Elemento <head> HTML

L’elemento HTML <title>

L’elemento HTML <style>

L’elemento HTML <link>

L’elemento HTML <meta>