Go to main content
Bypass navigation bar Referencia HTML Tags HTML Tutoriales HTML
Bypass language selection
Bypass location bar

Location: Inicio > Referencia HTML > Tags HTML > Tag HTML a

Bypass main content

Tag HTML a

 Nota: Si no sabes lo que es un elemento/tag o cómo debes utilizarlo, te recomiendo que leas el tutorial "Tags y atributos en HTML", que puedes encontrar en la sección de tutoriales HTML.

Bypass main content

Descripción

El elemento HTML a define un ancla y puede ser usado para establecer un vínculo a otro documento, como un marcador, o como ambos.

Cuando se usa para establecer un marcador, debes definirlo con el atributo "id" ó "name", de modo que sea posible "llamarlo" en otras instancias. el atributo "id" debe ser único y seguir las reglas descriptas en el atributo "name".

Nota que en XHTML 1.0, el atributo "name" de este elemento ha sido desaprobado en favor del atributo "id". En XHTML 1.1 el mismo ha sido completamente eliminado. Su uso es únicamente recomendado para XHTML 1.0 con el propósito de mejorar la compatibilidad con navegadores antiguos.

Código
<a id="marcador1">Este texto es parte de un marcador llamado "marcador1". Nos referiremos a él en otros ejemplos.</a>
Vista

Cuando el tag HTML a es usado para vincular a otra página, el atributo "href" es definido y describe la ubicación del recurso referido. Los vínculos son usalmente mostrados de manera especial por los navegadores, que suelen usar diferentes colores y subrayado.

Código
<a href="http://www.gdata.es/">Descargar antivirus gratis</a><br />
<a href="img.html">El tag HTML img</a>
Vista

Y finalmente, el elemento HTML a puede ser usado para ambos propósitos. Mientras se refiere a otro documento, este ancla establecerá un marcador en esta página.

Código
<a id="doctypelink" href="http://www.htmlquick.com/es/reference/tags/doctype.html">El tag HTML !DOCTYPE</a>
Vista

Ejemplos

En el primer ejemplo de la descripción se ha definido un marcador llamado "marcador1". en el siguiente ejemplo haremos un vínculo al mismo:

Código
Para ir al marcador en el primer ejemplo, sigue este vínculo: <a href="#marcador1">Ejemplo del tag HTML a</a>
Vista
Para ir al marcador en el primer ejemplo, sigue este vínculo: Ejemplo del tag HTML a

Atributos

id (name)

El atributo "id" asigna un identificador al elemento asociado. Este identificador debe ser único en todo el documento y puede ser usado para referirse a este elemento en otras instancias (por ejemplo, desde un script del lado cliente).

<p id="parrafo1">Este es el primer párrafo, llamado "parrafo1". Para cambiar dinámicamente sus prpiedades usa este identificador.</p>

class (cdata)

El atributo "class" asigna un nombre de clase (o una lista de nombres de clases separadas por espacios) al elemento contenedor. Es usado junto con hojas de estilos y le dice al navegador la clase (o clases) a las que el elemento está asociado.

Una clase da atributos presentacionales a los elementos (lee más en el tutorial "Hojas de estilo en cascada").

<p class="referencias">Este artículo está basado en el libro "Viento en los árboles" de Jhon L. Brooks</p>
<p class="referencias importante">Este artículo está basado en el libro "Viento en los árboles" de Jhon L. Brooks... y es más importante que el anterior.</p>

style (style)

Este atributo es utilizado para definir atributos presentacionales para el elemento contenedor, y su valor debería estar compuesto por propiedades de hojas de estilo. Aunque en algunos casos es particularmente útil, es una mejor práctica poner los atributos presentacionales en archivos externos, relacionándolos a los elementos a través del atributo "class". De este modos, se mejora la separación de las partes semántica y presentacional de tu documento.

Puedes encontrar más información acerca de los atributos presentacionales en el tutorial "Hojas de estilo en cascada".

<p style="color: #0000FF; font-size: 12pt">Este es un párrafo con un estilo definido.</p>
<p>Y este es otro texto sin estilo.</p>

title (text)

El propósito de este atributo es proveer un título para el elemento. Su valor debe ser una descripción corta y precisa del contenido del elemento. Habitualmente, los navegadores muestran el contenido de este atributo en un recuadro al posar el mouse encima del contenido del elemento por un pequeño período de tiempo.

Código
<a title="HTMLQuick.com" href="http://www.htmlquick.com/es/">Código HTML</a>
Vista

lang (langcode)

Especifica el lenguaje del contenido de un elemento. El valor por defecto es "desconocido".

Al escribir documentos XHTML 1.0, el atributo usado para especificar el lenguaje de un elemento es "xml:lang". Para compatibilidad con los dos tipos de estándar ambos atributos pueden ser usados simultáneamente como en el ejemplo a continuación. Nota que en XHTML 1.1, el atributo "lang" ha sido completamente reemplazado por "xml:lang" y su uso ya no es válido.

<p lang="en" xml:lang="en">This is a paragraph in English.</p>
<p lang="es" xml:lang="es">Este es un párrafo en español.</p>

dir

Este atributo indica la dirección en que el texto del elemento debe ser leído. Esto incluye al contenido, los valores de los atributos y las tablas. Tiene dos valores posibles que son insensibles a mayúsculas/minúsculas:

  • RTL: derecha a izquierda.
  • LTR: izquierda a derecha.
<q lang="he" dir="rtl">...una cita en Hebreo...</q>

charset (charset)

Especifica la codificación de caracteres del documento destino. Para mayor información acerca del llenado de este stributo, visita la referencia de codificación de caracteres.

<a charset="utf-8" href="http://www.htmlquick.com">Código HTML</a>

href (uri)

El atributo "href" especifica el recurso destino al cual está vinculado el elemento. Puede especificar un recurso en el mismo sitio o en otro.

Vínculo a página en este sitio: <a href="http://www.htmlquick.com/es/tutorials/links.html">Vínculos en HTML</a>
Vínculo a página externa: <a href="http://www.w3.org">World Wide Web Consortium</a>

hreflang (langcode)

Declara el lenguaje en que el documento destino está escrito. Este atributo solo puede utilizarse quedo el atributo "href" está presente en el documento.

<a hreflang="en" href="english-version.html">Versión en inglés</a>

type (content-type)

Este atributo provee información acerca del tipo de contenido del recurso destino, informando si el mismo es un documento HTML, una imagen JPG, un documento de Excel, etc. Su valor debe ser uno de los tipos MIME.

<a href="logo.gif" type="image/gif">Mira nuestro logo</a><br />
<a href="articulo.html" type="text/html">Lee el artículo</a>

rel (link-types)

Describe la relación que guarda el documento actual con el recurso destino. En otras palabras (y más específicamente), indica el significado que tiene el recurso destino para el documento actual.

<a rel="prev" href="articulo1.html">Lee el artículo anterior</a>
<a rel="next" href="articulo3.html">Lee el próximo artículo</a>
<a rel="copyright" href="copyright.html">Derechos de copia de este artículo</a>
<a rel="alternate" href="english-version.html" hreflang="en">Versión en inglés</a>

rev (link-types)

Establece la relación que guarda el recurso destino con el documento actual. En otras palabras (y más específicamente), indica el significado que tiene el documento actual para el recurso destino.

Lista de artículos:
<a rev="index" href="articulo1.html">Artículo 1</a>
<a rev="index" href="articulo2.html">Artículo 2</a>

shape

Especifica la forma de la figura esada para definir un área en un mapa de imagen. Los valores posibles son insensibles a mayúsculas/minúsculas y deben corresponderse con los siguientes:

  • default: selecciona la región entera.
  • rect: define una región rectangular.
  • circle: define una región circular.
  • poly: define una región poligonal.

coords

Especifica las coordenadas y la posición de la figura definida en el atributo "shape". Las coordenadas dependen de la figura utilizada:

  • rect: izquierdo-x, superior-y, derecho-x, inferior-y (por ejemplo, "0, 0, 10, 10" define un cuadrado con diez píxeles de lado que toca los border superior e izquierdo de la imagen).
  • circle: centro-x, centro-y, radio (por ejemplo, "20, 20, 20" define un círculo con un radio de 20 píxeles que toca los bordes superior e izquierdo de la imagen). si el radio es medido en porcentaje, éste se calcula como un porcentaje del menor de los lados del objeto asociado (imagen).
  • poly: x1, y1, x2, y2, ..., xN, yN (Por ejemplo, "0, 20, 20, 20, 10, 0, 0, 20" define un triángulo con base y altura de 20 píxeles que toca los bordes superior e izquierdo de la imagen). Esto define un polígono cerrado. si defines un polígino abierto, el navegador debería cerrarlo, agregando un segmento desde el primer punto al último.

Las coordenadas son relativas a la esquina superior izquierda del objeto asociado. Las coordenadas son de tipo length y se separan por comas.

<map name="boton-rojo" id="boton-rojo">
<area href="documento.html" shape="circle" coords="25, 25, 20" alt="Accede al documento presionando este botón!" />
</map>
<img src="botonrojo.png" usemap="#boton-rojo" width="50" height="50" alt="Botón rojo">

target (frame-target)

Especifica el nombre del marco donde el documento destino debería cargarse. Refiérete a la definición del tipo frame-target para mayor información.

Abre en una nueva ventana: <a href="http://www.w3c.org" target="_blank">WWW Consortium</a>
Abre en un marco llamado "contenido" (El marco debe estar presente en el conjunto de marcos actual): <a href="http://www.w3c.org" target="contenido">WWW Consortium</a>

tabindex (number)

Especifica la posición de este elemento en el orden de tabulación. El orden de tabulación define una secuencua con todos los elementos que pueden recibir el enfoque. Los usuarios pueden navegar esta secuencia mediante el teclado (usualmente con la tecla "tab").

<a href="doc1.html" tabindex="1">Primer documento en la lista</a>
<a href="doc2.html" tabindex="2">Segundo documento en la lista</a>
<a href="doc3.html" tabindex="3">Tercer documento en la lista</a>

accesskey (character)

Relaciona al elemento con una tecla. La mayoría de los navegadores permite acceder al elemento presionando dicha tecla mientras se mantiene presionada la tecla "alt". El resultado de la activacióndepende de la naturaleza del elemento. Para vínculos, esta acción automáticamente sigue el vínculo, mientras que otros elementos simplemente reciben el enfoque.

<a href="http://www.htmlquick.com/es/" accesskey="I">Inicio</a>

name (name)

Asigna un nombre al elemento para referencia futura.

En XHTML 1.0 el atributo "name" de este elemento ha sido desaprobado en favor del atributo "id", y en XHTML 1.1 es simplemente inválido. Sin embargo, los marcadores que no utilizan el atributo "name" pueden ser incompatibles con navegadores antiguos, de modo que, a menos que se utilice el estándar XHTML 1.1, la mejor práctica es usar ambor atributos con el mismo valor.

<a name="primer-marcador" id="primer-marcador">Aquí pondremos el primer marcador de la página</a>

Eventos

  • onfocus
  • onblur
  • onclick
  • ondblclick
  • onmousedown
  • onmouseup
  • onmouseover
  • onmousemove
  • onmouseout
  • onkeypress
  • onkeydown
  • onkeyup

Ve a la lista completa de eventos en HTML.

Diseño y desarrollo: Latitud29.com

Vínculos y logos|Contacto|Más allá de HTML|Herramientas y recursos|Mapa del sitio|Webmaster|Dona