Este elemento representa una relación entre dos
recursos. Definido por las etiquetas <a> </a. Esta etiqueta es lo que
permite que un documento HTML se enlace consigo mismo o con otro pero también
podemos enlazar otros recursos como imágenes, documentos o archivos.
La especificación de HTML5 ahora permite que el
elemento a encierre bloques enteros de contenido (con elementos como p, section
y article, anteriormente considerados "de nivel de bloque"), siempre
que no presenten ningún elemento interactivo como botones u otros vínculos.
·
Enlace externo
Los enlaces externos son hiper vínculos que apuntan
desde nuestra página web a cualquier dominio distinto al nuestro
·
Enlaces internos
Donde el archivo de enlace está dentro del mismo sitio
o dominio
Por ejemplo, si has creado dos páginas (llamémoslas
pagina1.htm y pagina2.htm) y las has guardado en la misma carpeta, puedes
enlazar una página con la otra con sólo escribir el nombre del fichero en el
enlace.
<a href="pagina2.htm">Haz clic para ir
a la página 2</a>
Si la página 2 estuviera en una subcarpeta (llamada
"subcarpeta"), el enlace tendría el siguiente aspecto:
<a href="subcarpeta/pagina2.htm">Haz
clic para ir a la página 2</a>
Pero
<a href="../pagina1.htm">Enlace a la
pagina1</a>
Los dos puntos con la barra, "../", hacen
referencia a una carpeta que se encuentra un nivel por encima de donde se
encuentra el fichero desde el que se crea el enlace. Siguiendo este mismo
sistema, se puede señalar a dos (o más) carpetas en niveles superiores escribiendo
"../../".
Si en lugar de querer enviar a las visitas a una parte
concreta de esa misma página, quieres enviarlas a una parte concreta de otra
página de tu web, has de definir ese ancla en la página y lugar que quieres
elegir de destino, como en este ejemplo, pero en el enlace has de colocar
además del ancla, la ruta de esa otra página, tal y como aparece aquí abajo:
<a
href="pagina-de-destino.html#nombre-del-ancla">Enlace hacia el
ancla</a>
·
Enlace al mismo documento
Consiste en hacer clic en algún texto o imagen, y
desplazarse a otra parte dentro de la misma página.
Este sistema es muy útil para crear un índice entre
documentos largos
Para hacer este tipo de enlaces hay que hacer dos
operaciones:
·
Establecer
marcadores a lo largo de la página (son los lugares a los que queremos saltar
con los enlaces).
·
Poner
enlaces que salten a los marcadores.
El código de los marcadores es el siguiente:
<A
name="nombre_del_marcador"></A> o <A id="nombre_del_marcador"></A>
Los marcadores reconocen mayúsculas y minúsculas.
<A NAME="Principio"></A> y <A
NAME="principio"></A> no es el mismo enlace.
El código de los enlaces que salten a los marcadores:
Volver <A href=#principio"></A>
En HTML5 el uso del atributo name en el elemento de
hiper vinculo esta desatualizado y aconseja el uso del atributo id.
Como consejo: El uso de marcadores es muy recomendable
y a veces imprescindible para organizar el contenido dentro de una página, además
son una parte esencial de tu proceso de posicionamiento web en buscadores. Pero
es muy importante mantener la longitud de las páginas en un tamaño razonable, procura
que tus páginas no excedan de los 30 kb.
Atributos
Atributo
|
Valor
|
Descripción
|
charset
|
char_encoding
|
Especifica el
conjunto de caracteres de un documento vinculado
|
href
|
URL
|
Especifica la dirección
de la página a la cual relaciona el enlace
|
name
|
“nombre”
|
Especifica el
nombre del ancla. Según especificaciones de HTML5 este atributo deberá ser sustituido por el atributo id
|
target
|
_blank
_parent
_self
_top
framename
|
Especifica la
ventana del navegador en la cual debe abrir el enlace. Ver vídeo…
|
rel
|
alternate
author
bookmark
external
help
license
next
noreferrer
noopener
prev
search
tag
|
Estos atributos sirven para enriquecer
semánticamente a los enlaces. Sus objetivos son funcional mente inversos.
El atributo rel, sirve para
definir el tipo de relación que tiene el documento contenedor con el enlace
que lo contenga
Ejemplo
|
type
|
media_type
|
El atributo type especifica el tipo de medio de Internet (anteriormente conocido como tipo MIME) del documento vinculado.
|
download
(nuevo en HTML5) |
nombre del archivo
(No soportado en |
El atributo descarga especifica que el objetivo se descarga cuando un usuario hace clic en el hipervínculo.
|
hreflang
|
language_code
|
El atributo hreflang especifica el idioma del documento vinculado.
|
