Etiqueta HTML <meta>

Definition and usage

<meta> The tag defines metadata about the HTML document. Metadata is data about data (information).

<meta> The tag is always located <head> element Within, it is usually used to specify character set, page description, keywords, document author, and viewport settings:

Metadata is not displayed on the page but can be parsed by machines.

Browsers (how to display content or reload the page), search engines (keywords), and other network services use metadata.

Consejo:Meta elements have various different uses, and multiple meta elements can be used in a single HTML document.

Consejo:Through <meta> There is a method to let web designers control the viewport (i.e., the area visible to the user in the web page) (see the "Set viewport" example below).

Note:Each meta element can be used for only one purpose. If you want to use more than one feature, you should add multiple meta elements in the head element.

See also:

HTML tutorial:HTML header

HTML DOM Reference Manual:Meta object

Example

<head>
  <meta charset="UTF-8">
  <meta name="description" content="Free Web tutorial">
  <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>

Try it yourself

Attribute

Attribute Value Description
charset Character set Define the character encoding of the HTML document.
content Text Define the value associated with the http-equiv or name attribute.
http-equiv
  • content-security-policy
  • content-type
  • default-style
  • refresh
 Proporcionar información/valor para el atributo content mediante encabezados HTTP.
name
  • application-name
  • author
  • description
  • generator
  • keywords
  • viewport
 Especificar el nombre de los metadatos.

Atributos globales

<meta> La etiqueta también admite Atributos globales de HTML.

Los elementos meta tienen tres usos típicos:

  1. Especificar pares de metadatos nombre/valor
  2. Declaración de codificación de caracteres
  3. Simulación de campos de encabezado HTTP

1: Especificar varios pares de metadatos nombre/valor

El elemento meta puede definir metadatos utilizando pares nombre/valor, para esto se utilizan sus propiedades name y content.

Definir palabras clave para los motores de búsqueda:

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

Definir una descripción sobre la página web:

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

Definir el autor de la página:

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

Configurar la vista para mejorar la apariencia del sitio web en varios dispositivos:

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

2: Declaración de codificación de caracteres

Utilice la propiedad charset para declarar que esta página utiliza la codificación UTF-8:

<meta charset="UTF-8">

3: Simulación de campos de encabezado HTTP

Utilice las propiedades http-equiv y content para refrescar el documento cada 30 segundos:

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

Cambios en HTML5

La propiedad charset es una nueva adición en HTML5.

En HTML4, la propiedad http-equiv puede tener múltiples valores diferentes. En HTML5, solo se pueden usar los valores mencionados en esta página.

La propiedad scheme de HTML4 ya no se utiliza en HTML5.

Además, ya no se utiliza el elemento meta para especificar el idioma utilizado en la página web.

configurar la vista de portada

HTML5 ha introducido un método que permite a los diseñadores web <meta> etiquetas en todas las páginas web para controlar la vista.

Usted debe incluir los siguientes <meta> Elemento de vista:

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

Proporciona instrucciones al navegador sobre cómo controlar el tamaño de la página y la escala.

width=device-width Se establece el ancho de la página para seguir el ancho de la pantalla del dispositivo (según el dispositivo).

Cuando el navegador carga la página por primera vez,initial-scale=1.0 Configuración inicial del nivel de zoom.

A continuación, se muestran ejemplos de una página web sin etiqueta meta viewport y de una página web con etiqueta meta viewport:

Consejo:Si usa un teléfono o una tableta para navegar por esta página, puede hacer clic en los dos enlaces siguientes para ver las diferencias.



Sin marcador de meta viewport


Con marcador de meta viewport

Configuración CSS predeterminada

Ninguno.

Compatibilidad con navegadores

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Soporte Soporte Soporte Soporte Soporte