Cargando...

Título de página HTML

Los emoji viven en el flujo de texto de la página. El título de página hace otro trabajo: nombra el documento entero para la interfaz del navegador y para los sistemas de descubrimiento. Los usuarios lo ven en la pestaña, en el historial y al guardar un marcador. Los motores de búsqueda suelen usarlo como pista fuerte para el texto del enlace en los resultados. Los sitios de aprendizaje y la documentación de producto deben acertarlo pronto porque un título débil desperdicia atención antes de que alguien lea el primer párrafo.

Qué es el elemento title

El elemento HTML title pertenece al head del documento. Su contenido de texto es metadato de la página en conjunto. No es un encabezado con estilo que aparezca en el body. Sigue haciendo falta h1 (y otros encabezados) para el esquema visible que los lectores escanean en la propia página.

Respuesta directa

Pon exactamente un <title>...</title> dentro de <head>. Escribe texto corto, específico y legible para humanos — por ejemplo City Guide — Home o HTML Page Title — no Untitled, no un nombre de archivo en bruto y no un montón de palabras clave que nadie querría en una pestaña. El título no sustituye el h1 visible. Ambos suelen compartir un tema; siguen siendo elementos distintos con trabajos distintos.

Dónde vive en el documento

Una página mínima muestra la relación con claridad: DOCTYPE, html, head con title, luego body con un encabezado visible y contenido.

Título en el head

html
HTML Code 
<!DOCTYPE html>
<html>
<head>
<title>City Guide — Home</title>
</head>
<body>
<h1>Welcome to the City Guide</h1>
<p>The h1 is visible on the page; the title labels the browser tab.</p>
</body>
</html>

Lectura del ejemplo

  • <title>City Guide — Home</title> está dentro de head
  • La pestaña del navegador debería mostrar esa etiqueta (la IU exacta varía un poco según el navegador)
  • <h1>Welcome to the City Guide</h1> es lo que los lectores ven en el cuerpo de la página
  • Las etiquetas de cierre y el anidamiento siguen siendo HTML ordinario — no hay sintaxis especial de título más allá del propio elemento

title frente a h1 de un vistazo

📊 title frente a h1

Tema title h1
Lugar en el documento Dentro de head Dentro de body
El usuario lo ve como Pestaña / marcador / muchos títulos de resultado Encabezado principal en la página
Rol SEO Señal fuerte de etiqueta del documento Ayuda al esquema y a la relevancia
Cuántos Uno por documento Suele haber un h1 principal (más encabezados como h2+)
¿Sustituye al otro? No No

Por qué importa un buen título

Las pestañas se llenan rápido cuando la gente aprende con muchas páginas abiertas. Un título preciso ayuda a volver a la lección correcta. Los marcadores heredan el mismo texto. Los listados de búsqueda suelen mostrar el título como titular clicable. Títulos vagos como Document o Page 2 obligan a abrir la pestaña solo para recordar qué era.

Escribir texto de título claro

Apunta a una frase que un humano reconozca en una franja de pestañas abarrotada. Incluye el tema y, cuando ayude, el contexto del sitio o la lección. Manténlo legible en voz alta. Evita meter todos los sinónimos en una sola cadena. Prefiere HTML Lists — Practice a lists ul ol html tutorial best seo lists lists.

Título claro frente a título débil

html
HTML Code 
<!-- Prefer -->
<title>HTML Lists — Practice</title>

<!-- Avoid -->
<title>Untitled</title>
<title>aaaaaaaa</title>
<title>lists lists lists seo seo seo</title>

Patrones que funcionan para principiantes

  • Tema primero, luego un contexto corto: Forms — Contact page
  • Curso o marca después de un guion largo cuando varios sitios comparten temas similares
  • Cumple la promesa de la página: si la lección trata de títulos, dilo
  • Actualiza el título cuando dupliques un archivo como lección nueva — no conserves la etiqueta de ayer

Un elemento title por página

Los documentos HTML deben tener un solo title en head. Varios elementos title confunden las herramientas y no crean una pestaña multilínea útil. Si una plantilla emite dos títulos por error, corrige la plantilla en lugar de «añadir más etiquetas.»

Título y SEO sin mitos

Un título claro ayuda a los motores de búsqueda a entender la página y a las personas a hacer clic en el resultado correcto. No es un truco mágico de ranking. El relleno de palabras clave que arruina la experiencia de la pestaña suele hacer más daño que beneficio. Escribe primero para quien escanea pestañas y resultados; el beneficio de búsqueda sigue a un etiquetado honesto.

Practica en tu editor

  1. Crea una página HTML mínima con head y body.
  2. Pon en <title> una frase clara sobre tu página de práctica.
  3. Añade un h1 que comparta el tema pero use otra redacción.
  4. Abre el archivo y lee el texto de la pestaña del navegador.
  5. Cambia solo el título, guarda, actualiza — confirma que la pestaña cambia mientras el h1 se mantiene igual.
  6. Reescribe un título débil (Untitled) en uno específico y compara cómo se siente la pestaña.

Errores fáciles

  • Poner title en el body en lugar del head
  • Dejar Untitled document o un nombre de archivo temporal para siempre
  • Esperar que title se muestre como el encabezado grande en la página (eso es h1)
  • Rellenar el título con palabras clave repetidas hasta que sea ilegible como etiqueta de pestaña
  • Copiar el mismo título en muchas lecciones distintas para que cada pestaña se vea idéntica
  • Usar solo emoji o solo puntuación como título completo

Resumen

  • title pertenece al head y etiqueta el documento entero
  • Los usuarios lo encuentran en pestañas, marcadores y a menudo en resultados de búsqueda
  • h1 es el encabezado principal visible en el body — tema relacionado, trabajo distinto
  • Escribe un título claro y específico por página
  • Prefiere etiquetas legibles para humanos a Untitled o montones de palabras clave

🧠 Pon a Prueba tu Conocimiento

Listo para Empezar

Pon a Prueba tu Conocimiento

Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema

❓
7
Preguntas
🎯
70%
Para Aprobar
♾️
∞
Tiempo
🔄
∞
Intentos

📝 Instrucciones

  • Lee cada pregunta cuidadosamente
  • Selecciona la mejor respuesta para cada pregunta
  • Puedes repetir el quiz tantas veces como quieras
  • Tu progreso se mostrará en la parte superior
Tema 1 de 1
Html Tutorial