W3docs
es
Iniciar sesión

Etiqueta HTML <head>

La etiqueta HTML <head> contiene metadatos (título, charset, viewport, enlaces, scripts). Aprende su sintaxis, metaetiquetas comunes y ejemplos.

La etiqueta <head> contiene metadatos (título del documento, juego de caracteres, estilos, enlaces, scripts), es decir, 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.

Dónde va el <head>

El <head> es el primer elemento dentro de <html>, colocado directamente antes del <body>. Mientras que el <body> contiene el contenido visible de la página, el <head> guarda la información entre bastidores que el navegador necesita para renderizar e identificar la página:

<!DOCTYPE html>
<html>
  <head>
    <!-- metadata goes here -->
  </head>
  <body>
    <!-- visible content goes here -->
  </body>
</html>

El <head> es técnicamente obligatorio, pero si se omite, los navegadores crearán uno de forma silenciosa y moverán los elementos de nivel head (como <title> y <meta>) dentro de él. Escribirlo explícitamente hace que el documento sea predecible y válido.

Elementos que se pueden incluir en el <head>

El <head> incluye los siguientes elementos:

  • La etiqueta <title> define el título de una página web (obligatoria). 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 etiqueta <style> contiene código CSS que define cómo deben renderizarse los elementos HTML en un navegador.
  • La etiqueta <base> define una URL absoluta (base) para todas las URLs relativas.
  • La etiqueta <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 etiqueta <meta> proporciona información adicional (metadatos) sobre un documento HTML. El <head> de una página puede incluir distintos tipos de elementos <meta> que pueden contener los atributos name y content.
  • La etiqueta <script> contiene un script (generalmente JavaScript), o una referencia a un archivo externo con scripts. Este elemento puede incluirse en el <head>. En ocasiones, es mejor colocarlo al final del <body> para mejorar el rendimiento de carga de la página. El elemento <script> puede parecer vacío, pero no lo es.
  • La etiqueta <noscript> define un texto alternativo que se muestra si el navegador no admite scripts o si el usuario los ha desactivado.

La etiqueta <head> va en pares. El contenido se escribe entre las etiquetas de apertura (<head>) y cierre (</head>).

Ejemplos

Ejemplo de la etiqueta HTML <head> usada con las etiquetas <title> y <style>:

Ejemplo de una etiqueta head de HTML

<!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>
Pruébalo tú mismo »

En el ejemplo anterior, la etiqueta <head> se usa junto 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 de los párrafos marcados con la etiqueta <p> es azul y los enlaces dentro de la etiqueta <a> son rojos.

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>
Pruébalo tú mismo »

Aquí la etiqueta <link> conecta la página con una hoja de estilos externa en css/style.css (un archivo en una carpeta css junto al archivo HTML). Mantener el CSS en un archivo separado es el enfoque estándar en proyectos reales, ya que la misma hoja de estilos puede compartirse entre muchas páginas y ser almacenada en caché por el navegador. La página anterior solo mostrará estilos si el archivo style.css existe en la ruta indicada.

Ejemplo de la etiqueta HTML <head> usada 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>
Pruébalo tú mismo »

La etiqueta <meta> proporciona metadatos sobre la página. El contenido de name="description" es utilizado por los motores de búsqueda como fragmento bajo un resultado de búsqueda. La línea http-equiv="refresh" recarga la página cada 30 segundos — esto es raramente apropiado hoy en día (perjudica la accesibilidad y normalmente se sustituye por JavaScript o cabeceras HTTP), así que úsalo con moderación.

Las etiquetas <meta> que casi siempre necesitas

Hay algunas etiquetas <meta> tan comunes que casi todas las páginas modernas las incluyen.

Codificación de caracteres y viewport

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>My Page</title>
</head>
  • <meta charset="UTF-8"> declara la codificación de caracteres para que las letras acentuadas, los símbolos y los emojis se muestren correctamente. Colócalo primero en el <head>.
  • <meta name="viewport" content="width=device-width, initial-scale=1"> indica a los navegadores móviles que ajusten el ancho del diseño al ancho del dispositivo en lugar de reducir una página de escritorio. Omitir esto es la causa más frecuente de páginas "diminutas" en teléfonos, así que inclúyelo en cada página responsiva.

Etiquetas Open Graph para compartir en redes sociales

Cuando alguien comparte tu URL en plataformas como Facebook, LinkedIn o Slack, esos servicios leen las metaetiquetas de Open Graph (og:) para construir la tarjeta de vista previa: el título, el resumen y la imagen en miniatura.

<head>
  <meta property="og:title" content="Learn HTML - W3docs" />
  <meta property="og:description" content="A beginner-friendly HTML tutorial." />
  <meta property="og:image" content="https://www.example.com/preview.png" />
  <meta property="og:url" content="https://www.example.com/learn-html" />
</head>

Ten en cuenta que las etiquetas Open Graph usan el atributo property (no name). La URL de og:image debe ser absoluta (comenzar con https://), ya que la plataforma social la obtiene desde sus propios servidores. Consulta el capítulo <meta> para ver la lista completa de etiquetas <meta>.

Atributos

En HTML5, la etiqueta <head> no tiene atributos específicos. Solo admite Atributos Globales y Atributos de Evento.

Práctica

Práctica
¿Qué metaetiqueta debe incluir toda página responsiva en su head?
¿Qué metaetiqueta debe incluir toda página responsiva en su head?
Was this page helpful?