Tag HTML <meta>
Esempio
Descrivi i metadati all'interno di un documento HTML:
<head>
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John Doe">
<meta
name="viewport" content="width=device-width, initial-scale=1.0">
</head>
Altri esempi "Provalo da solo" di seguito.
Definizione e utilizzo
Il <meta>
tag definisce i metadati su un documento HTML. I metadati sono dati (informazioni) sui dati.
<meta>
i tag vanno sempre all'interno dell'elemento <head> e sono in genere usati 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 sulla pagina, ma sono analizzabili dalla macchina.
I metadati vengono utilizzati dai browser (come visualizzare il contenuto o ricaricare la pagina), dai motori di ricerca (parole chiave) e da altri servizi web.
Esiste un metodo per consentire ai web designer di assumere il controllo della finestra (l'area visibile dell'utente di una pagina Web), tramite il <meta>
tag (vedere l'esempio "Impostazione della finestra" di seguito).
Supporto browser
Element | |||||
---|---|---|---|---|---|
<meta> | Yes | Yes | Yes | Yes | Yes |
Attributi
Attribute | Value | Description |
---|---|---|
charset | character_set | Specifies the character encoding for the HTML document |
content | text | Specifies the value associated with the http-equiv or name attribute |
http-equiv | content-security-policy content-type default-style refresh |
Provides an HTTP header for the information/value of the content attribute |
name | application-name author description generator keywords viewport |
Specifies a name for the metadata |
Attributi globali
Il <meta>
tag supporta anche gli attributi globali in HTML .
Altri esempi
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 for
HTML and CSS">
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">
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.
Puoi leggere di più sul viewport nel nostro Responsive Web Design - Il tutorial sul viewport .
Pagine correlate
Tutorial HTML: Testa HTML
Riferimento HTML DOM: Meta Object
Impostazioni CSS predefinite
Nessuno.