La etiqueta head en HTML
🧱 Estructura de la sección <head> en un documento HTML
Como hemos explicado anteriormente, la estructura base de cualquier documento HTML moderno debe incluir dos secciones fundamentales:
<head>: la cabecera del documento, donde se definen los metadatos y configuraciones globales.<body>: el cuerpo de la página, que contiene todo el contenido visible para el usuario.
En esta lección nos enfocaremos en el elemento <head>, el cual desempeña un papel crucial al proporcionar información sobre el documento y establecer conexiones con recursos externos.
🧠 ¿Qué es la etiqueta <head>?
La etiqueta <head> actúa como un contenedor de instrucciones que el navegador necesita procesar antes de renderizar el contenido visible de la página. Aunque no muestra ningún contenido en pantalla, su configuración influye directamente en el comportamiento, estilo, codificación y conectividad del documento.
Dentro del <head>, encontramos etiquetas importantes como el título de la página, definiciones de codificación, enlaces a hojas de estilo, scripts, entre otras.
🧾 Etiquetas comunes dentro del <head>
| Etiqueta | Ubicación permitida | Función principal |
|---|---|---|
<title> | ✅ <head> / ❌ <body> | Define el título de la página (aparece en la pestaña del navegador). |
<base> | ✅ <head> / ❌ <body> | Establece la URL base para los enlaces relativos. |
<link> | ✅ <head> / ❌ <body> | Vincula la página con archivos externos como hojas de estilo o íconos. |
<meta> | ✅ <head> / ❌ <body> | Define metadatos como codificación, autores, descripción, etc. |
<style> | ✅ <head> / ✅ <body> | Permite incluir reglas CSS directamente en el documento. |
<script> | ✅ <head> / ✅ <body> | Agrega o enlaza código JavaScript que se ejecutará en la página. |
Nota: Aunque etiquetas como <style> y <script> tradicionalmente se colocan en el <head>, también pueden utilizarse dentro del <body>, dependiendo del contexto y del momento en que se desea cargar el contenido.
🔤 Uso de la etiqueta <meta>
Una de las etiquetas más utilizadas dentro de la cabecera es <meta>, ya que permite proporcionar metadatos esenciales que no se reflejan directamente en la página pero que son fundamentales para su funcionamiento.
Ejemplo básico:
htmlCopiarEditar<head>
<title>Mi página web</title>
<meta charset="UTF-8">
</head>
En este caso, el atributo charset="UTF-8" indica que el documento utiliza codificación UTF-8, una de las más utilizadas a nivel mundial por su compatibilidad con caracteres especiales como acentos, eñes, signos de interrogación invertidos, entre otros.
✅ Buenas prácticas con la codificación UTF-8
Para asegurarte de que los caracteres se muestren correctamente en tu sitio, es recomendable seguir estos pasos:
- Asegura que el documento HTML incluya la línea: htmlCopiarEditar
<meta charset="UTF-8"> - Verifica que tu editor de texto esté guardando el archivo con codificación UTF-8.
- Confirma que el servidor web también utiliza UTF-8 por defecto.
Al aplicar estas tres medidas, minimizarás los errores relacionados con la visualización de caracteres especiales o símbolos que podrían aparecer de forma incorrecta.
🧾 ¿Qué más se puede hacer con <meta>?
Además de la codificación, la etiqueta <meta> puede usarse para agregar información como:
- Descripciones para motores de búsqueda: htmlCopiarEditar
<meta name="description" content="Curso de HTML para principiantes."> - Autores del documento: htmlCopiarEditar
<meta name="author" content="Luis Lopez"> - Instrucciones para robots: htmlCopiarEditar
<meta name="robots" content="index, follow">
Exploraremos más usos de la etiqueta <meta> en lecciones futuras, donde abordaremos aspectos de SEO, redes sociales y configuraciones avanzadas.