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-widthparte imposta la larghezza della pagina per seguire la larghezza dello schermo del dispositivo (che varierà a seconda del dispositivo).

La initial-scale=1.0parte 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.