fbpx

HTML Head

Share on facebook
Facebook
Share on twitter
Twitter
Share on whatsapp
WhatsApp
Share on linkedin
LinkedIn
Share on email
Email

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

Comparte este artículo:

Share on facebook
Facebook
Share on twitter
Twitter
Share on whatsapp
WhatsApp
Share on linkedin
LinkedIn
Share on email
Email

Revisa estas publicaciones

HTML dt

Los HTML son un lenguaje de marcas de hipertexto utilizado en el desarrollo de páginas de Internet y sirven para ordenar el contenido de las mismas. Uno de

VER PUBLICACIÓN COMPLETA

HTML li

En los documentos web puedes crear listas para organizar contenidos. Estas pueden llevar una secuencia alfanumérica o no tener un orden específico. En cualquiera de estos

VER PUBLICACIÓN COMPLETA