HTML 5: enlaces que cobran vida

Si hay un elemento que hace que Internet sea lo que es son los hipervínculos, los enlaces o, en definitiva en elemento anchor. Y es que la importancia de los enlaces en la red de redes no es trivial, ya que es lo que hace que Internet se distinga de la mayor biblioteca del mundo: el poder saltar de una información a otra sin necesidad de ir al final del libro y buscar en la bibliografía.

Los enlaces, hasta ahora, simplemente eran eso, enlaces. Poco a poco en los últimos años se han ido creando elementos suplementarios, pero que al no ser estándar cada uno hacía un poco lo que le daba la gana. Y digo “cada uno” haciendo referencia a los seres humanos, a los navegadores y a los robots.

Con HTML 5, los enlaces han variado mucho. Y, aunque siguen siendo elementos que permiten saltar de una página a otra, tienen muchos atributos que hacen que cada enlace tenga un significado especial y diferente.

href

Se podría decir que todo enlace ha de ir acompañado de su href, que no deja de ser la dirección URL a la que ha de apuntar. En caso de tenerlo, que es lo habitual, el enlace apuntará hacia ese lugar. Pero, en caso de no tenerlo, sí que se puede seguir usando el elemento a. En este caso, su significado viene a ser que “ahí debería haber un enlace hacia un sitio, que es importante, que es relevante, pero que todavía no existe…”.

En el caso de que href no esté, otros atributos como target, rel, media, hreflang o type tampoco tienen sentido.

<nav>
  <ul>
    <li><a href="/">Inicio</a></li>
    <li><a href="/noticias/">Noticias</a></li>
    <li><a>Ejemplos</a></li>
  </ul>
</nav>

Otro detalle importante es que el elemento a no sólo se utiliza para enlazar un simple texto, sino que permite otros elementos contenedores que serían enlazables. Un ejemplo claro donde se vería, podría ser el de un anuncio “textual”.

<aside class="advertising">
  <h1>Publicidad</h1>
  <a href="http://ad.example.com/?adid=1929&pubid=1422">
    <section>
      <h1>Mellblomatic 9000!</h1>
      <p>Turn all your widgets into mellbloms!</p>
      <p>Only $9.99 plus shipping and handling.</p>
    </section>
  </a>
  <a href="http://ad.example.com/?adid=375&pubid=1422">
    <section>
      <h1>The Mellblom Browser</h1>
      <p>Web browsing at the speed of light.</p>
      <p>No other browser goes faster!</p>
    </section>
  </a>
</aside>

target

Siempre se ha podido abrir un enlace en una ventana nueva, en un marco o similar… a lo largo del tiempo esos valores se han ido retocando y hoy en día quedan los siguientes:

  • _self: es lo mismo que no poner nada, y básicamente lo que hace es abrir el enlace en la misma ventana que se encuentra el documento actual.
  • _parent: en el caso de que haya marcos o secciones dentro del documento principal, con este tipo de enlaces se va al padre del documento actual…
  • _top: parecido al _parent, pero en este caso sí que va al máximo de los padres.
  • _blank: básicamente abre una ventana nueva.

media

El caso de los media es un poco complejo, ya que no hay ningún sitio en el que se hayan definido todos los elementos posibles. Los principales que he encontrado como estándar de HTML 4 son los siguientes, aunque parece que para el HTML 5 podría haber algunos más:

  • screen: para pantallas.
  • tty: para terminales, teletipos o elementos portátiles de ancho fijo.
  • tv: para televisión de baja resolución.
  • projection: para proyectores.
  • handheld: para dispositivos portátiles con pantallas pequeñas y poca conectividad.
  • print: para impresión.
  • braille: para dispositivos táctiles de braille.
  • aural: para sintetizadores de voz.
  • all: para cualquier dispositivo.

Otros elementos que pueden funcionar son 3d-glasses (para gafas en 3D), resolution > 90dpi (para resoluciones menores de, en este caso, 90dpi)…

hreflang

El atributo hreflang representa, simplemente de forma informativa, el idioma en el que se encuentra el recurso (el contenido de destino de la URL) a la que hay que seguir. Hay que tener en cuenta que los navegadores han de usar la información de idioma de la página de destino, y no la metainformación que da este elemento. En definitiva, que no sé porqué está esto aquí… al menos no todavía.

<a href="/" hreflang="ca">Inici</a>

type

En caso de no enlazar a una página, sino de enlazar a algún tipo de fichero de descarga o similar es interesante utilizar este atributo. Y es que el type es bastante significativo, en cuanto en tanto sirve para indicar el MIME-type del contenido de destino. Por defecto es el text/html, pero si por ejemplo enlazamos a un fichero de texto plano podríamos usar text/plain.

<a href="leeme.txt" type="text/plain">LEEME</a>

rel=”alternate”

Cuando un enlace lleva este atributo, hace referencia al documento actual pero en otro formato, es decir, que es el mismo contenido pero en vídeo, audio, un PDF, una versión para imprimir…

Normalmente irá acompañado de algún otro atributo para especificar “la distinta versión” a la que representa. Por ejemplo, si va acompañado del hreflang indicaría que es el mismo documento en otro idioma, o si va acompañado del type indicaría que está en otro formato.

<a rel="alternate" type="application/pdf" hreflang="ca" href="/catalan.pdf">versión en catalán [pdf]</a>

rel=”archives”

Este tipo de enlace indica que la dirección URL apunta a una página “histórica”, una página donde se recopila información o material antiguo pero que ha de estar disponible.

A parte de usar rel=”archives”, también se puede usar rel=”archive” por razones históricas.

<a rel="archives" href="/2010-02/">febrero de 2010</a>

rel=”author”

Cuando existe un enlace con este atributo cerca de un article, en enlace hace referencia al creador / autor del contenido del mismo. Ese enlace podría ser tranquilamente un enlace hacia una dirección de correo electrónico (con un mailto:).

Por razones históricas, tiene el mismo efecto el rev=”made”.

<a rel="author" href="/nosotros/javier/">Javier</a>

rel=”bookmark”

Este atributo hace referencia a un enlace permanente. Esto viene a ser aquellas direcciones URL que no cambiarán, por ejemplo, en listados de resultados o similares. En principio hace referencia a un article cercano.

rel=”external”

El atributo external hace referencia a que el enlace hace referencia hacia una dirección que no es parte del documento. Es decir, todos los enlaces externos a nuestro sitio deberían ser de este estilo.

rel=”help”

El atributo help hace referencia a un enlace en el que se da información de ayuda al documento actual, de forma que queden relacionados por este vínculo.

rel=”license”

En el caso de license se hace referencia al documento que da información de los derechos sobre la mayor parte del contenido de la página. Este elemento no distingue entre el contenido principal o un subcontenido, por lo que se ha de especificar claramente por parte del creador.

Por razones históricas, también se puede usar rel=”copyright”.

rel=”nofollow”

Podría haber desaparecido pero el nofollow creado por Google ha llegado para quedarse, algo normal teniendo en cuenta que el HTML 5 tiene una gran influencia por parte del gigante de Mountain View.

El atributo nofollow varía de su original por Google y se establece como un enlace que indica que no tiene nada que ver con el autor o editor de la página actual, o que ese enlace hace referencia a un documento principalmente publicitario o con contenido comercial en el que hay una relación entre las dos partes.

rel=”noreferrer”

Esta es una de las nuevas aportaciones más interesantes de los enlaces en HTML 5, y es que con este parámetro se podrá indicar que los enlaces no incluyan un referrer dentro de las cabeceras HTTP.

Cuando un usuario navega de una página a otra, la página de destino recibe un parámetro que es la página desde donde se viene, y con este elemento esa información desaparecería.

rel=”search”

Otro de los elementos que puede ser muy interesante en muchos sentidos es el del search. Este tipo de enlace hará referencia a páginas y/o contenidos que simplemente sean resultados de búsqueda. Habitualmente hay páginas de este estilo que sólo se utilizan para hacer los sitios más rastreables, y que en el caso de los robots de búsqueda tal vez no sea necesario posicionar, por lo que este elemento ayudaría a ello.

rel=”sidebar”

Los elementos que estén en un plano secundario, cmo son los enlaces que podemos encontrar en un menú de opciones secundarios deberían llevar este enlace. Básicamente lo que hará es abrir los contenidos en una navegación secundaria y así no molestar a los contenidos primarios.

La verdad es que pensando un poco en futuro no acabo de tener presente cómo reaccionarán los navegadores y rastreadores ante este tipo de enlaces. habrá que ver el uso que se le comienza a hacer y tomar decisiones.

rel=”tag”

Este tipo de enlace hace referencia a una palabra clave (tag) que hace referencia al documento actual en el que se encuentra. También hay que dejar claro que esto no ha de utilizarse para las “nubes de tags”.

Haciendo un poco de revisión mental, vendría a ser, en un blog, las palabras clave que se suelen poner al final de un artículo, que sí que representan al artículo en sí, pero, claro está, que una nube de tags no representa al actual sino a todo el sitio.

rel=”index”

Este tipo de enlace es un indicador de la situación con respecto al resto del sitio. En el caso del index hace referencia a que el documento es parte de una estructura jerárquica y que este enlace es el inicio de todos ellos.

De forma histórica este se ha podido llamar top, contents o toc.

rel=”up”

Este es otro de los indicadores se situación dentro de un árbol jerárquico. En este caso, el enlace que se indica significa que está a un nivel por encima del documento actual.

<nav>
  <p> <a href="/" rel="index up up up">Main</a> »
  <a href="/products/" rel="up up">Products</a> »
  <a href="/products/dishwashers/" rel="up">Dishwashers</a> »
  <a>Second hand</a> </p>
</nav>

rel=”first”

Aunque en este caso no va a indicarnos un árbol jerárquico, si que este elemento nos va a indicar la forma de navegar del sitio, por donde empezar y como seguir… En el caso de first nos va a indicar el inicio de una secuencia de documentos.

Por razones históricas también se podrán ver begin y start.

rel=”last”

Y de la misma forma que hay un principio con first, tenemos un final con last que indica el final de la secuendia de documentos relacionados.

rel=”next”

Al igual que en los casos anteriores, este también indica una secuencia de documentos, y en el caso de next indica el siguiente documento a tener en cuenta.

rel=”prev”

Y como no podía ser de otra manera, con prev tenemos relacionado el elemento anterior al actual.

otros rel=””

Hay otra serie de elementos que están en proceso de desarrollo, o ya han sido aceptados. Algunos de ellos son:

  • acquaintance: enlace que representa que el responsable del documento actual conoce a la persona del documento destino.
  • child: enlace que representa al hijo de la persona del creadora del documento actual.
  • co-resident : enlace que representa que el creador del documento de destino reside en el mismo domicilio que la del documento de destino.
  • co-worker : enlace que representa que el creador del documento de origen es compañero de trabajo del creador del documento de destino.
  • colleague: enlace que representa que el creador del documento de origen es colega del creador del documento de destino.
  • contact: indica que el creador del documento de destino es un contacto del documento origen.
  • crush: la persona del documento de origen se siente atraido por la persona del documento destino.
  • date: la persona del documento de origen está saliendo con la persona del documento destino.
  • friend: la persona del documento origen es amigo de la persona del documento destino.
  • kin: la persona a la que se hace referencia es parte de la familia lejana del origen.
  • me: la persona del documento origen es la misma que la del documento destino.
  • met: la persona del documento de origen ha cumplido en lo que se refiere a la persona de destino.
  • muse: la persona del documento de destino es inspiración para la persona del documento de origen.
  • neighbor: la persona del documento de origen y la de destino viven cerca / son vecinos.
  • parent: la persona a la que se hace referencia es uno de los padres de la persona de origen.
  • sibling: la persona a la que hace referencia el documento de destino es hermano de la de origen.
  • spouse: la persona a la que hace referencia el documento de destino es cónyugue de la de origen.

Y la verdad es que con respecto a los enlaces, poco más a decir… sin duda es uno de los elementos que más juego va a dar en el HTML 5, y es que la combinatoria que permite es bastante grande.

8 opiniones en “HTML 5: enlaces que cobran vida”

  1. Interesante Javier, poco a poco nos vas inyectando información acerca del HTML5. Gracias.

  2. Pingback: José Quinto Zamora (@jquintozamora) (@jquintozamora)
  3. Pingback: Lucía Marín (@experimentando_)
  4. Muy interesante, quizás algunas cosas como “hreflang” parecen sin sentido pero en un mundo donde todo evoluciona (la web) quizás en un futuro sean de mucha importancia.

Deja un comentario