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>