HTML - L'elemento testa
L'elemento HTML <head>
è un contenitore per i seguenti elementi:
<title>
, <style>
,
<meta>
, <link>
, <script>
, e <base>
.
L'elemento HTML <head>
L' <head>
elemento è un contenitore di metadati (dati sui dati) e viene posizionato tra il <html>
tag e il <body>
tag.
I metadati HTML sono dati relativi al documento HTML. I metadati non vengono visualizzati.
I metadati in genere definiscono il titolo del documento, il set di caratteri, gli stili, gli script e altre metainformazioni.
L'elemento HTML <titolo>
L' <title>
elemento definisce il titolo del documento. Il titolo deve essere di solo testo e viene visualizzato nella barra del titolo del browser o nella scheda della pagina.
L' <title>
elemento è richiesto nei documenti HTML!
Il contenuto del titolo di una pagina è molto importante per l'ottimizzazione dei motori di ricerca (SEO)! Il titolo della pagina viene utilizzato dagli algoritmi dei motori di ricerca per decidere l'ordine quando si elencano le pagine nei risultati di ricerca.
L' <title>
elemento:
- 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
Quindi, cerca di rendere il titolo il più accurato e significativo possibile!
Un semplice documento HTML:
Esempio
<!DOCTYPE html>
<html>
<head>
<title>A Meaningful Page
Title</title>
</head>
<body>
The content of the document......
</body>
</html>
L'elemento HTML <stile>
L' <style>
elemento viene utilizzato per definire le informazioni di stile per una singola pagina HTML:
Esempio
<style>
body {background-color: powderblue;}
h1 {color: red;}
p {color: blue;}
</style>
L'elemento HTML <link>
L' <link>
elemento definisce la relazione tra il documento corrente e una risorsa esterna.
Il <link>
tag viene spesso utilizzato per creare collegamenti a fogli di stile esterni:
Esempio
<link rel="stylesheet" href="mystyle.css">
Suggerimento: per saperne di più sui CSS, visita il nostro Tutorial CSS .
L'elemento HTML <meta>
L' <meta>
elemento viene in genere utilizzato 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 verranno visualizzati nella pagina, ma vengono utilizzati dai browser (come visualizzare i contenuti o ricaricare la pagina), dai motori di ricerca (parole chiave) e da altri servizi web.
Esempi
Definire il set di caratteri utilizzato:
<meta charset="UTF-8">
Definisci le parole chiave per i motori di ricerca:
<meta name="keywords" content="HTML, CSS, JavaScript">
Definisci una descrizione della tua pagina web:
<meta name="description" content="Free Web tutorials">
Definisci l'autore di una pagina:
<meta name="author" content="John Doe">
Aggiorna documento ogni 30 secondi:
<meta http-equiv="refresh" content="30">
Impostazione del viewport per rendere il tuo sito web bello da vedere su tutti i dispositivi:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Esempio di <meta>
tag:
Esempio
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John
Doe">
Impostazione della vista
Il viewport è l'area visibile dell'utente di una pagina web. Varia a seconda del dispositivo: sarà più piccolo su un telefono cellulare che sullo schermo di un computer.
Dovresti includere il seguente <meta>
elemento in tutte le tue pagine web:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Questo fornisce al browser le istruzioni su come controllare le dimensioni e il ridimensionamento della pagina.
La width=device-width
parte imposta la larghezza della pagina per seguire la larghezza dello schermo del dispositivo (che varierà a seconda del dispositivo).
La initial-scale=1.0
parte imposta il livello di zoom iniziale quando la pagina viene caricata per la prima volta dal browser.
Ecco un esempio di una pagina web senza il meta tag viewport e la stessa pagina web con il meta tag viewport:
Suggerimento: se stai navigando questa pagina con un telefono o un tablet, puoi fare clic sui due collegamenti sottostanti per vedere la differenza.
L'elemento HTML <script>
L' <script>
elemento viene utilizzato per definire JavaScript lato client.
Il seguente JavaScript scrive "Hello JavaScript!" in un elemento HTML con id="demo":
Esempio
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>
Suggerimento: per saperne di più su JavaScript, visita il nostro tutorial JavaScript .
L'elemento HTML <base>
L' <base>
elemento specifica l'URL di base e/o la destinazione per tutti gli URL relativi in una pagina.
Il <base>
tag deve avere un attributo href o target presente o entrambi.
Può esserci un solo <base>
elemento in un documento!
Esempio
Specifica un URL predefinito e una destinazione predefinita per tutti i collegamenti in una pagina:
<head>
<base href="https://www.w3schools.com/" target="_blank">
</head>
<body>
<img src="images/stickman.gif" width="24" height="39"
alt="Stickman">
<a href="tags/tag_base.asp">HTML base Tag</a>
</body>
Riassunto capitolo
- L'
<head>
elemento è un contenitore di metadati (dati sui dati) - L'
<head>
elemento viene posizionato tra il<html>
tag e il<body>
tag - L'
<title>
elemento è obbligatorio e definisce il titolo del documento - L'
<style>
elemento viene utilizzato per definire le informazioni di stile per un singolo documento - Il
<link>
tag viene spesso utilizzato per collegare fogli di stile esterni - L'
<meta>
elemento viene in genere utilizzato per specificare il set di caratteri, la descrizione della pagina, le parole chiave, l'autore del documento e le impostazioni del viewport - L'
<script>
elemento viene utilizzato per definire JavaScript lato client - L'
<base>
elemento specifica l'URL di base e/o la destinazione per tutti gli URL relativi in una pagina
Elementi della testata HTML
Tag | Description |
---|---|
<head> | Defines information about the document |
<title> | Defines the title of a document |
<base> | Defines a default address or a default target for all links on a page |
<link> | Defines the relationship between a document and an external resource |
<meta> | Defines metadata about an HTML document |
<script> | Defines a client-side script |
<style> | Defines style information for a document |
Per un elenco completo di tutti i tag HTML disponibili, visita il nostro Riferimento ai tag HTML .