ETIQUETAS : HTML HEAD

El elemento HTML <head> provee información general (metadatos) acerca del documento, incluyendo su título y enlaces a scripts y hojas de estilos.

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 Comenzando con HTML.
Objetivo:	Aprender acerca de la cabecera HTML, cuál 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?Sección

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ítuloSección

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 página cuando es cargado por el navegador — generalmente esto sucede una sola vez por página, para marcar el título del contenido de tu página (el título de la historia, el título de noticias o cualquier cosa que sea apropiado para su uso).
El elemento <title> es un metadato que representa el título de todo el documento HTML (no el contenido del documento).

Aprendizaje activo: Inspeccionando un simple ejemploSección

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.
Ahora abre el archivo en tu navegador. Deberías ver algo como esto:
¡Ahora debería de ser completamente obvio dónde aparece el contenido <h1> y dónde aparece el contenido de <title>!
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

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

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

Ve a la portada de The Mozilla Developer Network.
Ver la fuente de la página (Derecho/Ctrl + click en la página, elije Ver fuente de la página desde el menú.)

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.">

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!

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 metadatosSección

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 sitioSección

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:

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.)
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:

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 HTMLSección

Como todos los sitios web, el tuyo usará CSS para que tenga un aspecto genial, así como 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 leído 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 páginaSección

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.
Abre el archivo HTML tanto en tu navegador como en tu editor de texto.
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 documentoSección

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 (permitiéndole, 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

HTMLHeadElement

ETIQUETAS

lunes, 8 de julio de 2019

HTML HEAD