Tag HTML <meta>

Definizione e uso

<meta> L'elemento <meta> definisce i metadati relativi al documento HTML. I metadati sono dati (informazioni) sui dati (informazioni).

<meta> L'elemento <meta> è sempre posizionato Elemento <head> All'interno, generalmente 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 vengono visualizzati sulla pagina, ma possono essere interpretati dalle macchine.

I browser (come visualizzare il contenuto o ricaricare la pagina), i motori di ricerca (parole chiave) e altri servizi di rete utilizzano i metadati.

Suggerimento:Gli elementi meta hanno più usi diversi e possono essere utilizzati più volte in un documento HTML.

Suggerimento:Attraverso <meta> C'è un metodo che permette ai designer web di controllare il viewport (cioè l'area visibile all'utente nella pagina web) (vedi l'esempio di "Impostazioni viewport" qui sotto).

Attenzione:Ogni elemento meta può essere utilizzato solo per uno scopo. Se si desidera utilizzare più caratteristiche, è necessario aggiungere più elementi meta all'interno dell'elemento head.

Vedi anche:

Tutoriale HTML:Intestazione HTML

Manuale di riferimento HTML DOM:Oggetto Meta

Esempio

<head>
  <meta charset="UTF-8">
  <meta name="description" content="Tutoriale Web gratuito">
  <meta name="keywords" content="HTML, CSS, JavaScript">
  <meta name="author" content="Bill Gates">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

Prova tu stesso

Attributo

Attributo Valore Descrizione
charset Set di caratteri Determina la codifica dei caratteri del documento HTML.
content Testo Determina il valore associato all'attributo http-equiv o name.
http-equiv
  • content-security-policy
  • content-type
  • default-style
  • refresh
 Fornisce intestazioni HTTP per le informazioni/valori dell'attributo content.
name
  • application-name
  • author
  • description
  • generator
  • keywords
  • viewport
 che definiscono il nome dei metadati.

attributi globali

<meta> L'etichetta supporta anche Attributi globali dell'HTML.

Gli elementi meta hanno tre usi tipici:

  1. Specificazione dei paia di metadati nome/valore
  2. Dichiarazione della codifica dei caratteri
  3. Simulazione dei campi di intestazione HTTP

1: Specifica vari paia di metadati nome/valore

L'elemento meta può definire i metadati utilizzando coppie nome/valore, per questo è necessario utilizzare i属性 name e content.

Definisce le parole chiave per i motori di ricerca:

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

Definisce una descrizione del sito web:

<meta name="description" content="Free Web tutorials for HTML and CSS">

Definisce l'autore della pagina:

<meta name="author" content="John Doe">

Imposta il viewport per migliorare l'aspetto del sito su vari dispositivi:

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

2: Dichiarazione della codifica dei caratteri

Utilizza l'attributo charset per dichiarare che la pagina utilizza la codifica di caratteri UTF-8:

<meta charset="UTF-8">

3: Simulazione dei campi di intestazione HTTP

Utilizzando l'attributo http-equiv e l'attributo content, il documento viene aggiornato ogni 30 secondi:

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

Modifiche nell'HTML5

L'attributo charset è una nuova aggiunta nell'HTML5.

In HTML4, l'attributo http-equiv poteva avere più valori diversi. Nell'HTML5, è possibile utilizzare solo i valori menzionati in questa pagina.

L'attributo scheme dell'HTML4 non è più utilizzato nell'HTML5.

Inoltre, l'elemento meta non viene più utilizzato per specificare la lingua del sito web.

impostare il viewport

HTML5 ha introdotto un metodo che permette ai designer web di <meta> per controllare il viewport.

Dovresti includere le seguenti etichette in tutte le pagine web: <meta> Elemento di viewport:

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

Fornisce istruzioni al browser su come controllare le dimensioni della pagina e la scala di zoom.

width=device-width Parte imposta la larghezza della pagina come la larghezza dello schermo del dispositivo (a seconda del dispositivo).

Quando il browser carica la pagina per la prima volta,initial-scale=1.0 Impostazioni di zoom iniziale di parte.

Di seguito ci sono esempi di pagine web senza etichetta meta viewport e di pagine web con etichetta meta viewport:

Suggerimento:Se stai navigando questa pagina su uno smartphone o tablet, puoi fare clic sui due link sottostanti per vedere le differenze.



Senza etichetta viewport


Con etichetta viewport

Impostazioni CSS predefinite

Nessuno.

Supporto browser

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Supporto Supporto Supporto Supporto Supporto