Lenguaje XHTML/Hipervínculos

Los hipervículos o enlaces son parte fundamental de la navegación en Internet. Permite al visitante desplazarse por los distintos documentos de un sitio web de forma fácil con tan sólo señalar un elemento. Para muchos lectores esto significa hacer clic con el ratón o mouse, pero la verdad es que también se puede acceder pulsando la tecla Intro cuando el hipervínculo tiene el foco, tanto en navegadores gráficos como en navegadores sólo texto, además de dispositivos móviles. Además, los hipervínculos o enlaces no sólo son elementos situados en el cuerpo del documento donde el usuario puede interactuar, sino que hay una serie de enlaces a otros documentos que pueden no ser accesibles diréctamente por el usuario pero sí por el navegador o agente usuario por tratarse de enlaces a documentos especiales como hojas de estilo, documentos alternativos o código javascript.

Elemento a

Lenguaje XHTML/Plantillas/Elemento Por defecto, en la mayoría de navegadores gráficos aparecen azules y subrayados. Cuando se pasa el puntero del ratón sobre un hipervínculo en la mayoría de navegadores el puntero cambia a la forma de una mano con el dedo índice extendido. Este comportamiento se puede cambiar utilizando estilos.

Es el elemento que permite que una región del documento (el contenido del elemento, no necesariamente texto) se convierta en un hipervínculo. El contenido de este elemento es cualquier elemento que no sea de bloque, es decir, un elemento a nivel de línea. Esto significa que, por ejemplo, no podemos poner dos párrafos seguidos dentro de un único elemento a, sino que deberemos insertar un elemento a en cada párrafo.

El nombre de este elemento, a, viene del inglés anchor, ancla en español. Aunque si bien este elemento puede ser el destino de un hipervínculo, lo más habitual es que sea el origen de éste y, por tanto, se definiría mejor como el lugar desde donde se echa el ancla.

En cuanto a sus atributos no hay ninguno que sea obligatorio porque puede actuar como origen y/o como destino del hipervínculo. Su atributo más útil y del que casi siempre lo veremos acompañado es el atributo href. Este atributo sirve para indicar el destino del hipervínculo. Su valor es un URI (Uniform Resource Identifier, identificador de recursos uniforme) y que generalmente será un URL, un subtipo de URI, es decir, un identificador unívoco a un recurso, ya sea una página web, una parte de un documento o un recurso identificable por el navegador como una función javascript.

Los atributos charset, type y hreflang sirven para dar detalles al usuario sobre el documento o recurso al que apunta el hipervínculo. El primero indica el tipo de codificación de caracteres que utiliza el documento, type indica el tipo de contenido MIME y hreflang el idioma (no confundir con xml:lang, que especificaría sólo el idioma del contenido entre las etiquetas <a> y </a>). Puede ser útil utilizarlos cuando el documento de destino tenga esos parámetros diferentes al documento actual. Es posible que algunos navegadores en el futuro proporcionen de alguna forma esa información al usuario, como una imagen identificativa del tipo de archivo o el idioma al lado del hipervínculo o al pasar el ratón por encima. O utilizada por un indexador para clasificar oportunamente el contenido. Sin embargo, el navegador no está obligado a utilizar esa información que le ha proporcionado el programador para determinar su comportamiento al acceder al hipervínculo, por lo que ignorará esa información. Solamente está para informar al usuario.

El destino del hipervínculo

Ahora ya sabe la teoría sobre los hipervínculos, pero ¿sabe realmente qué debe poner en el atributo href para enlazar el recurso que usted desee? Si la respuesta es no aquí intentaremos arrojar luz sobre esta cuestión.

Para empezar debemos distinguir entre dos tipos de enlaces: absolutos y relativos.

Enlaces absolutos

Los enlaces absolutos identifican el recurso independientemente de desde dónde se haga referencia. Los verá siempre con un prefijo seguido de dos puntos que identifica, por decirlo de algún modo, el protocolo que se utiliza para acceder al recurso. Entre los que la gran mayoría de navegadores reconocen:

http:

Es el identificador del protocolo de transferencia de hipertexto o HTTP, utilizado para las páginas web de internet.

https:

Es como el HTTP pero utilizando SSL para encriptar los datos.

ftp:

Es el protocolo de transferencia de archivos o FTP.

mailto:

Para enviar un correo electrónico al destinatario especificado.

gopher:

Protocolo Gopher.

news:

Servidores de noticias Usenet.

javascript:

Llamada a código JavaScript, sólo para navegadores que lo soporten.

A pesar de que estos prefijos puedan o no pertenecer a estándares, lo cierto es que es el propio agente usuario (el navegador) el que debe implementar la forma de acceder a ese recurso, si es que tiene capacidad para hacerlo, ya sea de forma interna o bien llamando a un programa o al propio sistema operativo para que lo gestione externamente, como puede ser un enlace a un correo electrónico o a un canal de chat.

La estructura de un URI http es tal que así (texto entre corchetes opcional, en cursiva variable):

Nota: Esta sección no es una referencia exacta de los estándares involucrados en la construcción de URIs, aunque se intenta ser lo más preciso posible.

http:// [ usuario [ : contraseña ] @ ] servidor [ : puerto ] [ ruta_absoluta ] [ ? parámetros ] [ # identificador ]

Y es muy similar para https y ftp. Si se requiere autenticación de usuario HTTP se puede hacer anteponiendo el usuario al nombre del servidor separado por el carácter arroba (@), e incluso la contraseña separada por los dos puntos del nombre de usuario, aunque no es recomendable ya que puede quedar en el historial del navegador. Para FTP existe un usuario especial de nombre anonymous que es el usuario con el que se accede a servidores públicos que lo permitan y es el que usará el navegador si no se especifica ninguno. Si se omite y es requerido por el servidor el navegador debería encargarse de ofrecer un método para solicitárselo al usuario. El puerto al que se debe conectar es por defecto el 80 para HTTP, 443 para HTTPS y 20 para FTP y, si no se especifica, se conectará diréctamente a esos puertos. En caso de que el servidor al que queramos acceder se encuentre en otro puerto deberemos especificarlo en la dirección. Después se encuentra la ruta de acceso al recurso, que va separado por el carácter de barra invertida (/) y donde cada carácter de barra invertida indica (no siempre, puesto que los servidores se pueden configurar para crear alias) un nivel de directorio en el sistema de archivos del servidor. Al final de la ruta se suele especificar un nombre de archivo, pero si no se especifica ninguno los servidores acostumbran a estar configurados para servir el archivo index.html del directorio especificado, si existe, acortando un poco la dirección. Si el recurso al que se accede es en realidad un ejecutable de servidor se le pueden pasar parámetros que modifiquen su comportamiento, separando el nombre del valor por el signo igual (=). Si se le pasa más de un parámetro deberán separarse entre sí por el carácter ampersand (&, pero recuerde codificarlo en el código html como &amp;). También se puede especificar un identificador en el documento de destino para que el navegador muestre el contenido del documento empezando a partir del elemento identificado por el mismo (véase Enlazar a parte de un documento).

Algunos ejemplos de recursos HTTP, HTTPS y FTP:

• http://www.example.com/ accede al servidor www.example.com por HTTP.
• http://www.example.com/#seccion1 igual que el anterior pero sitúa el documento en el navegador con el elemento identificado como seccion1 al principio del área de visualización del navegador, si es posible y existe tal identificador.
• http://www.example.com/index.html. En el caso de que el servidor esté configurado para servir el documento index.html si no se especifica el nombre del archivo, esta dirección equivaldría a la primera.
• https://usuario:password@www.example.com:81/ruta/de/acceso.php?param=hola&action=muestra#zona-n aquí tenemos un ejemplo completito, especificando nombre de usuario, contraseña, puerto de acceso, parámetros, identificador y por HTTPS.
• ftp://usuario@ftp.example.com/ aquí accedemos por ftp indicando nuestro nombre de usuario. Si se requiere contraseña lo más seguro es que el navegador nos muestre un diálogo en el que introducirla.

Para correos electrónicos (mailto:) se utiliza una sintaxis diferente, definida en la RFC2368: se trata de el prefijo mailto: seguido de ninguno, uno o más destinatarios separados por comas. También se pueden especificar los parámetros de la cabecera del correo, aunque la mayoría de navegadores ignorarán los parámetros no seguros. Entre los parámetros que se acostumbran a aceptar están:

• to. Especifica los destinatarios y es redundante si se ponen los destinatarios seguidamente del mailto:.
• subject. Indica el asunto del mensaje.
• body. Indica el cuerpo del mensaje, el contenido.

Absténgase de utilizar espacios en los URI. Si lo necesita (para el campo body) utilice la codificación hexadecimal ASCII correspondiente (con el signo de porcentage % precediendo cada carácter), en este caso %20. Algunos ejemplos:

• mailto:usuario1@example.com,usuario2@example.com
• mailto?to=usuario@example.com&subject=Algo%20interesante
• mailto?subject=Hola,%20amigo&body=Un%20saludo

El hecho de acceder a un enlace de correo electrónico no implica el envío del correo electrónico. El navegador debería hacer una llamada al programa de correo predeterminado del sistema operativo o el configurado por el navegador y crear un nuevo mensaje de correo rellenando los campos especificados y a la espera de que el usuario lo envíe, guarde, modifique, descarte, etc. El mensaje no es enviado desde el servidor que suministró el documento XHTML.

El URI javascript: es, de hecho, especial, ya que su contenido es procesado tal cual por la consola JavaScript del navegador, si es que tiene soporte para ello.

El contenido del hipervínculo

El contenido del hipervínculo es la zona del documento situada dentro del elemento a. Elegir el contenido del hipervínculo no es algo para tomar a la ligera. A continuación se expondrán algunos consejos (no normativos) que le guiarán sobre cómo hacer sus hipervínculos accesibles.

Utilice textos cortos y significativos

No use el «haz clic aquí» en un enlace. Los enlaces deberían explicar por sí solos el contenido del documento al que enlazan, dar una idea al lector sobre qué se va a encontrar. Pero al mismo tiempo debería ser un texto corto para no distraer la atención del lector.

El hipervínculo no debería interferir en la lectura del documento. Para hacerse una idea, piense cómo se vería un documento sin ningún tipo de hipervínculo y si, como lector, notaría que hay texto haciendo referencia a los hipervínculos que no existen. También puede hacer la prueba al revés: si tiene un navegador que le permita listar todos los enlaces de la página (como Firefox) compruebe si los textos de los enlaces son suficientemente descriptivos fuera de contexto como para indicar la temática del contenido del documento al que enlazan. Vea el siguiente ejemplo:

«Haga clic aquí para saber más sobre XHTML»

La palabra aquí no dice absolutamente nada del documento al que enlaza. Imagínese que ha llegado a esa página web buscando información sobre XHTML. Por lo general los hipervínculos resaltarán sobre el resto del texto, seguramente por estar subrallados y en un color diferente. Con un vistazo rápido en la página seguramente no lograremos encontrar la palabra XHTML, pero sí un aquí que no nos aportará nada. Otro elemento a tener en cuenta es que el usuario no necesariamente tenga que hacer clic: puede moverse por los enlaces a través del teclado o de otra forma. También piense en un buscador: lo más probable es que utilice el contenido de los enlaces que apunten a esa página como palabra clave de búsqueda. La palabra aquí no aportará ninguna información relevante sobre el documento.

«Saber más sobre XHTML»

Este ejemplo está mucho mejor, aunque el contenido del enlace, saber más, no es todo lo específico que debiera. No es recomendable enlazar verbos, ya que son muy utilizados y su significado por sí sólo puede ser demasiado ambiguo.

«¡Aprenda XHTML!»

Éste es el enlace ideal. Concreto. Conciso. Sin rodeos. Sin lugar a dudas. Se podría haber enlazado también Aprenda pero, como la frase es muy corta, el enlace atrae mucho más la atención sobre XHTML, y aprenda está justo al lado del enlace, por lo que no deja lugar a dudas.

Accesibilidad en hipervínculos de objetos e imágenes

En la actualidad hay muchos navegadores web que presentan las imágenes sin problemas. Sin embargo no podemos estar seguro de que lleguen a procesarse. El navegador podría no soportar las imágenes o el formato que usan, el usuario puede haberlas desactivado o incluso las imágenes podrían no estar disponibles en el servidor. También hay que tener en cuenta las capacidades físicas del usuario: podría ser un ciego o tener dificultades de visión y utilizar un navegador que con un sintetizador de voz leyera el contenido del documento. Estas situaciones impedirán al usuario acceder al contenido y, lo que es peor, al propio hipervínculo del documento.

Si inserta un hipervínculo en una imagen téngalo en cuenta. Debe especificar un texto alternativo para la imagen en el atributo alt del elemento img, que el navegador mostrará en lugar de la imagen si ésta no se puede mostrar. Es una buena idea proporcionar el mismo hipervínculo como texto en otro lugar del documento como, por ejemplo, en un párrafo donde se explique la imagen o en una lista de enlaces si la imagen se utiliza como navegación para el sitio web. Aunque parezca redundante no está de más, sobretodo si las imágenes están separadas del texto: a falta del elemento visual seguramente el texto del hipervínculo, por sí sólo, no ayude a comprender el contexto del hipervínculo.

La utilización de enlaces redundantes es imprescindible si se utiliza un objeto flash como elemento de navegación para el documento web. Hay que tener en cuenta qué pasaría si no podemos tener acceso a ese objeto, ya sea por un fallo en el servidor que no lo podemos descargar o bien porque no tenemos el plug-in necesario para visualizarlo. Mejor un caso práctico: un buscador. Si un buscador entra a nuestra web para indizarla y se encuentra con un objeto Flash, lo ignorará. Imagine que el único acceso al resto de páginas de su sitio web se tiene que hacer a través del objeto Flash. El buscador no podrá indizar sus páginas y, como consecuencia, su web no aparecerá en los buscadores, o sólo aparecerá la página principal. También los problemas de accesibilidad que comportan los objetos Flash como poder navegar por los enlaces con el teclado, seleccionar texto o que el texto pueda ser sintetizado por una voz. Como podrá ver en el capítulo sobre objetos el propio XHTML define que se pueda definir contenido alternativo para que se muestre en el caso de que el objeto no pueda ser procesado por el navegador; de todas formas, no es mala idea incluir una alternativa aun cuando se pueda tener acceso al objeto.

Parrafos e ids

En XHTML, los títulos están definidos por los tags <h1>, <h2>,..., <h6>. <h1> es el título más grande y <h6> el más pequeño. Los títulos para una sección deberían ser alguno de estos tags. Un párrafo debe ir entre los tags <p>. Un párafo no debería incluir su propio título dento de sí mismo.

Tanto los títulos como los párrafos pueden tener el atributo id (pronunciado como la abreviatura de identificación). En HTML, esto se llamaba a veces el atributo name, pero ahora, el atributo name está descontinuado. Vamos a crear ahora un XHTML de ejemplo, pondremos un título que diga "Inicio" y un párrafo que diga "Hola mundo" con el id "contenido":

= Inicio =
   <p id="contenido">Hola mundo</p>

Todos los tags en XHTML pueden tener un atributo id. Es recomendable añadir dicho atributo a cada tag que defina una sección lógica para asegurarse que los usuarios podrán modificar la estética fácilmente por la que más les guste, por medio de las hojas de estilo. El id de un bloque de texto o de un título no se aprecian en ninguna parte de la página XHTML, pero tiene otros usos. Por ejemplo, si estás vinculando a una página XHTML, es posible hacer abra esa página y luego escrole automáticamente hasta que encuentre el elemento con un cierto id. Para hacer eso, debes usar una ruta relativa como se explicó antes. Si estás vinculando a un id de la página actual, usa la sintaxis #nombre_del_id para el id al que quieras vincular. Por ejemplo, para hacer un vínculo a la sección con el id parrafos_e_id (esta sección), debes usar el código

 <a href="#parrafos_e_id">esta sección</a>

para obtener esto: esta sección. Vinculando desde otro sitio web al id de una página es muy simple. Sólo escribe la URL que quieres vincular acompañada por un un singo # (sin espacios) y el id al que quieres referenciar. Entonces, para vincular al id "Sister_Projects" de la página principal de Wikibooks debes escribir:

 <a href="<nowiki>http://wikibooks.org/wiki/Main_Page#Wikibooks'_Sister_Projects">
   Wikibook's sister projects
</a>

para obtener esto: Main Page#Wikibooks' Sister Projects.

Hagamos un XHTML más largo para ilustrar mejor este punto.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <title>
       Paragraph
     </title>
   </head>
   <body>
     <p id="Wikibooks">
= Wikibooks =
       Wikibooks is a great website. Click
         <a href="#Books">here</a>
       to see some examples of some textbooks.
     </p>
     <p id="Books">
       <h1&gt;Books</h1>
       Some books at Wikibooks.org include: 
       Algebra, XHTML, and Spanish.
     </p>
   </body>
 </html>
[[Archivo:XHTML-paragraph-firstloaded.png]]
<br />
<small>Page when first loaded</small>
<br />
[[Archivo:XHTML-paragraph-here.png]]
<br />
<small>Page after "here" is clicked</small>

Download here

Los saltos de línea y los separadores están indicados con un elemento vacío, o uno que se cierra a sí mismo usando un signo '/' al final del tag. Los saltos de línea, que crean una nueva línea sin empezar un nuevo párrafo, están definidas por el elemento <br />. Aunque si seguimos los estándares, es correcto escribirlo como <br /> si no lo escribes como un elemento suelto, algunos navegadores no lo renderizarán de forma correcta. Lo mismo se aplica a los separadores, escritos usando el elemento <hr />. Los separadores se ven como una línea que cruza la pantalla en horizontal, así:

---

(Nota: Si estas usando el tema Cologne Blue en los Wikibooks, puede que no veas esta línea. Si no la ves, cambia temporalmente a un tema diferente como Standard o Nostalgia)

El espacio entre br y / es necesario para que algunos navegadores viejos lo interpreten correctamente. Los estándares no lo requieren pero tampoco lo prohíben.