Cabecera
El elemento <head> define la cabecera de un documento HTML.
Las etiquetas de apertura y cierre son las siguientes:
<html>
<head></head>
<body></body>
</html>
Contiene la información sobre el título de la página, el autor, palabras clave, etc. La información de la cabecera no se presentará en la ventana del navegador, salvo el título, que aparecerá en la barra de título de la parte superior. El resto de cabeceras, habitualmente se utilizan para dar información a buscadores, redes sociales, etc.
Dentro de esta sección es obligatorio definir el título del documento. Para ello se usan las etiquetas <title></title>.
Es muy común, también, incluir el charset utilizado para la codificación. Generalmente, se utiliza utf-8.
Ejemplo de una cabecera HTML con varios elementos:
<head>
<meta charset="utf-8">
<title>HTML document</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:title" content="">
<meta property="og:type" content="">
<meta property="og:url" content="">
<meta property="og:image" content="">
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="icon.png">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<link rel="manifest" href="site.webmanifest">
<meta name="theme-color" content="#fafafa">
</head>
El elemento <head> define la cabecera de un documento HTML.
Los elementos que pueden ir dentro del elemento <head> se clasifican en dos tipos:
- Elementos contenedores: contienen texto y/u otras etiquetas.
- Elementos no contenedores: son etiquetas vacías, sin contenido.
Elementos contenedores
| Elemento | Descripción |
|---|---|
title | Título del documento. Elemento obligatorio. |
script | Script incrustado. Su contenido ha de ir situado entre las marcas de comentarios ya que no ha de ser interpretado. |
style | Estilo aplicado al documento utilizando CSS. Su contenido ha de ir situado entre las marcas de comentarios ya que no ha de ser interpretado. |
Elementos no contenedores
| Elemento | Descripción |
|---|---|
base | URI base del documento. |
link | Enlaces a documentos externos de librerías (JavaScript). Este elemento también puede ir dentro del <body>. |
meta | Metadatos sobre la página, como la codificación de caracteres, descripción o autores. |
Ejemplo
A continuación, un ejemplo completo que muestra el uso de todos los elementos mencionados:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>El título es obligatorio</title>
<base href="https://codesandbox.io/" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" />
<style>
.rojo {
color: red;
}
</style>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
</head>
<body>
<div class="rojo">Texto de color rojo</div>
</body>
</html>
Para la correcta visualiazación de acentos y caracteres especiales como la ñ, debemos añadir la siguiente línea para utilizar la codificación de caracteres UTF-8:
<meta charset="utf-8" />