XHTML-1.0: Vínculos
VÍNCULO <a>
HTML401 DTD-XHTML10T DTD-XHTML10SURL a vincular (href) (charset) (hreflang) (type) (rel) (rev) (shape) (coords) Marcar vínculo (name) Destino (target) Acceso rápido (acceskey) Orden de tabulación (tabindex) Evento captar foco (onfocus) Evento dejar foco (onblur)
Se trata de un elemento del tipo %inline que puede contener elementos definidos del tipo %a.content que comprende elementos de los tipos también %inline siguientes:En definitiva, puede contener cualquier elemento en línea del tipo %inline excluyendo el tipo 
<a> por lo que un vínculo no puede contener vínculos en su interior.Se conforman básicamente con <a href = "URL">texto</a>, dirigiéndose a un sitio pulsando sobre "texto". También puede vincularse con un lugar de la página usando <a href="#lugar">texto</a>, donde "lugar" se refiere a un identificador que marca un vínculo con el atributo <a name="lugar"> o bien a un identificador de tipo <E id = "lugar"> donde E es un elemento cualquiera, que también sirven para marcar un vínculo.
Este elemento <a> es un vínculo interno de un documento. Además podemos encontrar vínculos externos a ubicar en el elemento de cabecera que podemos consultar en <link>, pues comparten algunos atributos comunes.
Ejemplo <a>, vínculo a otra página
Ir a otra página en el mismo directorio. Veáse que es aconsejable poner las URL todo en minúsculas por si algún servidor las diferencia.
Ir a la página <a href="imagen.html">Imagen.html</a> en
este directorio.
Resultado:
Ir a la página Imagen.html en este directorio.Ejemplo <a>, vínculo a un sitio en una página
Ir a un lugar de otra página en el mismo directorio. En este caso se agrega después de la URL el identificador de sitio con el carácter "#". Por ejemplo, para ir a un lugar etiquetado como<div class="item" id="sup"> en la página "formato.html" hemos de referenciarlo con formato.html#sup teniendo cuidado de no dejar espacios entre el nombre de la página y la referencia pues algunos navegadores no lo admiten:
Ir al lugar identificado con "id=sup" en la página
<a href="formato.html#sup">Formato.html</a> en este directorio.
Resultado:
Ir a al lugar identificado con "id=sup" en la página Formato.html en este directorio.Ejemplo <a>, abrir archivos
También puede abrir un archivo específico, para lo cual el navegador deberá saber gestionarlo, o también abrir un correo electrónico y cualquier destino que permita un "URL".
<p>Abrir un archivo de texto <a href="ejemplos/vinculo/ejemplo.txt">ejemplo.txt</a></p>
<p>o bien una imagen <a href="imagen_1.jpg">imagen_1.jpg</a></p>
<p>o abrir para enviar un correo a la dirección de ejemplo
<a href = "mailto: correo@dominio.es" > correo@dominio.es </a></p>
Resultado:
Abrir un archivo de texto ejemplo.txt
o bien una imagen imagen_1.jpg
o abrir para enviar un correo a la dirección de ejemplo correo@dominio.es
Ejemplo <a> imágenes como vínculos
Puede usar una imagen como elemento para pulsar un vínculo. El navegador (a excepción de Opera y Safari) añade un borde a la imagen para marcar que es una imagen con vínculo.
Un vínculo al pulsar sobre esta imagen
<a href="ejemplos/vinculo/imagen_1.jpg">
<img src="ejemplos/vinculo/imagen_1.jpg" width="20" height="27"
alt="imagen_1.jpg" />
</a>
Resultado:
Un vínculo al pulsar sobre esta imagen URL a vincular <a href = "x">
El valor es del tipo %URI estableciendo una ruta a un lugar de esta página como "#lugar" o relativa a una página en el mismo directorio como "pagina.html" o a partir del mismo directorio como "/carpeta1/pagina.html" o absoluta como "http://www.wextensible.com/index.html". En este último caso si lo que deseamos es ir a la página de inicio, es preferible no indicarla dado que puede ser nombrada de otra forma como "default.html" por ejemplo, por lo que esta ruta absoluta sería "http://www.wextensible.com/" de tal forma que el navegador buscará la página por defecto. También podemos combinar ir a un lugar específico de una página como "http://www.sitio.com/directorio/paginax.html#lugar".Codificación del idioma del recurso <a charset = "x">
El valor "x" es del tipo %Charset para indicar al navegador sobre la codificación de carácteres del recurso vinculado. Así podrían indicar al usuario que el vínculo contiene carácteres que pudieran resultar ilegibles. Este atributo también se usa en <link charset> donde se expone un ejemplo, en este caso con <a charset>.Lenguaje del recurso <a hreflang = "x">
El valor "x" es del tipo %LanguageCode. Especifica el idioma del recurso designado por el destino del vínculo. Veáse también con un cometido similar el especificado en vínculos externos con <link hreflang>.Tipo de contenido <a type = "x">
El valor "x" es del tipo %ContentType para proporcionar información sobre el tipo de contenido del destino del vínculo. El navegador podrá entonces no abrir el vínculo si no soportara el tipo de recurso.Vínculo directo <a rel = "x">
Es un atributo con valores del tipo %LinkTypes para describir la relación que existe entre el documento actual y el vinculado con <a href>, con la finalidad de que las aplicaciones interpreten esa relación de diversas formas. Con finalidad similar también es utilizado en vínculos externos con <link rel>.Vínculo inverso <a rev = "x">
El valor del atributo es del tipo %LinkTypes para describir un vínculo inverso desde el origen del vínculo que especifica href al documento actual. En <link rev> se encuentra un uso similar para vínculos externos.Dar forma a un área de un vínculo <a shape = "x">
El valor "x" es del tipo %Shape para dar forma a un área, pudiendo tomar los valores rect, circle, poly, default para formar un rectángulo, círculo, poligono o la región completa resepectivamente. El valor por defecto es rect. Su utilidad es la misma que la indicada en <area shape>. Pero para su mejor comprensión es necesario entender el concepto de mapa de imagen que se explica en <map>, donde este elemento <a> se comporta de forma equivalente a un elemento <area>. Se expone un ejemplo de uso en mapa con vínculos del tipo <a>.Coordenadas de un área con vínculo <a coords = "x">
El valor "x" es del tipo %Coords para fijar las coordenadas (según la forma especificada en <a shape>) de un área correspondiente a un mapa de imagen. Se comporta de forma equivalente a <area coords>. Para la mejor comprensión del concepto ver <map> y el ejemplo mapa con vínculos del tipo <a>.Marcar vínculos <a name = "x">
El valor del atributo es del tipo NMTOKEN para designar un nombre único al elemento para que pueda actuar como destino de otro vínculo. Comparte el espacio de nombres con <E id>, pues en definitiva ambos atributos sirven para marcar un lugar de forma única en un documento que pueda luego servir como destino de un vínculo. Las diferencias entre usar un identificador y otro son:- Además de identificador de vínculo,
idpuede actuar también como identificador para otros propósitos como selector de estilo, identificadores de proceso, etc. - Navegadores que no soporten las versiones más recientes de HTML no podrán actuar con
id, ante lo cual cabe la posibilidad de incluirnameeidcon el mismo valor para identificar un elemento<a>. Sin embargoides un atributo genérico que puede incluirse en prácticamente todos los elementos sin necesidad de incorporarlos en un identificador con el elemento vínculo, como por ejemplo<a name="x" id="x" />. - Por otro lado
namees del tipo NMTOKEN lo que permite nombres de vínculos mas variados, mientras queides del tipo ID que restringue los carácteres a usar. Sin embargo en este punto es preferible siempre que sea posible usarid, pues usa el tipo de identificación previsto en XML (la base de XHTML).
Ejemplo <a name>
Presentamos algunos ejemplos de uso para identificar elementos de vínculo. El código y los comentarios del resultado son suficientes para entenderlos.
...
<p><a name="mi-lugar">Este es un lugar de destino identificado con
<code>name="mi-lugar"</code></a>. El elemento <code><a></code>
dispone de contenido.</p>
...
<p>Con este <a href="#mi-lugar">vínculo</a> voy a "mi-lugar" en el
documento actual.</p>
...
<p><a name="mi-lugar-2" id="mi-lugar-2" />Este es un segundo lugar de
destino llamado "mi-lugar-2", identificándose con <code>name="mi-lugar-2"
id="mi-lugar-2"</code>. En este caso se trata de un elemento
<code><a></code> vacío.</p>
...
<p>Con este <a href="#mi-lugar-2">vínculo</a> voy a "mi-lugar-2".</p>
...
<p id="mi-lugar-3"><a name="mi-lugar-3" />
Ahora hemos identificado el elemento párrafo con el atributo
genérico <code><p id="mi-lugar-3"></code>, pero no podemos incluir
<code>name</code> de la misma forma, por lo que o bien lo obviamos o
también agregamos a continuación un elemento identificador de vínculo
<code><a name="mi-lugar-3"/ ></code>.</p>
...
<p>Con este <a href="#mi-lugar-3">vínculo</a> voy a "mi-lugar-3".</p>
Resultado:
...Este es un lugar de destino identificado con name="mi-lugar". El elemento <a> dispone de contenido.
Con este vínculo voy a "mi-lugar" en el documento actual.
...Este es un segundo lugar de destino llamado "mi-lugar-2", identificándose con name="mi-lugar-2" id="mi-lugar-2". En este caso se trata de un elemento <a> vacío.
Con este vínculo voy a "mi-lugar-2".
... Ahora hemos identificado el elemento párrafo con el atributo genérico <p id="mi-lugar-3">, pero no podemos incluir name de la misma forma, por lo que o bien lo obviamos o también agregamos a continuación un elemento identificador de vínculo <a name="mi-lugar-3"/ >.
Con este vínculo voy a "mi-lugar-3".
Especificar marco de destino para un vínculo <a target = "x"> (XHTML transicional)
El valor es del tipo %FrameTarget con la misma finalidad que la indicada para el elemento de cabecera de página <base target>.Ejemplo <a target>
El ejemplo muestra como abrir este lugar de esta página en una nueva ventana.
Duplicar <a href="vinculo.html#a-target" target="_blank">ventana</a>
Resultado:
Duplicar ventanaAcceso rápido con teclas a un vínculo <a accesskey = "x">
El valor es del tipo %Character que es un tipo final CDATA para representar un caracter. Se trata de un atributo genérico expuesto en <E accesskey> que puede darse en elementos que pueden obtener el foco, como es el que nos ocupa (<a>). Permite acceder a un vínculo usando una combinación de teclas en lugar de pulsar sobre el ratón. En algunos navegadores la combinación es con la tecla "Alt" y en otros con la tecla "Ctrl". Algunos no acceden directamente sino que ponen la información del vículo en el pie del navegador para que el usuario acepte ir a ese sitio pulsando "Enter".Ejemplo <a accesskey>
Ejemplo para acceder con "Alt-S" o bien "Ctrl-S" según navegador al inicio de la página. Hemos observado en los navegadores consultados que no funciona adecuadamente debido a que en algunos casos las combinaciones de teclas pueden interaccionar con las propias definidas en la aplicación para ejecutar acciones del navegador.
Podemos <a href="#a" accesskey="S">ir a inicio</a>
accediendo con Alt+S o Ctrl+S según navegador.
Resultado:
Podemos ir a inicio (S) accediendo con Alt+S o Ctrl+S según navegador.
Con Explorer y alt+S nos sitúa el foco en el vínculo, mientras que con Safari si se produce la ejecución del vínculo. Con Opera y Firefox se ejecutan otros cometidos del navegador.
Orden de tabulación <a tabindex = "x">
El valor es del tipo %Number. Se trata de un atributo genérico expuesto en <E tabindex> para aquellos elementos capaces de obtener el foco, como el elemento vínculo. Nos permite avanzar con la tecla "tab" por los distintos vínculos y luego pulsar "enter" para activarlo. Los valores de "x" van de 0 a 32767. El navegador dota de forma automática de un número de tabulación a cada vínculo (y otros elementos como imágenes, formularios) con un orden según aparición en el documento. Podemos alterar ese orden mediante tabindex. Si duplicamos dos índices iguales el navegador recurrirá al orden de aparición.Ejemplo <a tabindex>
Hay que tener en cuenta que la tecla "tab" también puede ser usada por el navegador para otras funciones, por lo que cuando accede por primera vez a la página pasará primero por estas tabulaciones del navegador y luego entrará en el valor más bajo detabindex que hayamos creado. En algunos casos basta hacer click con el ratón en un lugar del texto (o seleccionar un trozo cualquiera de texto) inmediatamente antes del primer vínculo donde queramos desplazarnos con la tecla de tabulación. Si queremos deshabilitar un vínculo de la tabulación le dotamos de valor negativo.
<p>Pulse en esta línea para ... </p>
<p>Vínculo con <a href="ejemplos/imagen/imagen_2.gif" tabindex="1">
Tabindex número 1</a></p>
<p>Vínculo con <a href="ejemplos/imagen/imagen_3.jpg" tabindex="2">
Tabindex número 2</a></p>
<p>Vínculo con <a href="ejemplos/imagen/imagen_1.jpg" tabindex="-999">
Tabindex deshabilitado</a></p>
<p>Vínculo con <a href="ejemplos/imagen/imagen_5.jpg" tabindex="3">
Tabindex número 3</a></p>
Resultado:
Pulse en esta línea (o para otros navegadores seleccione un trozo de texto inmediatamente antes del primer vínculo) para situar el cursor del navegador y luego use la tecla "tab" para avanzar o "maýus+tab" para retroceder por los vínculos. Observe el índice deshabilitado que será saltado.
Vínculo con Tabindex número 1
Vínculo con Tabindex número 2
Vínculo con Tabindex deshabilitado
Vínculo con Tabindex número 3
