HTML5-Enlaces semanticos

logoRF_HTML5No podía ser menos, si esta tan orientado a la semántica….¿como ni iba a tener un refuerzo semántico para los enlaces?. Nuestra vieja etiqueta «a» se rejuvenece con gran cantidad de posibilidades semánticas.

Hasta ahora, cuando escribíamos un link, solo estábamos creando un vinculo para que nuestro visitante, pudiera pasar de una pagina a otra, pero….eso se ha acabado. Ahora, ademas de darle esa posibilidad, le estamos indicando como se relaciona la nueva pagina con la actual, que comportamiento esperamos y muchas mas cosas, gracias a los nuevos atributos, y sobre todo, a los nuevos valores de los atributos.

Primero recordemos que disponemos de etiquetas semánticas; que le dan sentido al contenido; entonces, un enlace de publicidad, lo podríamos  escribir así:

html5_enlaces_semanticosSi, es el enlace de siempre, pero…por un lado, lo hemos recubierto de «aside» para que no se confunda con el tema de la web; el texto lo he independizado con un «section» y he utilizado etiquetas de títulos para remarcar lo mas importante.

A continuación, vamos a revisar los atributos que puede llevar la etiqueta «a», y los valores; veréis que aparecen mezcladas cosas que ya conocíamos con otras muy novedosas,…y a mitad de implementación, pero….deberemos irnos preparando.

Una etiqueta «a» crea el enlace en el texto que aparece dentro del contenido de la etiqueta:

HTML5_etiqueta_a

Atributos de la etiqueta <a>

href

Dirección URL a la que dirige el enlace; este atributo es obligatorio, y puede ser indicado en forma absoluta como href=»http://www.recursosformacion.com/inicio/pruebas.html», o relativo a la situación de la pagina que llama, como href=»inicio/pruebas.html»

html5_hrefEn las lineas precedentes:

  • linea 34, href=»#», solo recarga la propia pagina.
  • linea 35, desde cualquier parte de dentro o fuera del web que se invoque, saltará a la dirección absoluta que se le indica. El sistema reconoce una dirección absoluta solo si se indica el protocolo (http://, https://, ftp:// …..)
  • linea 36 href representa una dirección relativa desde la raíz de la web
  • linea 36 href representa una dirección relativa desde la carpeta de la pagina actual (no empieza con /
  • linea 38, el cursor va hasta la palabra que este recubierta con la estructura de la linea 40; si es necesario hacer scroll, el navegado lo hará, para permitir ver la nueva posición
  • linea 40, «ancla«. Destino al que puede saltar un enlace como el de la linea 38

download

Le indica al navegador que el enlace no es para ser mostrado, si no para descargarlo, y en este atributo, le podemos indicar el nombre del fichero que se sugerirá en la descarga.

html5_downloadAquí vemos como podríamos hacer que un fichero que estuviera en nuestra web, en la carpeta «almacén» y que se llamara «cursoHTML5.pdf«, se descargará sin visualizarse, a un fichero que en el ordenador del usuario seria «RF Curso HTML5.pdf«

title

Este atributo, se puede utilizar en cualquier etiqueta, y suele dar como resultado, el que aparezca un «tool tip» al situar el ratón encima de la caja correspondiente. Los buscadores pueden utilizarlo para obtener informacion acerca del documento destino

hreflang

Informa acerca del idioma de la pagina de destino. En caso que el objeto destino no posea información de idioma, se utilizara el aquí  indicado.

target

Ventana en la que se cargara/abrira la pagina indicada en el enlace; los posibles valores son:

  • _self: Abre el documento en la misma ventana en la que esta el documento actual. Si no se indica «target», asumira siempre «_self»
  • _parent: Intenta ir a la ventana del documento padre, osea, al documento que llamó al documento actual. Solo tiene sentido si se estan utilizando «iframes»
  • _top: Abrirá el nuevo documento en la ventana  del primer padre (en caso de iframes), por lo que garantiza que el documento siempre se abrirá en una ventana principal del navegador.
  • _blank: Abre el nuevo documento en una ventana o pestaña nueva. La nueva ventana no recibirá foco hasta que el usuario la seleccione, y la ventana actual, queda con el mismo documento que ha iniciado la llamada.

ping

Podemos indicar una lista de las URLs a las que se les intentará comunicar que se ha seleccionado el enlace. Cada URL la podemos ir separando de las demás con un espacio en blanco.

type

En «type» podemos indicar el MIME-type del contenido del objeto destino del link, aunque es un dato meramente informativo, puede ser conveniente utilizarlo cuando estamos enlazando ficheros tipo PDF, ZIP, DOC,…., ya que por defecto, va a asumir que es un tipo «text/html». En esta web, dispones de la lista completa de MIMEs.

media

Es un atributo únicamente informativo que indica el medio para el que fue creado el recurso enlazado; los medios pueden ser:

  • all: Cualquier dispositivo
  • aural: sintetizadores de voz
  • braille: Dispositivos táctiles de braille
  • handheld: dispositivos portátiles de pantalla pequeña y reducido ancho de banda
  • print: para impresión
  • projection: para proyectores
  • resolution>90dpi: para resoluciones menores que…..
  • screen: para pantalla
  • tty: para terminales, teletipos, o elementos portátiles de ancho fijo
  • tv: para televisión de baja resolución
  • 3d-glasses: para gafas 3D

charset

Atributo que indica la codificación de caracteres de la pagina enlazada. Si el recurso enlazado no declara ninguna codificación de caracteres, se utilizará esta. Teneis una lista de los códigos disponibles aqui

 Con todo eso, un enlace nos podría quedar así:

enlace_html5_completo

Recordad que solo es un ejemplo para que veais el uso de todos los atributos mencionados. En la realidad, teniendo en cuenta las opciones por defecto, y que muchos de ellos, solo son recomendaciones, el enlace queda mucho mas sencillo.

Pero no hemos acabado con las posibilidades, nos queda por revisar un atributo, que, aunque siempre ha estado ahí, no tenia la relevancia que puede tener a partir de ahora; se trata de:

rel

Este atributo, define la relación entre la pagina actual y el recurso enlazado; como es previsible, podemos indicar mas de un valor para este atributo, dejando un espacio en blanco entre cada uno:

2014-08-21_09h47_51

Como hay todavia muchos valores pendientes de aprobar, vamos a ver primero una lista de los aprobados, y despues la lista de los pendientes.

  • alternate – indica que el enlace conduce a un documento alternativo al que estamos leyendo,ya sea por idioma, por presentación, por versión,….rel_alternate
  • author – enlace al contacto para el autor del contenido principal del articulo, ya sea una dirección web, un «mailto«,….
  • bookmark – Establece un enlace permanente con el contenido al que se hace referencia
  • help – enlace a un texto con información detallada acerca de las palabras utilizadas para enlazar2014-08-21_10h34_33
  • license – Enlaza al documento que establece los términos de licencia de derechos de autor del contenido principal del documento actual.
  • nofollow – Indica que el documento enlazado, no tiene nada que ver con el documento actual, Los buscadores no siguen estos enlaces, por lo que cuando alguien te enlaza con un «nofollow«, no representa ninguna ventaja para el SEO en el web enlazado.
  • noreferrer – Le indica al navegador que cuando enlace con la pagina, no debe indicar su procedencia. Cuando se efectúa un salto de una pagina a otra, la pagina llamada, recibe información sobre la pagina desde la que se llamó; con este valor, esa información no se facilita.
  • prefech – Se le indica al navegador, que la pagina ha de ser cargada en cache antes de que se la llame, para conseguir una interacción mas ágil. El atributo no debería ser usado mas que cuando los tiempos de carga para la nueva pagina son importantes, y el uso de dicho recurso, es habitual, ya que si no, consumimos ancho de banda de forma innecesaria.
  • search – La pagina/recurso enlazado ofrece una herramienta de búsqueda sobre la pagina, u ofrece los resultados de una búsqueda
  • tag – muy semejante a help, pero el documento no se considera «ayuda» de la palabra, si no que esta íntimamente ligado con el significado de la palabra enlazada, y a la vez, ña palabra mencionada corresponde a una palabra importante (keyword, tag…) para el documento actual.
  • next – Indica que el documento de destino, es el siguiente en una secuencia de documentos
  • prev – indica que el documento de destino, es el anterior en una secuencia de documentos

Y ahora revisamos los que todavía están en estudio, pero con muchas probabilidades de ser aceptado, y que ya hay navegadores que los contemplan y los recomiendan

  • start o first – El documento enlazado es el primero de una serie de documentos de la que esta pagina forma parte
  • last – El documento enlazado es el ultimo de la serie de documentos al que pertenece esta pagina
  • up – El documento enlazado esta un nivel por encima del documento actual, en una estructura jerárquica
  • index – El documento enlazado es el que proporciona el indice en el que aparece esta página
  • archives – el enlace corresponde a información antigua, aunque todavía este disponible
  • external – un enlace hacia otro web, y no tiene relación con la pagina actual
  • glossary – El documento aporta un glosario de términos del documento actual
  • chapter – Si la información esta distribuida en capítulos, los enlaces pueden figurar con este valor para «rel»
  • sidebar – El documento esta pensado para ser mostrado en un contexto secundario
  • pingback – La dirección indicada, acepta el protocolo de pingback
  • section – el documento indicado, esta configurado como una «section» de una colección de documentos
  • subsection – El documento contiene una subsection de un conjunto de documentos
  • appendix – Para el documento que sirve de apéndice de una colección
  • acquaintance – Significa que existe una relación social entre el autor de la pagina y el autor del enlace.
  • child – la persona descrita en el documento enlazado, es el hijo de la persona descrita en el documento actual
  • co-resident – la persona descrita en el documento actual y en el documento enlazado, residen en el mismo lugar
  • co-worker – la persona descrita en el documento actual, y en el enlazado trabajan en la misma empresa
  • colleague – La persona descrita en el documento actual y en el enlazado, trabajan en campos profesionales semejantes
  • contact – La persona descrita en el documento enlazado, es, de alguna forma, la persona de contacto para el documento actual
  • crush – La persona descrita en el documento actual, se siente atraído por la persona descrita en el documento enlazado.
  • date – La persona descrita en el documento actual, está saliendo con la persona descrita en el documento enlazado
  • friend – La persona descrita en el documento actual, es amiga de la  persona descrita en el documento enlazado
  • kin – La persona descrita en el documento actual, es familia lejana de la persona descrita en el documento enlazado
  • me – La persona descrita en el documento actual, es la misma persona descrita en el documento enlazado
  • met – La persona descrita en el documento actual, ha cumplido con la persona descrita en el documento enlazado
  • muse – La persona descrita en el documento enlazado, es la musa de la persona descrita en el documento actual
  • neighbor – La persona descrita en el documento actual, vive cerca de la persona descrita en el documento enlazado
  • parent – La persona descrita en el documento enlazado, es uno de los padres de la persona descrita en el documento actual
  • sibling – La persona descrita en el documento actual, es hermano de la persona descrita en el documento enlazado
  • spouse – La persona descrita en el documento actual, y la persona descrita en el documento enlazado, son esposos.

Y hasta aquí ha llegado la ampliación de esta etiqueta, puede que lo consideréis exagerado, pero cuando hablamos de maquinas, todo esto hace que las relaciones sean mas fáciles de interpretar; ahora ya lo sabéis y podéis escoger vuestro nivel de seguimiento

Nosotros, en el próximo articulo, empezaremos con los formularios en HTML5, otra de las grandes mejoras

 

Acerca de Miguel Garcia

Programador, Desarrollador web, Formador en distintas areas de informatica y director de equipos multidisciplinares.
Esta entrada fue publicada en Desarrollo Web, Diseño, Formacion, HTML5 y etiquetada , , . Guarda el enlace permanente.

2 respuestas a HTML5-Enlaces semanticos

  1. James Revelo dijo:

    Que buen articulo amigo, muy completo y detallado.

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.