📢 Nuovo Corso Tailwind Completo disponibile!

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