🧠 ¿Qué es el HEAD?
El <head> es como el "cerebro invisible" de tu página web. Contiene información importante que el navegador necesita, pero que los visitantes NO ven directamente en la página.
📍 Ubicación: El HEAD siempre va entre <html> y <body>
<head>
← Aquí va toda la metadata
</head>
<body>
← Aquí va el contenido visible
</body>
</html>
💡 Analogías para entender el HEAD
1. Como la etiqueta de un producto:
- 📦 HEAD = Etiqueta con ingredientes, precio, marca
- 👀 BODY = El producto que ves y usas
2. Como el carnet de identidad:
- 🆔 HEAD = Datos del documento (nombre, fecha, tipo)
- 🖼️ BODY = Tu foto y contenido visible
3. Como una carta:
- ✉️ HEAD = El sobre con dirección y remitente
- 📄 BODY = El mensaje dentro de la carta
⚡ Dato Importante
Aunque los usuarios NO ven el HEAD directamente, es SÚPER importante porque:
- 🔍 Google lee el HEAD para indexar tu sitio
- 📱 Navegadores lo usan para mostrar tu página correctamente
- 🌐 Redes sociales lo leen cuando compartes un link
- ♿ Lectores de pantalla lo usan para personas con discapacidad visual
📦 Etiquetas que van en el HEAD:
El título que aparece en la pestaña del navegador. ¡Es lo primero que ven los usuarios!
Define el conjunto de caracteres. Con "UTF-8" puedes usar acentos: á, é, ñ, ¿, ¡
Hace que la página se vea bien en celulares. ¡Muy importante hoy en día!
Una descripción corta de tu página. Google la muestra en los resultados de búsqueda.
Conecta archivos externos como hojas de estilo CSS o el favicon (icono de la pestaña).
Permite agregar estilos CSS directamente en el HTML. ¡Colores, tamaños y más!
🔤 Entendiendo charset="UTF-8"
UTF-8 es un sistema de codificación que permite usar caracteres especiales de todos los idiomas:
- 🇪🇸 Español: á, é, í, ó, ú, ñ, ¿, ¡
- 🇫🇷 Francés: ç, é, è, ê
- 🇯🇵 Japonés: あ, い, う
- 😀 Emojis: 🎉, ❤️, 🚀