Skip to content
Logo de la documentación HoneyCode

3. Cabecera del Documento

La cabecera del documento (<head>) contiene metadatos e información que no se muestra directamente en la página, pero que es crucial para el navegador, motores de búsqueda y redes sociales.

🧠 Uso de la Etiqueta <head>

Section titled “🧠 Uso de la Etiqueta <head>”

La etiqueta <head> es el contenedor de todos los metadatos del documento HTML. Va entre <html> y <body>.

Estructura básica

Section titled “Estructura básica”
<!DOCTYPE html>
<html lang="es">
<head>
  <!-- Aquí van todos los metadatos -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Título de la página</title>
  <link rel="stylesheet" href="estilos.css">
  <script src="script.js"></script>
</head>
<body>
  <!-- Contenido visible -->
</body>
</html>

¿Qué va dentro del <head>?

Section titled “¿Qué va dentro del <head>?”

Elementos que SIEMPRE debes incluir:

<head>
  <!-- 1. Codificación de caracteres (OBLIGATORIO) -->
  <meta charset="UTF-8">


  <!-- 2. Título de la página (OBLIGATORIO) -->
  <title>Título de la Página</title>


  <!-- 3. Viewport para responsive (RECOMENDADO) -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">


  <!-- 4. Descripción para SEO (RECOMENDADO) -->
  <meta name="description" content="Descripción breve de la página">
</head>

Prioridad:

  1. ⭐ charset - Primera línea siempre
  2. ⭐ title - Título único por página
  3. ⭐ viewport - Para diseño responsive
  4. ⭐ description - Para SEO

📄 Etiqueta <title>

Section titled “📄 Etiqueta <title>”

El <title> define el título que aparece en la pestaña del navegador y en los resultados de búsqueda.

Características del título

Section titled “Características del título”
<head>
  <title>Título de la Página</title>
</head>

Dónde se muestra:

  • 🔖 Pestaña del navegador
  • 🔍 Resultados de Google
  • 📱 Marcadores/Favoritos
  • 🔗 Compartir en redes sociales

Reglas importantes:

  • ✅ Solo puede haber UN <title> por página
  • ✅ Solo puede contener texto (no HTML)
  • ✅ Debe ser único para cada página
  • ✅ Longitud ideal: 50-60 caracteres

🏷️ Etiquetas <meta>

Section titled “🏷️ Etiquetas <meta>”

Las etiquetas <meta> proporcionan metadatos sobre el documento HTML. Son cruciales para SEO, redes sociales y configuración del navegador.

Meta tags esenciales

Section titled “Meta tags esenciales”

<meta charset> - Codificación de caracteres

Section titled “<meta charset> - Codificación de caracteres”

La primera línea del <head> SIEMPRE:

<head>
  <meta charset="UTF-8">
  <!-- Resto de metadatos -->
</head>

¿Por qué es importante?

  • ✅ Permite mostrar caracteres especiales: á, é, í, ó, ú, ñ, ¿, ¡
  • ✅ Evita problemas con emojis: 😀 🎉 ⭐
  • ✅ Soporta múltiples idiomas
  • ✅ UTF-8 es el estándar universal

Problema sin charset:

<!-- Sin charset -->
<head>
  <title>Página</title>
</head>
<body>
  <p>Hola, ¿cómo estás?</p>
  <!-- Se muestra: Hola, ¿cómo estás? -->
</body>
<!-- Con charset -->
<head>
  <meta charset="UTF-8">
  <title>Página</title>
</head>
<body>
  <p>Hola, ¿cómo estás?</p>
  <!-- Se muestra correctamente: Hola, ¿cómo estás? -->
</body>

Opciones de charset:

CharsetUso
UTF-8⭐ Recomendado - Universal
ISO-8859-1Latin-1 (obsoleto)
Windows-1252Windows (obsoleto)

🎨 Importación de Hojas de Estilo

Section titled “🎨 Importación de Hojas de Estilo”

La etiqueta <link> se usa para vincular archivos CSS externos al documento HTML.

Importar CSS externo

Section titled “Importar CSS externo”
<head>
  <!-- CSS externo -->
  <link rel="stylesheet" href="css/estilos.css">


  <!-- Múltiples hojas de estilo -->
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/layout.css">
  <link rel="stylesheet" href="css/componentes.css">


  <!-- CSS desde CDN -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
</head>

Atributos de <link>:

AtributoDescripciónEjemplo
relRelación (stylesheet)rel="stylesheet"
hrefRuta del archivohref="estilos.css"
typeTipo MIME (opcional)type="text/css"
mediaMedia querymedia="screen"
integrityHash de seguridadintegrity="sha384-..."
crossoriginCORScrossorigin="anonymous"

⚡ Importación de Scripts

Section titled “⚡ Importación de Scripts”

La etiqueta <script> se usa para incluir JavaScript en el documento.

Formas de incluir JavaScript

Section titled “Formas de incluir JavaScript”
<!-- 1. Script externo -->
<script src="js/app.js"></script>


<!-- 2. Script inline -->
<script>
  console.log('Hola desde JavaScript');
  document.addEventListener('DOMContentLoaded', function() {
    console.log('DOM cargado');
  });
</script>


<!-- 3. Script desde CDN -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>


<!-- 4. Múltiples scripts -->
<script src="js/utils.js"></script>
<script src="js/componentes.js"></script>
<script src="js/app.js"></script>

Atributos de <script>:

AtributoDescripciónUso
srcRuta del archivosrc="app.js"
typeTipo de scripttype="module"
deferCargar después del HTMLdefer
asyncCargar asíncronamenteasync
crossoriginCORScrossorigin="anonymous"
integrityHash de seguridadintegrity="sha384-..."
nomoduleFallback para navegadores antiguosnomodule

🎓 Resumen

Section titled “🎓 Resumen”

🚀 Próximos pasos

Section titled “🚀 Próximos pasos”

Ahora que dominas la cabecera del documento, aprenderás:

  • ✅ Contenido del cuerpo (<body>)
  • ✅ Estructura de contenido
  • ✅ Secciones y artículos
  • ✅ Organización del contenido
🐝