Etiqueta HTML <head>
La etiqueta <head> contiene metadatos (título del documento, conjunto de caracteres, estilos, enlaces, scripts), información específica sobre la página web que no se muestra al usuario. Los metadatos proporcionan a los navegadores y motores de búsqueda información técnica sobre la página web.
La etiqueta <head> incluye los siguientes elementos:
- La
<title>define el título de una página web (obligatorio). Puede confundirse con la etiqueta<h1>, pero son diferentes. La etiqueta<h1>especifica el título del contenido de la página, mientras que la etiqueta<title>es un metadato que representa el título de todo el contenido HTML y no su contenido. - La
<style>contiene código CSS que define cómo se deben representar los elementos HTML en un navegador. - La
<base>define una URL absoluta (base) para todas las URLs relativas. - La
<link>define la relación entre el documento HTML actual y el recurso al que hace referencia, o contiene un enlace a una hoja de estilos externa. Puede tener dos atributos: rel="stylesheet" y href. - La
<meta>proporciona información adicional (metadatos) sobre un documento HTML. El<head>de una página puede incluir diferentes tipos de elementos<meta>que pueden contener los atributos name y content. - La
<script>contiene un script (generalmente JavaScript) o una referencia a un archivo externo con scripts. Este elemento puede incluirse en<head>. A veces, es mejor colocarlo al final de<body>para mejorar el rendimiento de carga de la página. El elemento<script>puede parecer vacío, pero no lo es. - La
<noscript>define un texto alternativo que se muestra si el navegador no admite scripts o si los scripts están deshabilitados por el usuario.
Sintaxis
La etiqueta <head> aparece en pares. El contenido se escribe entre las etiquetas de apertura (<head>) y cierre (</head>).
Ejemplo de la etiqueta HTML <head> utilizada con las etiquetas <title> y <style>:
Ejemplo de una etiqueta HTML head
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
<style>
body{
background-color: #d3d3d3;
}
p{
color: #1c87c9;
}
a{
color: red;
}
</style>
</head>
<body>
<p>Paragraph</p>
<a href="#">Link</a>
</body>
</html>En el ejemplo anterior, la etiqueta <head> se utiliza con las etiquetas <title> y <style>. La etiqueta <title> define el título del documento, que se muestra en la ventana del navegador. En la etiqueta <style> se define el estilo del documento: el fondo del documento es gris claro, el texto en los párrafos marcados con la etiqueta <p> es azul y los enlaces dentro de la etiqueta <a> son rojos.
Ejemplo de la etiqueta HTML <head> utilizada con la etiqueta <link>:
El contenido de la página
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<p>The content of the page</p>
</body>
</html>Resultado
En este ejemplo, hemos proporcionado un enlace al documento style.css en la carpeta CSS.
Ejemplo de la etiqueta HTML <head> utilizada con la etiqueta <meta>:
Etiqueta HTML <head>
<!DOCTYPE html>
<html>
<head>
<meta name="title" content="HTML and CSS Books" />
<meta name="description" content="HTML and CSS Basics for Beginners" />
<meta http-equiv="refresh" content="30" />
</head>
<body>
<p>The content of the page</p>
</body>
</html>La etiqueta <meta> contiene metadatos para los motores de búsqueda: título meta y descripción meta.
Atributos
En HTML5, la etiqueta <head> no tiene atributos específicos. Solo admite Atributos Globales y Atributos de Eventos.
Práctica
¿Cuál de los siguientes elementos puede utilizarse dentro de la etiqueta HTML <head>?