Es una de las partes más importantes que tenemos en xhml, ya que a través de ellos nos movemos por los contenidos y páginas de nuestra web. Haciendo nuestras páginas más dinámicas. 

La etiqueta que nos permite crear un enlace es <a>.......</a>.

Podemos crear tres tipos de enlaces para vincular elementos o contenidos:

• A un archivo de nuestra web (enlace inerno): Ya sea un archivo html, fotos, archivos, etc.. que esten incluidos en nuestra web.

<a href="pagina1.html"> Ir a la página 1 </a>

• A una dirección de internet (enlace externo): Si intentamos dirigirnos a una página web distinta de la nuestra.

<a href="http://www.google.es"> google </a>

• A un punto específico del documento que tenemos abierto: Se utiliza para moverse en un documento html que es muy extenso. Para este tipo de enlaces necesitamos de dos etiquetas: una que marque el punto donde queremos ir, "name", y otro que nos envie a ese punto que sera "href", como en un enlace a un archivo de nuestra web al que le añadimos # antes del archivo.

Esta etiqueta la colocamos en el punto donde queramos ir, en nuestro caso el principio del documento html

< a name="inicio"> Titular de la pagina </a> 

Y con esta etiqueta en vez de llevarnos a otro archivo, lo que hacemos es movernos dentro del mismo. Se puede apreciar como hemos colocado el simbolo # para indicar que el enlace es se dirige al mismo documento y no a otro diferente.

<a href="#inicio"> Ir al principio de la página </a>

Podemos observar como entre los enlaces internos y los externos la unica diferencia que encontramos es que colocamos el prefijo "http://" para indicarle al navegador que tiene que conectarse a internet para encontar el vinculo, que no se encuentra en nuestro directorio. También los enlaces externos pueden apuntar a una dirección de correo, para esto lo único que tenemos que hacer es en vez de poner el prefijo http://, ponemos "mailto:".

<a href="mailto:info@infogranadatk.es">Contacta con nosotros</a>

Una vez que hemos visto los distintos tipos de enlaces que podemos crear en nuestra página vamos a analizar las distintas propiedades que podemos utilizar con la etiqueta a (también conocida como anchor).

Atributos opcionales

• Target: Con este atributo le indicamos donde queremos que se cargue el vínculo.
  • _blank: En una ventana nueva.
  • _self: En la misma ventana.
  • _parent: Hace que la página se muestre en la ventana que contiene a ese frame en concreto. Es decir, si tienes una página con frames, en uno de los cuales hay otra página con frames, y en uno de ellos tienes un link con target="_parent", entonces la página a la que llames con ese link aparecerá en el frame que contenía a la segunda página con frames.
  • _top: El vínculo se carga en la ventana principal donde están todos los frames (solo cuando trabajamos con frames). Esto lo veremos con los frames.
  • Podemos también poner el nombre de un frame para que nos lo carge en él. Pero eso lo veremos más adelante.
• Title: Para poner de que trata el link, una información adicional. Su uso es recomendable ya que  es usado por los robots de los buscadores en sus análisis.
• name: Debería ser una palabra corta y señala una parte del documento html para que sirva como destino de otros vínculos. (Ejemplo 3 de los tipos de enlaces).
• href: Con este atributo le señalamos el punto  de destino de los enlaces. Si colocamos # delante, indicamos que el destino esta dentro de nuestro documento.
• shape: Especifica la forma de un enlace. Los valores son:
  • default
  • rect
  • circle
  • poly
• rev: Especifica la relación entre el documento vinculado y el actual.
• rel: Especifica la relación entre el documento actual y el vinculado.
• charset: Especifica el juego de caracteres del documento vinculado
• coords: Especifica las coordenadas de un enlace.
• hreflang: Especifica el lenguaje del documento vinculado.

Atributos estandar

• accesskey: Especifica un atajo de teclado apra acceder a un elemento.
• class: Especifica un nombre de clase de un elemento.
• dir: Especifica la dirección del texto para el contenido de un elemento.
• id: Especifica un identificador único para un elemento.
• lang: Especifica un código de idioma para el contenido en un elemento.
• style: Especifica un estilo en línea de un elemento.
• tabindex: Especifica el orden de tabulación de un elemento.
• xml:lang: Especifica un código de idioma para el contenido de un elemento en los documentos xhtml.

Los atributos de eventos

La etiqueta <a> es compatible con los siguientes atributos de eventos:

• onblur: Secuencia de comandos para ser ejecutado cuando un elemento pierde el foco
• onclick: Secuencia de comandos para ser ejecutado cuando se pulsa sobre el enlace
• ondbclick: Secuencia de comandos para ser ejecutado cuando se hace doble click en el enlace.
• OnFocus: Secuencia de comandos para ser ejecutado cuando un elemento obtiene el foco.
• onmousedown: Script que se ejecuta cuando se pulsa sobre el enlace.
• onmousemove: Script que se ejecuta cuando el puntero del ratón se mueve.
• onmouseout: Script que se ejecutará cuando el puntero del ratón se mueve fuera de un enlace.
• onmouseover: Script que se ejecutará cuando el puntero del ratón se mueve sobre un enlace.
• onmouseup: Script que se ejecutará cuando el botón del ratón es liberado.
• onkeydown: Script que se ejecuta cuando se pulsa una tecla.
• onkeypress: Script que se ejecuta cuando se pulsa una tecla y se suelta.
• onkeyup: Script que se ejecuta cuando se suelta una tecla.

Espero no os haya resultado muy pesado este punto, la verdad que la mayoría de las veces los únicos atributos que utilizaremos serán: href, title, class, id, rel, y algún que otro atributo de eventos.