Definición destacada
¿Como funciona el comando en HTML5: 'meta'?
Última modificación: 2024-06-14
Elemento <meta> en HTML5
El elemento <meta> en HTML5 es un elemento vacío (no tiene contenido ni una etiqueta de cierre) que se utiliza para representar metadatos sobre el documento HTML. Los metadatos ayudan a proporcionar información básica sobre el documento, como la descripción, palabras clave, autor, y más. Este elemento suele colocarse en la sección <head> del documento.
Atributos del Elemento <meta>
-
charset:
- Define la codificación de caracteres del documento.
- Ejemplo:
<meta charset="UTF-8">
-
name:
- Especifica el nombre del metadato. Este atributo se usa en combinación con el atributo
content. - Ejemplos de valores comunes:
description,keywords,author,viewport. - Ejemplo:
<meta name="description" content="Una breve descripción de la página.">
- Especifica el nombre del metadato. Este atributo se usa en combinación con el atributo
-
http-equiv:
- Proporciona encabezados de respuesta HTTP equivalentes.
- Valores comunes:
content-type,expires,refresh,set-cookie. - Ejemplo:
<meta http-equiv="refresh" content="30">
-
content:
- Define el valor asociado con el atributo
nameohttp-equiv. - Ejemplo:
<meta name="author" content="Jane Doe">
- Define el valor asociado con el atributo
-
scheme:
- Define un esquema para interpretar el valor del atributo
content. Este atributo es poco común y no se usa frecuentemente.
- Define un esquema para interpretar el valor del atributo
-
property:
- Utilizado principalmente con las Open Graph Protocol (OGP) para integrar metadatos en redes sociales.
- Ejemplo:
<meta property="og:title" content="The Rock">
Uso del Elemento <meta> en HTML5 con Ejemplos
1. Definir la Codificación de Caracteres
Definir la codificación de caracteres es crucial para garantizar que se muestren correctamente los caracteres especiales.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo de Codificación</title>
</head>
<body>
<p>¡Hola mundo!</p>
</body>
</html>2. Proporcionar una Descripción del Documento
Esto es útil para mejorar la optimización del motor de búsqueda (SEO).
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="description" content="Esta es una página de ejemplo para demostrar el uso del elemento meta.">
<title>Ejemplo de Descripción</title>
</head>
<body>
<p>Contenido de la página.</p>
</body>
</html>3. Definir Palabras Clave para SEO
Las palabras clave pueden ayudar en la indexación de motores de búsqueda.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="HTML, ejemplo, meta, SEO">
<title>Ejemplo de Palabras Clave</title>
</head>
<body>
<p>Contenido de la página.</p>
</body>
</html>4. Especificar el Autor del Documento
Esto proporciona información sobre quién creó el documento.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="author" content="Juan Pérez">
<title>Ejemplo de Autor</title>
</head>
<body>
<p>Contenido de la página.</p>
</body>
</html>5. Configurar Vista en Dispositivos Móviles
El atributo viewport se utiliza para controlar cómo se muestra una página web en dispositivos móviles.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de Viewport</title>
</head>
<body>
<p>Contenido de la página.</p>
</body>
</html>6. Redireccionar a Otra Página Después de un Tiempo
Utilizando el atributo http-equiv, puedes redirigir automáticamente a otra página.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="refresh" content="10;url=https://www.ejemplo.com">
<title>Ejemplo de Redirección</title>
</head>
<body>
<p>Serás redirigido en 10 segundos.</p>
</body>
</html>Estos son solo algunos ejemplos y usos comunes del elemento <meta> en HTML5, destacando su importancia para SEO , accesibilidad, y correcta representación del contenido web.