fbpx

HTML Head

Descripción

La etiqueta HTML <head> o conocida en español como cabecera, es la parte que no se muestra en el navegador en el momento de cargar la página. Esta etiqueta puede contener varios hijos que otorgan información sobre el sitio en cuestión.

Algunos de estos son la etiqueta <title> que define el título de la página, los enlaces a CSS o de faviconos, y cualquier otro tipo de metadato, como es el tipo de carácter empleado en la página, quién la realizó, su descripción, entre otros.

Los siguientes elementos de HTML pueden ir dentro de la etiqueta <head>:

  • <title> (obligatorio en todos los documentos HTML)
  • <style>
  • <base>
  • <link>
  • <meta>
  • <script>
  • <noscript>

La función principal de la cabecera es brindar una descripción del sitio que se accede, haciendo que éste sea más fácil de acceder por el navegador del usuario.

Ejemplos de uso

Un ejemplo básico de la etiqueta <head> sería el siguiente:

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Mi página de prueba</title>
   </head>
   <body>
      <p>Esta es mi página</p>
   </body>
</html> 

En este caso, la cabecera es muy sencilla, solamente incluyendo la etiqueta <meta> con el atributo charset y el valor de utf-8, el cual es empleado para las lenguas con alfabeto de tipo latino y germánico.

En páginas más extensas, la cabecera puede llegar a contener una infinidad de elementos, de acuerdo con su especificación y derechos de autor para que puedan ser fácilmente accedidas por los navegadores.

Un ejemplo con más elementos:

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8">
    <title>Aquí el título del documento</title>
    <meta name="Author" lang="es" content="Nivardo Ch" />
    <meta name="keywords" content="HTML, CSS, JavaScript, PHP" />
    <meta name="description" content="Aprende Nuevas Tecnologías como: HTML5, CSS3 y JavaScript." />
    <meta name="copyright" content="Copyright © Oregoom.com" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="robots" content="index, follow" />
  </head>
  <body>
  </body>
</html>

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, que es la última versión de HTML soportada por la web, 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.

Más ejemplos

  • <base>.- La etiqueta <base> (especifica una URL y un destino predeterminados para todos los enlaces de una página) va dentro de la etiqueta <head>.
<!DOCTYPE html>
<html>
  <head>
    <base href="https://oregoom.com/" target="_blank" />
  </head>
<body>

  <img src="cursos/img-javascript.jpeg" width="240" height="80" alt="Curso de JavaScript">
  <a href="cursos/curso-de-javascript.php">Curso de JavaScript</a>

</body>
</html>
  • <meta>.- La etiqueta <meta> va dentro del elemento <head>.
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
   </head>
   <body>
      <p>Esta es mi página</p>
   </body>
</html>
  • <title>.- El elemento <title> va dentro de la etiqueta <head>.
<!DOCTYPE html>
<html>
   <head>
      <title>Mi página de prueba</title>
   </head>
   <body>
      <p>Esta es mi página</p>
   </body>
</html>
  • <style>.- La etiqueta <style> (agrega información de estilo a una página) va dentro del elemento <head>.
<!DOCTYPE html>
<html>
  <head>
    <style>
       h1 {color:red;}
       p {color:blue;}
    </style>
  </head>
<body>

  <h1>Título principal</h1>
  <p>Todo relacionado del encabezado de HTML. </p>

</body>
</html>
  • <link>.- La etiqueta <link> (enlaces a una hoja de estilo externa) va dentro del elemento <head>
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="styles.css">
  </head>
<body>

  <h1>Título principal</h1>
  <p>Aprender HTML ha sido lo mejor que me ha pasado en mi vida. </p>

</body>
</html>

Referencias



Share This