Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

La cabecera de un documento HTML es la parte no mostrada en el navegador cuando se carga la página. La cual contiene información como <title> de la página, enlaces a CSS (si tú deseas estilizar tu contenido HTML con CSS), enlaces para personalizar favicons, y otros metadatos (datos sobre el HTML, como quién lo escribió, y palabras claves importantes que describen el documento). En este artículo abarcaremos todas las cosas antes mencionadas y más, para darte bases sólidas en el manejo del marcado y otros códigos que deberían estar presentes en tu cabecera.

Requisitos previos: Estar familiarizado con HTML básico, cubierto en Getting started with HTML.
Objetivo:

Aprender acerca de la cabecera HTML, cual es su propósito, los elementos más importantes que puede contener, y qué efecto puede tener sobre el documento HTML.

¿Qué hay en la cabecera HTML?

Vamos a revisar el documento HTML que se revisó en el artículo anterior:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <p>This is my page</p>
  </body>
</html>

La cabecera HTML está contenida por el elemento <head> — a diferencia del contenido del elemento <body> (el cual es mostrado en la página cargada por el navegador), el contenido de la cabecera no es mostrada en la pantalla de la página. En su lugar, el trabajo de la cabecera es contener metadatos acerca del documento. En el ejemplo anterior, la cabecera es bastante reducida.

<head>
  <meta charset="utf-8">
  <title>My test page</title>
</head>

En las páginas más grandes, sin embargo, la cabecera puede llegar a contener bastantes elementos - intente ir a algunos de sus sitios web favoritos, y usando las herramientas de los desarrolladores [developer tools] compruebe el contenido de la cabecera. Nuestro objetivo aquí no es mostrarle cómo usar todo lo que puede ser empleado en la cabecera, sino enseñarle cómo usar los elemenos más obvios que deseará incluir en la cabecera y darle cierta familiaridad. Empecemos.

Añadiendo un título

Ya hemos visto el elemento <title> en acción: se puede usar para agregar un título al documento. Sin embargo, esto puede confundirse con el elemento <h1>, que se utiliza para agregar un encabezado en el nivel superior del cuerpo de tu contenido, esto también se conoce como el título de la página. ¡Pero son cosas diferentes!

  • El elemento <h1> aparece en una pagina cuando es cargado por el navegador — generalmente esto sucede una sola vez por pagina, para marcar el titulo del contenido de tu pagina (el titulo de la historia, el titulo de noticias o cualquier cosa que sea apropiado para su uso).
  • El elemento <title> es un metadato que representa el titulo de todo el documento HTML (no el contenido del documento).

Aprendizaje activo: Inspeccionando un simple ejemplo

  1. Para comenzar este aprendizaje activo, nos gustaría que fueses a nuestro repositorio de GitHub y descargues una copia de nuestra página title-example.html. Puedes hacer esto de las siguientes maneras:
    1. Copia y pega el código de la página en un nuevo archivo de texto en tu editor de código, luego guardalo en un lugar seguro.
    2. Presiona el botón "Raw" en la página, elije Archivo>Guardar página como... en el menú de tu navegador, luego elige un lugar para guardar el archivo.
  2. Ahora abre el archivo en tu navegador. Deberías ver algo como esto:
  3. A simple web page with the title set to <title> element, and the <h1> set to <h1> element.¡Ahora debería de ser completamente obvio dónde aparece el contenido <h1> y dónde aparece el contenido de <title>!

  4. También deberías intentar abrir el código en tu editor de código, edita el contenido de estos elementos y luego actualiza la página en el navegador. Diviértete con el.

Los contenidos del elemento <title> también se usan de otras formas. Por ejemplo, si intentas marcar la página (Marcadores> Marcar esta página, en Firefox), verás los contenidos del <title> como nombre sugerido para el marcador.

A webpage being bookmarked in firefox; the bookmark name has been automatically filled in with the contents of the <title> element

Los contenidos de <title> también se usan en los resultados de búsqueda, como verás a continuación.

Metadato: el elemento <meta>

Los Metadatos son datos que describen datos, y HTML tiene una forma "oficial" de agregar metadatos a un documento---el elemento  <meta> . Por supuesto, las otras cosas de las que estamos hablando en este artículo también podrían considerarse como metadatos. Hay muchos tipos diferentes de elementos <meta> que se pueden incluir en el <head> de tu página, pero no intentaremos explicarlos todos en esta etapa, ya que resultaría demasiado confuso. En su lugar, explicaremos algunas cosas con las que seguramente te encontrarás, sólo para darte una idea.

Especificando la codificación de caracteres de su documento

En el ejemplo que vimos arriba, esta linea fue incluida:

<meta charset="utf-8">

Este elemento simplemente especifica la codificación de caracteres del documento: el conjunto de caracteres que el documento puede usar. utf-8 es un juego de caracteres universal que incluye prácticamente cualquier caracter de cualquier idioma humano. Esto significa que tu página web podrá manejar la visualización de cualquier idioma; ¡Por lo tanto, es una buena idea configurar esto en cada página web que crees! Por ejemplo, tu página podría manejar inglés y japonés muy bien:

a web page containing English and Japanese characters, with the character encoding set to universal, or utf-8. Both languages display fine,Si configuras la configuración de caracteres ISO-8859-1, por ejemplo (el juego de caracteres para el alfabeto latino), la repesentación de tu página se arruinaría por completo:

a web page containing English and Japanese characters, with the character encoding set to latin. The Japanese characters don't display correctly

Aprendizaje activo: Experimenta con la codificación de caracteres

Para probar esto, vuelve a visitar la plantilla HTML simple que obtuviste en la sección anterior en <title> (la página title-example.html) intenta cambiar el valor del meta charset a ISO-8859-1 y agreag el japonés a tu página. Este es el código que usamos:

<p>Japanese example: ご飯が熱い。</p>

Agregando un autor y una descripción

Muchos elementos <meta> incluyen atributos name y content :

  • name especifica el tipo de elemento que es; qué tipo de información contiene.
  • content especifica el contenido meta real.

Dos de esos metaelementos que son útiles para incluir en tu página definen a l autor de la página  y proporcionan una descripción concisa de la página. Veamos un ejemplo:

<meta name="author" content="Chris Mills">
<meta name="description" content="The MDN Learning Area aims to provide
complete beginners to the Web with all they need to know to get
started with developing web sites and applications.">

Especificar una autor es útil de varias maneras: es útil saber quién escribió una página, si desean contactarnos con preguntas sobre el contenido. Algunos sistemas de gestión de contenido tienen facilidades para extraer automáticamente la información del autor de la página y ponerla a disposición parar tales fines.

Espeficar una descripción que incluya palabras clave relacionadas con el contenido de tu página es útil ya que tiene el potencial de hacer de la página aparezca más arriba en las búsquedas relevantes realizadas en los motores de búsqueda( tales actividades se denominan Search Engine Optimization, or SEO.)

Aprendizaje activo: El uso de la descripción en los motores de búsqueda

La descripción también se usa en las páginas de resultados del motor de búsqueda. Repasemos un ejercicio para explorar esto

  1. Ve a la portada de The Mozilla Developer Network.
  2. Ver la fuente de la página (Derecho/Ctrl + click en la página, elije Ver fuente de la página desde el menú.)
  3. Encuentra la meta etiqueta description. Se verá así:
    <meta name="description" content="The Mozilla Developer Network (MDN) provides
    information about Open Web technologies including HTML, CSS, and APIs for both
    Web sites and HTML5 Apps. It also documents Mozilla products, like Firefox OS.">
  4. Ahora busca "Mozilla Developer Network" en tu motor de búsqueda favorito (utilizamos Yahoo). Verás el contenido de  la descripción <meta> y <title> utilizado en el resultado de la búsqueda, ¡definitivamente vale la pena tenerlo!
  5. A Yahoo search result for "Mozilla Developer Network"

Nota: En Google, verás algunas subpáginas relevantes de MDN enumeradas debajo del enlace principal de la página principal de MDN — llamados sitelinks y configurables en Google's webmaster tools — una forma de mejorar los resultados de búsqueda en tu sitio en el motor de búsqueda de google.

Note: Muchas características <meta> ya no son usadas. Por ejemplo, el elemento <meta> (<meta name="keywords" content="fill, in, your, keywords, here">) — que se supone que facilita palabras clave para motores de búsqueda de forma que se determine la relevancia de esa página para diferentes términos de búsqueda — se ignora por los motores de búsqueda, porque los spammers estaban rellenando la lista de palabras claves con cientos de palabras claves, sesgando los resultados.

Otro tipos de metadatos

Mientras navegues por la web, encontrarás otros tipos de metadatos también. Muchas de las funciones que verás en los sitios web son creaciones propietarias, diseñadas para proporcionar a ciertos sitios (como los sitios de redes sociales) información específica que puedan usar.

Por ejemplo, Open Graph Data es un protocopolo de metadatos que Facebook inventó para proveer metadatos más ricos para los sitios web. En las fuentes de código de MDN, encontrarás esto:

<meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png">
<meta property="og:description" content="The Mozilla Developer Network (MDN) provides
information about Open Web technologies including HTML, CSS, and APIs for both Web sites
and HTML5 Apps. It also documents Mozilla products, like Firefox OS.">
<meta property="og:title" content="Mozilla Developer Network">

Un efecto de esto es que cuando tu haces link a MDN en facebook, el enlace aparece con una imagen y una descripción: una experiencia más enriquecedora para los usuarios.

Open graph protocol data from the MDN homepage as displayed on facebook, showing an image, title, and description.Twitter también tiene sus metadatos privados, que tienen un efecto similar cuando la URL del sitio se muestra en  twitter.com. Por ejemplo:

<meta name="twitter:title" content="Mozilla Developer Network">

Agregando iconos personalizados a tu sitio

Para un mayor enriquecimiento del diseño de tu sitio, puedes añadir referencias para personalizar iconos en tus metadatos, y estos se mostrarán en determinados contextos.

El humilde favicon, que ha existido durante muchos, muchos años, fue el primer icono de este tipo, un icono de 16 x 16 pixel usado en múltiples sitios. El favicon puede ser añadido a tu página:

  1. Guardándolo en el mismo directorio que la página index de tu sitio, guardada en el formato .ico (la mayoria de los buscadores soportarán favicons en los formatos más comunes como .gif o .png, pero usar el formato ICO asegurará que funcionará desde Internet Explorer 6.)
  2. Añadiendo la siguiente línea en tu HTML <head> para referenciarlo:
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

Los modernos navegadores usan favicons en varios lugares, como en la etiqueta de la página que está abierta, y en el panel de favoritos cuando tu la añades a tus favoritas:

The Firefox bookmarks panel, showing a bookmarked example with a favicon displayed next to it.

Hay un montón de otros tipos de iconos a considerar también en estos días. Por ejemplo, los encontrarás en el código fuente en la página de inicio de MDN:

<!-- third-generation iPad with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.cdn.mozilla.net/static/img/favicon144.a6e4162070f4.png">
<!-- iPhone with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.cdn.mozilla.net/static/img/favicon114.0e9fabd44f85.png">
<!-- first- and second-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.cdn.mozilla.net/static/img/favicon72.8ff9d87c82a0.png">
<!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="https://developer.cdn.mozilla.net/static/img/favicon57.a2490b9a2d76.png">
<!-- basic favicon -->
<link rel="shortcut icon" href="https://developer.cdn.mozilla.net/static/img/favicon32.e02854fdcf73.png">

Los comentarios explican para lo que cada icono se usa — estos elementos abarcan cosas como aportar un buen icono de alta resolución para ser usado cuando la página web se guarda en la página de inicio de un iPad—.

No te preocupes demasiado sobre la implementación de todos estos tipos de iconos por el momento — esto es un ligero avance de esta característica, y no se espera que tengas conocimientos de esto para avanzar en el curso. El principal propósito aqui es permitirte que conozcas lo que tales cosas son, en caso de que te las encuentres mientras examinas el código fuente de otros sitios web.

Aplicando CSS y JavaScript a HTML

Como todos los sitios web, el tuyo usará los términos CSS para que tenga un aspecto genial, así como los términos JavaScript para potenciar las funcionalidades interactivas, como reproductores de video, mapas, juegos y demás. Estas son las aplicaciones más comunes para una página web, usando el elemento <link> y el elemento <script> respectivamente.

  • El elemento <link> siempre va dentro de la <head> del documento, acompañado de dos atributos: rel="stylesheet", que indica que es la hoja de estilo del documento, y href, que contiene la ruta del archivo de la hoja de estilo:

<link rel="stylesheet" href="my-css-file.css">
  • El elemento <script> no tiene por qué ir en el <head>. De hecho, a menudo es mejor colocarlo al final del <body> del documento (justo antes de la etiqueta de cierre </body>), para asegurarnos que todo el contenido HTML se ha leido por el navegador antes de que intente aplicarle JavaScript (si JavaScript intenta acceder a un elemento que ya no existe, el navegador lanzará un error).

<script src="my-js-file.js"></script>

Nota: El elemento <script> pudiera parecer que es un elemento vacío, pero no lo es y, por tanto, necesita una etiqueta de cierre. En vez de apuntar a un archivo de secuencia de comandos o script, puedes también elegir colocar tu script dentro del elemento <script>.

Aprendizaje activo: aplicando CSS y JavaScript a una pagina

  1. Para iniciar este aprendizaje activo, coge una copia de tu archivos meta-example.html, script.js y style.css, y guárdalos en tu ordenador en la misma carpeta. Asegurate que se guardan con los nombres y las extensiones correctas.
  2. Abre el archivo HTML tanto en tu navegador como en tu editor de texto.
  3. Siguiendo la información facilitada abajo, añade los elementos <link> y <script> a tu HTML, de forma que tu CSS y JavaScript se aplican a tu HTML.

Si lo has hecho correctamente, cuando guardas tu HTML y actualizas tu navegador, verás que las cosas han cambiado:

Example showing a page with CSS and JavaScript applied to it. The CSS has made the page go green, whereas the JavaScript has added a dynamic list to the page.

  • El JavaScript ha añadido una lista vacía a la página. Ahora, cuando haces click en cualquier sitio de la lista, un cuadro de diálogo aparecerá solicitándote que introduzcas el texto para un nuevo elemento de la lista. Cuando presiones el botón OK, un nuevo elemento de la lista será añadido al contenedor de la lista con el nuevo texto. Cuando hagas click a un elemento existente de la lista, un cuadro de diálogo aparecerá permitiéndote cambiar el texto del elemento.
  • El CSS ha hecho que el fondo se vuelva verde y el texto se haga más grande. También ha diseñado parte del contenido que el JavaScript ha añadido a la página (la barra roja con el borde negro es el diseño que el CSS ha añadido a la lista generada con JavaScript.

Nota: Si te estancas en este ejercicio y no puedes hacer que se ejecuten los CSS/JS, intenta comprobar tu página de ejemplo css-and-js.html.

Estableciendo el idioma principal del documento

Finalmente, es valioso mencionar que puedes (y realmente debes) colocar el idioma de tu página. Esto se puede hacer añadiendo el lang attribute a la etiqueta de apertura del HTML (como se ve en el meta-example.html y se muestra debajo).

<html lang="en-US">

Esto es útil de muchas maneras. Tu documento HTML será indexado de forma más efectiva por los motores de búsqueda si el idioma se establece (permitiendole, por ejemplo, que aparezca correctamente en los resultados del idioma especificado), y es útil para que personas con discapacidad visual utilicen los lectores de pantalla (por ejemplo, la palabra "six" existe tanto en francés como en inglés, pero su pronunciación es diferente).

También puedes establecer subsecciones de tu documento para ser reconocido en diferentes idiomas. Por ejemplo, podemos establecer nuestra sección de japonés para ser reconocido como japonés, de la siguiente manera:

<p>Japanese example: <span lang="jp">ご飯が熱い。</span>.</p>

Estos códigos son definidos por el estandar ISO 639-1. Puedes encontrar más información sobre ellos en Language tags in HTML and XML.

Resumen

Esto marca el final de nuestra guía rápida de la cabecera de HTML - aún hay muchas más cosas que puedes hacer aquí, pero un viaje exhaustivo puede ser aburrido y confuso en esta etapa, y nosotros queremos darte una idea de las cosas más comunes que encontraras aquí por ahora. En el siguiente articulo veremos los fundamentos de texto de HTML.

Etiquetas y colaboradores del documento

Última actualización por: Myuel,