Etiqueta HTML <meta>
Ejemplo
Describa los metadatos dentro de 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>
Más ejemplos de "Pruébelo usted mismo" a continuación.
Definición y uso
La <meta>etiqueta define metadatos sobre un documento HTML. Los metadatos son datos (información) sobre datos.
<meta>Las etiquetas siempre van dentro del elemento <head> y normalmente se utilizan para especificar el juego de caracteres, la descripción de la página, las palabras clave, el autor del documento y la configuración de la ventana gráfica.
Los metadatos no se mostrarán en la página, pero son analizables por máquina.
Los navegadores utilizan metadatos (cómo mostrar contenido o recargar una página), motores de búsqueda (palabras clave) y otros servicios web.
Existe un método para permitir que los diseñadores web tomen el control de la ventana gráfica (el área visible del usuario de una página web), a través de la <meta>etiqueta (consulte el ejemplo "Configuración de la ventana gráfica" a continuación).
Compatibilidad con navegador
| Element | |||||
|---|---|---|---|---|---|
| <meta> | Yes | Yes | Yes | Yes | Yes |
Atributos
| 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 |
Atributos globales
La <meta>etiqueta también es compatible con los atributos globales en HTML .
Más ejemplos
Definir palabras clave para motores de búsqueda:
<meta name="keywords" content="HTML, CSS, JavaScript">
Define una descripción de tu página web:
<meta name="description" content="Free Web tutorials for
HTML and CSS">
Definir el autor de una página:
<meta name="author" content="John Doe">
Actualizar documento cada 30 segundos:
<meta http-equiv="refresh" content="30">
Configuración de la ventana gráfica para que su sitio web se vea bien en todos los dispositivos:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Configuración de la ventana gráfica
La ventana gráfica es el área visible del usuario de una página web. Varía según el dispositivo: será más pequeño en un teléfono móvil que en la pantalla de una computadora.
Debes incluir el siguiente <meta>elemento en todas tus páginas web:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Esto le da al navegador instrucciones sobre cómo controlar las dimensiones y la escala de la página.
La width=device-widthparte establece el ancho de la página para seguir el ancho de pantalla del dispositivo (que variará según el dispositivo).
La initial-scale=1.0parte establece el nivel de zoom inicial cuando el navegador carga la página por primera vez.
Este es un ejemplo de una página web sin la metaetiqueta de ventana gráfica y la misma página web con la metaetiqueta de ventana gráfica:
Sugerencia: si está navegando por esta página con un teléfono o una tableta, puede hacer clic en los dos enlaces a continuación para ver la diferencia.
Puede leer más sobre la ventana gráfica en nuestro Diseño web receptivo: el tutorial de la ventana gráfica .
páginas relacionadas
Tutorial HTML: Cabecera HTML
Referencia HTML DOM: metaobjeto
Configuración predeterminada de CSS
Ninguna.