enlaces avanzados

Incluir enlaces básicos mediante la etiqueta <a> es muy sencillo. Sin embargo, como ya viene siendo costumbre, vamos a subir el nivel de dificultad tanto en los conceptos, como en los ejercicios. Entonces, para empezar, debemos volver a la definición completa de lo que significa un tag <a>.

Las funciones del tag <a> puede ser simple, aunque, dependiendo de la cantidad de atributos que utilicemos, esta puede volverse, es muy compleja. Pues, dispone de varios atributos que pueden ser incorporados no excluyentemente a nuestros enlaces.

A continuación veremos una lista completa con la definición de los propios atributos de <a>:

Etiqueta<a>
Atributos comunesbásicos, internacionalización, eventos y foco
Atributos propiosname = "texto" – Permite nombrar al enlace para que se pueda acceder desde otros enlaces
href = "url" – Indica la URL del recurso que se quiere enlazar
hreflang = "codigo_idioma" – Idioma del recurso enlazado
type = "tipo_de_contenido" – Permite «avisar» al navegador sobre el tipo de contenido que se enlaza (imágenes, archivos, etc.) para que pueda preparase en caso de que no entienda ese contenido
rel = "tipo_de_relacion" – Describe la relación del documento actual con el recurso enlazado
rev = "tipo_de_relacion" – Describe la relación del recurso enlazado con el documento actual
charset = "tipo_de_charset" – Describe la codificación del recurso enlazado
Tipo de elementoEn línea
DescripciónSe emplea para enlazar todo tipo de recursos

De los elementos listados, ya vimos name y href, así que continuaremos la lista en donde la dejamos.

1. ¿Qué es hreflang o idioma del enlace?

Hreflang (hypertext reference language) o idioma del enlace, hace referencia, justamente, al propio idioma del documento HTML. Sin embargo, no es exclusivo del tag HTML, pues, el propio enlace también puede especificar el idioma del documento al que se accederá luego de hacer clic.

Entonces, gracias a especificarlo, el propio navegador identifica de antemano el idioma del recurso que enlazado. Para lograr establecer el idioma, se utiliza un código estandarizado de dos letras para el idioma; pero, además del idioma genérico, también se puede indicar una variación idiomática.

Veamos algunos ejemplos de ésto:

CódigoIdiomaVariación idiomática
enInglés
en-AUInglésAustralia
en-USInglésEstados Unidos
esEspañol
es-AREspañolArgentina
es-ESEspañolEspaña
es-MXEspañolMéxico

Otros códigos utilizados son: fr (francés), de (alemán), it (italiano), nl (holandés), el (griego), pt (portugués), ar (árabe), he (hebreo), ru (ruso), zh (chino), ja (japonés).

2. ¿Qué es el type o tipo de contenido en un enlace HTML?

El atributo type se utiliza para notificar al navegador sobre el tipo de contenido que se enlaza. Se indica mediante una cadena de texto cuyos posibles valores también están estandarizados.

Los valores de los contenidos más utilizados son los siguientes: 

  • "text/html": Se utiliza para indicar y especificar que se trata de páginas HTML;
  • "image/png": Indica que son imágenes con formato PNG;
  • "image/gif": Mismo caso que el anterior, pero en ahora, hablamos de imágenes en formato GIF;
  • "text/css": Se utiliza para archivos CSS u hojas de estilo CSS;
  • "application/rss+xml": Se especifica cuando se trata de un archivo RSS.

3. ¿Qué es el tipo de relación (rel y rev) en un enlace HTML?

Los enlaces pueden proporcionar información adicional muy útil para los navegadores y para los motores de búsqueda como Google. Los atributos rel y rev permiten indicar la relación que la página actual tiene con la página a la que se enlaza (atributo rel) y la relación que tiene la página enlazada con la página actual (atributo rev). Es decir:

  • Atributo rel: Relación de la página actual con la saliente.
  • Atributo rev: Relación de la página saliente con la actual.

Entonces, ahora solo resta indicar el tipo de relación, y para ello debemos recurrir a los siguientes parámetros definidos:

  • alternate: Indica que el documento (entrante o saliente) es una versión alternativa al documento actual. Esto puede ocurrir cuando se trata de una versión en otro idioma o una versión preparada para otro medio.
  • stylesheet: Indica que se ha enlazado una hoja de estilos CSS.
  • start: Este atributo sirve para indicar que se trata del primer documento de una serie de documentos. Un uso práctico puede ser, por ejemplo, cuando tenemos el primer capítulo de un libro o un Hub de Contenidos.
  • next: Este parámetro sirve para indicar que el siguiente documento es continuación del actual. Esto es funcional a los documentos web que se encuentran divididos en capítulos.
  • prev: Al igual que en el caso anterior, aunque a la inversa, este parámetro indica la relación con el documento; pero, en este caso, se trata del documento previo.
  • contents: En este caso, se indica que el recurso enlazado es el documento que contiene la tabla de contenidos de la colección de documentos; cómo podría ocurrir, por ejemplo, en el índice de un blog post.
  • bookmark: Por último, tenemos este marcador que sirve para establecer cómo favorito al enlace actual. Este es un marcador de enlace que constituye un punto de entrada muy importante dentro del documento.

4. ¿Qué significa charset o codificación de caracteres en un atributo HTML?

Bueno, queda el último de los atributos que podemos agregar a los enlaces. Entonces, cómo ya vimos, además de idioma, tipo de contenido y relación del recurso que se enlaza, los enlaces también pueden indicar la codificación de caracteres que utiliza la página web enlazada.

Los valores que se pueden utilizar también están estandarizados y las codificaciones más usadas son UTF-8 y ISO-8859-1, aunque existen decenas de códigos definidos (ISO-10646-UCS-2IBM852Big5-HKSCSwindows-1252HZ-GB-2312).

Ahora veremos unos ejemplos, donde combinaremos los parámetros antes vistos dentro de la etiqueta <a>:

<a href="http://www.google.com" hreflang="en" type="text/html" charset="UTF-8">Página principal de Google</a>
<a href="http://www.ejemplo.com/fondo_escritorio.jpg" type="image/jpg">Imagen interesante para un fondo de escritorio</a>
Realiza tus consultas en el foro sobre el curso de HTML
Realiza tus consultas en el foro sobre el curso de HTML
error: Content is protected !!
Ir arriba