Tag HTML a
Nota: Si no sabes lo que es un tag y/o cómo se debe utilizar, te recomendamos que leas nuestro tutorial "tags y atributos HTML" que puedes encontrar en nuestra sección de tutoriales HTML.
El tag
HTML a define un "ancla" (anchor) y puede ser utilizado para establecer un vínculo a otro documento, como un marcador de página, o como ambos.
Cuando es usado como marcador de página debes definir un id o nombre (usa "id" para
XHTML estricto o ambos "id" y "name" con el mismo valor para lograr compatibilidad) de manera que puedas apuntar al mismo desde otras instancias. El id debe ser único y seguir las reglas descriptas para el atributo "name". Si no se define el atributo "href", el aspecto visual del texto no se altera.
Ejemplo:
Cuando el tag HTML a es usado para establecer un vínculo a otra página el atributo "href" es definido y describe la ubicación del recurso referido. Estos vínculos son usualmente mostrados de una manera especial por los navegadores usando decoraciones de texto, como color y/o subrayados.
Ejemplo:
Y finalmente, el tag HTML a puede ser usado para ambos propósitos. Mientras refiere a otro documento, este ancla insertará un marcador en esta página.
|
Código
|
Visualización
|
|
<a id="vinculodoctype" href="doctype.html">El tag HTML !DOCTYPE</a>
|
El tag HTML !DOCTYPE
|
El atributo "id" asigna un identificador al elemento asociado. Este identificador debe ser único en el documento y puede ser usado para referirse a ese elemento.
Ejemplo:
Comienzo del código
<p id="parrafo1">Este es el primer párrafo nombrado parrafo1. Para cambiar dinámicamente las propiedades del mismo usa este identificador.</p>
Fin del código
El atributo "class" asigna un nombre de clase (o una lista de nombres de clase separados por espacios) al elemento contenedor. Es usado con hojas de estilos e indica al navegador la clase a la cual el elemento está asociado. Una clase provee atributos visuales para los elementos.
Ejemplo:
Comienzo del código
<p class="referencias">Este artículo está basado en el libro "Viento en los árboles" por Jhon L. Brooks</p>
<p class="referencias importante">Este artículo está basado en el libro "Viento en los árboles" por Jhon L. Brooks... y es más importante que el anterior.</p>
Fin del código
Define un estilo visual para el elemento. Es una mejor práctica definir atributos en hojas de estilos externas agrupándolos en clases. Los atributos en el parámetro "style" deben preservar este orden "nombre : valor" y ser separados por un punto y coma.
Si estás escribiendo
código XHTML te recomendamos no utilizar este atributo y probar con las clases de hojas de estilo (con el atributo "class").
Ejemplo:
Comienzo del código
<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>
Fin del código
Indica un título para el elemento. Usado para dar una descripción acerca del elemento que es usualmente mostrado como un "tool tip" cuando el usuario pone el puntero del mouse sobre el elemento.
Ejemplo:
|
Código
|
Visualización
|
|
<a title="HTMLQuick.com" href="http://www.htmlquick.com">Código HTML</a>
|
Código HTML
|
Especifica el set de caracteres de la
URL de destino. Ver la definición del tipo y la referencia sobre
codificación de caracteres (character encoding) para más información.
Ejemplo:
Comienzo del código
<a charset="utf-8" href="http://www.htmlquick.com/es">Código
HTML</a>
Fin del código
href (uri)
Especifica el recurso de destino para el elemento. Comúnmente usado para referirse a páginas en el mismo dominio o a páginas externas.
Ejemplo:
|
Código
|
Visualización
|
Vínculo a una página en este sitio: <a href="http://www.htmlquick.com/es/tutorials/links.html">Vínculos en HTML</a><br />
Vínculo a un sitio externo: <a href="http://www.w3.org">World Wide Web Consortium</a>
|
Vínculo a una página en este sitio: Vínculos en HTML
Vínculo a un sitio externo: World Wide Web Consortium
|
Define el lenguaje del recurso de destino. Este atributo solo puede ser utilizado cuando el atributo "href" está presente.
Ejemplo:
Comienzo del código
<a hreflang="en" href="english-version.html">English version</a>
Fin del código
Indica al navegador el tipo de contenido del recurso nombrado en el atributo "href".
Ejemplo:
Comienzo del código
<a href="logo.gif" type="image/gif">Mira nuestro logo</a><br />
<a href="articulo.html" type="text/html">Lee el artículo</a>
Fin del código
Describe la relación que existe entre el documento actual y el recurso de destino. En otras palabras, define qué significado tiene el documento referido para el documento actual.
Ejemplo:
Comienzo del código
<a rel="prev" href="articulo1.html">Leer artículo previo</a>
<a rel="next" href="articulo3.html">Leer siguiente artículo siguiente</a>
<a rel="copyright" href="derechos.html">Derechos de copia del artículo</a>
<a rel="alternate" href="english-version.html" hreflang="en">English version</a>
Fin del código
Establece una relació entre el recurso apuntado por el atributo "href" y el documento actual. En otras palabras, establece que representa el documento actual para el recurso referido.
Ejemplo:
Comienzo del código
Lista de artículos:
<a rev="index" href="articulo1.html">Artículo 1</a>
<a rev="index" href="articulo2.html">Artículo 2</a>
...
Fin del código
shape
Especifica la forma de la figura usada para definir un área. Los valores no son sensibles a mayúsculas/minúsculas y pueden ser uno de estos:
- default: Especifica toda la región.
- rect: Define una región rectangular.
- circle: Define una región circular.
- poly: Define una región poligonal.
coords
Define las coordenadas y posición de una forma. Es utilizada junto con el atributo "shape" y las coordinadas dependen del valor de este último:
- rect: izquierda-x, arriba-y, derecha-x, abajo-y.
- circle: centro-x, centro-y, radio. Si el radio es medido en porcentajes, se calcula como el porcentaje del lado más pequeño del objeto asociado.
- poly: x1, y1, x2, y2, ..., xN, yN. Esto define un polígono cerrado. Si defines un polígono abierto, el navegador debería cerrarlo y agregar un segmento desde el primero punto hasta el último.
Las coordinadas son relativas a la esquina superior izquierda del objeto asociado. Cada coordenada es del
tipo length yestán separadas por comas.
Especifica el nombre del marco donde el documento de destino debería ser cargado. Ver la referencia del
tipo frame-target para más información.
Comienzo del código
Abre en 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 set de marcos actual): <a href="http://www.w3c.org" target="contenido">WWW Consortium</a>
Fin del código
Especifica la posición del elemento en el orden de tabulación. El orden de tabulación define una secuencia con todos los elementos que pueden recibir el enfoque. Los usuarios pueden navegar dicha secuencia mediante el teclado (usualmente con la tecla "tab").
Establece una relación entre este elemento y una tecla de carácter, permitiendo al usuario activarlo mediante esa tecla (usualmente cuando es utilizada junto con la tecla "alt"). El resultado de la activación depende de la naturaleza del elemento actual. Para vínculos, esta acción automáticamente sigue el vínculo, y para otros elementos simplemente recibe el enfoque.
Define un nombre único para el elemento de modo que pueda ser localizado posteriormente. Es usado para insertar marcadores de página en un documento. Se recomienda usar el atributo "id" en su lugar debido a su compatibilidad con el
código XHTML.
- onfocus
- onblur
- onclick
- ondblclick
- onmousedown
- onmouseup
- onmouseover
- onmousemove
- onmouseout
- onkeypress
- onkeydown
- onkeyup
Lista completa e información acerca de
eventos en HTML
En la descripción, un tag a ha sido definido como marcador de página con el id "bookmark":
|
Código
|
Visualización
|
|
Para ir a ese marcador en el primer ejemplo de este tag, haz click aquí: <a href="#bookmark">Ejemplo del tag HTML a</a>
|
Para ir a ese marcador en el primer ejemplo de este tag, haz click aquí: Ejemplo del tag HTML a
|
