Etiqueta head en HTML

¿Qué es head en HTML?

La etiqueta <head> en HTML5 es una sección no visible en la página que contiene información importante sobre el documento, como el título, los metadatos y los enlaces a los recursos externos (CSS, JavaScript).

La información en la sección <head> es utilizada por los buscadores y los navegadores para mostrar información sobre la página en los resultados de búsqueda y en la pestaña del navegador, respectivamente.

¿Para qué sirve head en HTML?

La sección <head> en HTML es una parte importante de cualquier documento HTML y se utiliza para proporcionar información adicional sobre el documento, pero no se muestra en la página web. Aquí se incluyen metadatos, títulos, enlaces a recursos externos, hojas de estilo y scripts.

La sección <head> es un lugar para colocar información importante que no se muestra directamente en la página web, pero que es necesaria para su correcto funcionamiento y para mejorar la experiencia del usuario.

Por ejemplo, se puede usar para proporcionar un título para la página que se mostrará en la pestaña del navegador, enlaces a hojas de estilo CSS que definen la apariencia de la página y metadatos para mejorar la experiencia de búsqueda.

Ejemplo de uso

Aquí hay un ejemplo básico de cómo usar la etiqueta <head> en HTML5:

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Ejemplo de página</title> <link rel="stylesheet" type="text/css" href="estilos.css"> </head> <body> <!-- Aquí va el contenido de la página --> </body> </html>
Lenguaje del código: HTML, XML (xml)

En este ejemplo, la sección <head> incluye:

  • Una etiqueta <meta charset="UTF-8"> para especificar el juego de caracteres utilizado en el documento.
  • Una etiqueta <title> para especificar el título de la página, que se mostrará en la pestaña del navegador.
  • Una etiqueta <link> para enlazar un archivo CSS externo que contiene los estilos de la página.

Al cargar la página se puede visualizar el contenido del encabezado <head> mediante las herramientas de desarrollador que todos los navegadores modernos poseen.

La etiqueta <head> siempre va a ser el primer hijo de la etiqueta <html> debido a que, como hemos destacado, contiene los metadatos de todo el sitio que se visita.

Notas

Una característica de los navegadores modernos que cumplen con el estándar HTML5, es que pueden construir automáticamente el elemento <head>, en el caso de que la etiqueta fuera omitida en el código.

Sin embargo, este comportamiento no está garantizado en el caso de navegadores más viejos, como Internet Explore.

Atributos

La etiqueta <head> en HTML5 no tiene atributos específicos. Sin embargo, los siguientes elementos pueden ser incluidos dentro de la sección <head>:

  1. <title>: El elemento <title> se utiliza para proporcionar un título para el documento.
    • Este título se mostrará en la pestaña del navegador y es importante para mejorar la accesibilidad y el SEO.
    • El título debería ser claro y conciso, y debería reflejar el contenido de la página.
<head> <title>Página web de ejemplo</title> </head>
Lenguaje del código: HTML, XML (xml)
  1. <meta>: El elemento <meta> se utiliza para proporcionar información adicional sobre el documento, como la descripción, las palabras clave y el juego de caracteres utilizado.
    • El atributo name especifica la información que se está proporcionando, y el atributo content proporciona el valor para esa información.
<head> <meta charset="UTF-8"> <meta name="description" content="Esta es una página web de ejemplo"> <meta name="keywords" content="página web, ejemplo"> </head>
Lenguaje del código: HTML, XML (xml)
  1. <link>: El elemento <link> se utiliza para enlazar recursos externos, como hojas de estilo CSS y archivos JavaScript.
    • El atributo rel especifica el tipo de recurso que se está enlazando, y el atributo href proporciona la URL del recurso.
<head> <link rel="stylesheet" type="text/css" href="style.css"> </head>
Lenguaje del código: HTML, XML (xml)
  1. <style>: El elemento <style> se utiliza para incluir hojas de estilo CSS directamente en el documento.
    • Es importante utilizar esta etiqueta para incluir estilos personalizados que no estén disponibles en un archivo externo.
<head> <style> body { background-color: lightgray; font-family: Arial, sans-serif; } </style> </head>
Lenguaje del código: HTML, XML (xml)
  1. <script>: El elemento <script> se utiliza para incluir scripts JavaScript directamente en el documento.
    • Es importante utilizar esta etiqueta para incluir scripts personalizados que no estén disponibles en un archivo externo.
<head> <script> function displayMessage() { alert("Bienvenido a mi página web"); } </script> </head>
Lenguaje del código: HTML, XML (xml)
  1. <base>: El elemento <base> se utiliza para proporcionar una URL base para los enlaces en el documento.
    • Esto significa que todos los enlaces relativos en el documento se resolverán en relación a la URL especificada en la etiqueta <base>.
<head> <base href="https://www.example.com/"> </head>
Lenguaje del código: HTML, XML (xml)
  1. <noscript>: El elemento <noscript> se utiliza para contener contenido que se mostrará si el script no está habilitado en el navegador.
    • Esto es útil para asegurarse de que el contenido importante se muestre correctamente, incluso si el usuario no tiene JavaScript habilitado.
<head> <noscript> <p>Advertencia: Para una experiencia óptima, habilite JavaScript en su navegador.</p> </noscript> </head>
Lenguaje del código: HTML, XML (xml)

Espero que estos ejemplos ayuden a entender mejor cada uno de los elementos que se pueden incluir dentro de la sección <head> en HTML5.

Más ejemplos

Aquí hay un ejemplo completo de una sección <head> en HTML5 que incluye varios de los elementos mencionados anteriormente:

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="Ejemplo de página web"> <meta name="keywords" content="HTML5, ejemplo, página web"> <title>Ejemplo de Página Web</title> <link rel="stylesheet" type="text/css" href="estilos.css"> <script src="script.js"></script> <base href="https://www.ejemplo.com/"> <noscript> <p>Lo siento, su navegador no soporta JavaScript. Por favor, habilite JavaScript para ver esta página correctamente.</p> </noscript> </head> <body> <!-- Aquí va el contenido de la página --> </body> </html>
Lenguaje del código: HTML, XML (xml)

En este ejemplo, la sección <head> incluye:

  • Una etiqueta <meta charset="UTF-8"> para especificar el juego de caracteres utilizado en el documento.
  • Una etiqueta <meta name="viewport" content="width=device-width, initial-scale=1.0"> para controlar cómo se muestra la página en dispositivos móviles.
  • Dos etiquetas <meta> para proporcionar metadatos sobre el documento, como la descripción y las palabras clave.
  • Una etiqueta <title> para especificar el título de la página, que se mostrará en la pestaña del navegador.
  • Una etiqueta <link> para enlazar un archivo CSS externo que contiene los estilos de la página.
  • Una etiqueta <script> para enlazar un archivo JavaScript externo que contiene el código de la página.
  • Una etiqueta <base> para establecer una URL base para los enlaces en el documento.
  • Una etiqueta <noscript> para proporcionar un mensaje que se mostrará si el script no está habilitado en el navegador.

Referencias