No me lo digas, no tienes muy claro qué es la etiqueta <head> en HTML. O quizás, tienes algunas dudas sobre esta etiqueta. Presta atención porque la etiqueta <head> es una de las más importantes de este lenguaje.
Así, como lo oyes. Es importante a nivel de experiencia de usuario, a nivel de SEO, por cuestiones de seguridad, etc.
De verdad que saber utilizar esta etiqueta correctamente es importantísimo. Así que, en este capítulo veremos qué es la etiqueta Head y como has de utilizarla correctamente.
Y antes de pasar a la acción, déjame decirte que este artículo forma parte del diccionario de HTML del canal Dropcoding, donde encontrarás todas y cada una de las etiquetas de este lenguaje.
Y ahora, vamos al lío.
¿Qué es la etiqueta head en HTML?
La etiqueta <head> se utiliza para definir la información sobre una página web. Es el lugar donde se almacena la información que controla el aspecto y el comportamiento de tu sitio web.
Esta etiqueta se encuentra justamente al principio del documento HTML.
Dentro del Head podemos encontrar:
- Título de la página
- Etiquetas meta
- Hojas de estilos
- Scripts
Y otras etiquetas importantes que determinan aspectos curciales de nuestro sitio.
¿Cómo se escribe la etiqueta <head>?
Si te lo estás preguntando, la respuesta es muy sencilla: Empezamos con una apertura <head> y cerramos con un cierre </head> (como siempre).
<head>
// Contenido dentro del head
</head>Así de fácil.
Y ojo porque esta etiqueta no va dentro de la etiqueta <body>, va justo antes.
Vamos con un ejemplo, para que lo veas más claro.
Ejemplo de etiqueta <head>
Aquí ves la estructura completa de una página web, empezando por el Doctype. Lo primero que aparece, después de la etiqueta HTML por supuesto, es la etiqueta Head con toda la información que quieras añadir.
<!DOCTYPE html>
<html lang="es">
<head>
<title>DropCoding</title>
<meta name="description" content="Esta es la página web de mi blog.">
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<header>
<!-- Contenido del header -->
</header>
<main>
<h1>DROPCODING</h1>
<p>Esta es la primera página de mi web.</p>
</main>
<footer>
<!-- Contenido del footer -->
</footer>
</body>
</html>Como ves, en el ejemplo aparece: El título, una meta descripción, (también podría ir el meta title), un enlace que va a la hoja de estilos para que los estilos CCS funcionen correctamente y un Script.
Si te fijas, después de la etiqueta Head, empieza la etiqueta Body y justamente después de la apertura del Body iría la etiqueta Header (no confundir). Luego la etiqueta Main y finalmente la etiqueta Footer.
Porqué es tan importante la etiqueta Head
La etiqueta Head en HTML engloba etiquetas imprescindibles para que se muestre el contenido. Por ejemplo el título, enlaces a hojas de estilos, scripts y otros elementos imprescindibles.
Aquí dejo una tabla con todas las etiquetas que puedes usar dentro de <head>.
| Etiqueta | Descripción | Atributos comunes |
|---|---|---|
| title | Define el título de la página que se muestra en la barra de título del navegador. | charset, dir, lang |
| meta | Proporciona metadatos sobre la página, como la codificación de caracteres, la descripción de la página, palabras clave, robots de búsqueda, etc. | charset, name, content, http-equiv |
| link | Vincula recursos externos a la página, como hojas de estilo CSS, archivos JavaScript, iconos, etc. | rel, href, type, media, sizes, integrity, crossorigin |
| style | Define estilos CSS directamente en la página. | type, media, scoped |
| script | Carga un archivo JavaScript para ejecutar código en la página. | src, type, defer, async, integrity, crossorigin |
| noscript | Define contenido alternativo para usuarios que tienen desactivado JavaScript. | – |
| base | Define la URL base para todos los enlaces relativos en la página. | href, target |
| meta name=»viewport» | Define la configuración de la ventana gráfica para dispositivos móviles. | name, content |
| manifest | Define un archivo de manifiesto web para aplicaciones web progresivas. | href |
| icon | Define el icono de la página web. | sizes, rel, href, type |
Diferencia entre HEAD y HEADER
Como has visto, la etiqueta <head> se utiliza para definir la información sobre una página web. Pero es una etiqueta que NO se muestra en el navegador. Es invisible. Pero está allí, justo al principio del documento.
En cambio, la etiqueta <header> se utiliza para definir el encabezado de una página web, que es donde normalmente se muestra el logo, el menú de navegación, datos de contacto, etc, etc.
Y sí que se ve. De hecho, la etiqueta Header es la primera cosa que verán los usuarios al aterrizar en tu página web. De ahí su nombre “header” 😀.
La cosa quedría de la siguiente manera:
- Primero iría el <head>
- Luego el <body>
- Y dentro del body el <header>, el <main> y el <footer>.
Si te has quedado con alguna duda o tienes alguna sugerencia déjala por favor en los comentarios.
Nos vemos en la próxima lección.