Apuntes sobre Html

HTML nunca falla, solo se ve raro.

Lección: Cabeceras y metadatos

La sección <head> de una página HTML contiene instrucciones para el navegador, como el título de la pestaña, la codificación de caracteres, o información para buscadores. Aunque no se ve en la página, es crucial para que tu web funcione bien y sea encontrada en internet.
En esta lección aprenderás a usar la declaración <!DOCTYPE>, la etiqueta <head>, y los metadatos con <meta>, <title>, y <link>. Verás cómo estos elementos ayudan a navegadores, buscadores, y redes sociales, usando HTML5 moderno.

¿Qué es <head>?

La etiqueta <head> va dentro de <html> y contiene información sobre la página, como:

  • Título: Aparece en la pestaña del navegador.
  • Codificación: Define cómo mostrar caracteres como é (por ejemplo, en Pérez).
  • Metadatos: Datos para buscadores (Google) o redes sociales (Facebook, Twitter).
  • Enlaces a CSS: Para dar estilo a la página.

A diferencia de <body> (que muestra contenido), <head> da instrucciones al navegador y no es visible en la página.

La declaración <!DOCTYPE>

La declaración <!DOCTYPE> va al inicio de todo documento HTML, antes de <html>. Indica al navegador que la página está escrita en HTML y qué versión usa. En HTML5, es simple:

<!DOCTYPE html>

¿Por qué es importante?

  • Asegura que los navegadores interpreten la página en Standards Mode (modo estándar), mostrando el HTML correctamente.
  • Sin <!DOCTYPE>, los navegadores usan Quirks Mode (modo antiguo), que puede causar errores de visualización.

Contexto histórico

En versiones antiguas (HTML 4.01, XHTML), los DOCTYPEs eran complejos y especificaban una DTD (Definición de Tipo de Documento). Por ejemplo:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

En HTML5, <!DOCTYPE html> simplifica todo: es corto, universal, y suficiente para páginas modernas.

Nota: No uses DOCTYPEs antiguos; solo <!DOCTYPE html>.

La etiqueta <title>

La etiqueta <title> va dentro de <head> y define el título de la página, visible en:

  • La pestaña del navegador.
  • Los resultados de buscadores.
  • Los marcadores (favoritos).

Ejemplo:

<head>
  <title>Mi página web</title>
</head>

Resultado: La pestaña del navegador muestra "Mi página web".

Nota: Usa títulos descriptivos (por ejemplo, "Manual de HTML - example.net") para mejorar el SEO (optimización para buscadores).

Metadatos con <meta>

La etiqueta <meta> es un elemento vacío (sin cierre) que añade metadatos: información sobre la página para navegadores, buscadores, o redes sociales. Usa pares propiedad:valor con atributos como name, http-equiv, o property.

<meta charset>: Codificación

Define el juego de caracteres, como UTF-8, para mostrar letras como é o ñ (por ejemplo, en Pérez). Reemplaza la antigua <meta http-equiv="content-type">.

Ejemplo:

<meta charset="UTF-8">

<meta name="description">: Descripción

Proporciona una breve descripción de la página para buscadores. Mejora el SEO y aparece en los resultados de búsqueda.

Ejemplo:

<meta name="description" content="Manual de HTML para principiantes, con ejemplos prácticos.">

<meta name="keywords">: Palabras clave

Lista palabras que resumen el contenido. Aunque menos influyentes hoy, ayudan a buscadores.

Ejemplo:

<meta name="keywords" content="HTML, manual, principiantes, web">

Nota: Usa palabras relevantes; evita trampas como repetir "gratis" o palabras irrelevantes.

<meta name="author">:Autor

Indica quién creó la página.

Ejemplo:

<meta name="author" content="Ignside.net">

<meta name="robots">: Instrucciones para buscadores

Controla cómo los buscadores indexan la página:

  • index: Indexar la página.
  • noindex: No indexar.
  • follow: Seguir enlaces.
  • nofollow: No seguir enlaces.

Ejemplo:

<meta name="robots" content="index,follow">

Nota: Útil para páginas privadas (noindex) o públicas (index,follow).

<meta name="viewport">: Diseño adaptable

Asegura que la página se vea bien en móviles, ajustando el ancho al dispositivo.

Ejemplo:

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

Open Graph: Redes sociales

Las etiquetas <meta property="og:..."> controlan cómo se ve la página al compartirse en redes sociales (Facebook, Twitter, WhatsApp). Ejemplos:

  • og:title: Título.
  • og:description: Descripción.
  • og:image: Imagen.

Ejemplo:

<meta property="og:title" content="Manual de HTML">
<meta property="og:description" content="Aprende HTML desde cero con ejemplos.">
<meta property="og:image" content="https://example.net/imagen.jpg">

La etiqueta <link> conecta la página con archivos externos, como hojas de estilo CSS. Va en <head> y usa rutas relativas o absolutas (ver lección de rutas).

Ejemplo:

<link rel="stylesheet" href="estilos.css">

Nota: Prepara para el manual de CSS, donde aprenderás a dar estilo a tu página.

Ejemplo completo

Aquí tienes una página con un <head> completo:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Manual de HTML - Ignside.net</title>
  <meta name="description" content="Manual de HTML para principiantes, con ejemplos prácticos.">
  <meta name="keywords" content="HTML, manual, principiantes, web">
  <meta name="author" content="example.net">
  <meta name="robots" content="index,follow">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta property="og:title" content="Manual de HTML">
  <meta property="og:description" content="Aprende HTML desde cero con ejemplos.">
  <meta property="og:image" content="https://example.net/imagen.jpg">
  <link rel="stylesheet" href="estilos.css">
</head>
<body>
  <h1>Bienvenido a mi web</h1>
  <p>Aprende HTML con este manual.</p>
</body>
</html>

Consejos para evitar problemas

  1. Siempre usa <!DOCTYPE html>: Colócalo al inicio para evitar Quirks Mode.
  2. Declara UTF-8: Usa <meta charset="UTF-8">.
  3. Título descriptivo: Escribe <title> claro y relevante para SEO.
  4. Metadatos para SEO: Usa description y keywords precisos, sin abusar.
  5. Prueba en móviles: Incluye <meta name="viewport"> y verifica en un teléfono.
  6. Evita metadatos obsoletos: No uses <meta http-equiv="refresh"> ni <meta http-equiv="pragma">; son antiguos y pueden causar problemas.
  7. Prueba en navegadores: Abre la página en Chrome, Firefox, o Safari para confirmar que el título y los metadatos funcionan.
  8. el atributo lang describe el idioma principal del contenido de la página.
TOP