Nota: Este documento es parte de una traducción al castellano de la Recomendación del W3C "HTML 4.01 Specification" (más información). Puede consultar la versión original del mismo. Para cualquier comentario o corrección acerca de la traducción póngase en contacto con el traductor en jrpozo@conclase.net. Gracias por su colaboración.
Véase el Aviso de copyright de la traducción.
Contenidos
HTML ofrece muchas de las posibilidades de publicación convencionales para la creación de textos enriquecidos y documentos estructurados, pero lo que lo separa de la mayoría de los otros lenguajes para el formato de documentos son sus características para hipertexto y para documentos interactivos. Esta sección presenta el vínculo (o enlace, o hipervínculo), la estructura básica del hipertexto. Un vínculo es una conexión desde un recurso web a otro. Aunque es un concepto simple, el vínculo ha sido una de las principales fuerzas que ha hecho posible el éxito de la Web.
Un vínculo tiene dos extremos (llamados en inglés anchors, anclas), y una dirección. El vínculo comienza en el "ancla de origen" (origen del vínculo) y apunta al "ancla destino" (destino del vínculo), que puede ser cualquier recurso de la Web (p.ej., una imagen, un videoclip, un archivo de sonido, un programa, un documento HTML, un elemento dentro de un documento HTML, etc.).
El comportamiento por defecto asociado a un vínculo es la obtención de otro recurso de la Web. Normalmente este comportamiento se logra implícitamente seleccionando el vínculo (p.ej., haciendo clic con el ratón, a través del teclado, etc.).
El siguiente extracto HTML contiene dos vínculos, uno cuyo destino es un documento HTML llamado "capitulo2.html" y otro cuyo destino es la imagen GIF del fichero "bosque.gif":
<BODY> ...texto... <P>Encontrarás mucho más en el <A href="capitulo2.html">capítulo dos</A>. Mira también este <A href="../imagenes/bosque.gif">mapa del bosque encantado.</A> </BODY>
Al activar estos vínculos (haciendo clic con el ratón, a través del teclado, por comandos de voz, etc.), los usuarios pueden visitar estos recursos. Obsérvese que el atributo href de cada origen de vínculo especifica la dirección del destino por medio de un URI.
El destino de un vínculo puede ser un elemento contenido en un documento HTML. Se le debe asignar un nombre al destino, y cualquier URI que se refiera a este destino debe incluir el nombre como identificador de fragmento.
Los destinos de vínculo en los documentos HTML pueden especificarse o bien mediante el elemento A (dándoles un nombre con el atributo name), o mediante cualquier otro elemento (dándole un nombre con el atributo id).
Así, por ejemplo, un autor podría crear una tabla de contenidos cuyas entradas estuvieran vinculadas con los elementos de encabezado H2, H3, etc., del mismo documento. Si usáramos el elemento A para crear los destinos de los vínculos, escribiríamos:
<H1>Tabla de Contenidos</H1> <P><A href="#seccion1">Introducción</A><BR> <A href="#seccion2">Antecedentes</A><BR> <A href="#seccion2.1">Experiencias personales</A><BR> ...el resto de la tabla de contenidos... ...el cuerpo del documento... <H2><A name="seccion1">Introducción</A></H2> ...sección 1... <H2><A name="seccion2">Antecedentes</A></H2> ...sección 2... <H3><A name="seccion2.1">Experiencias personales</A></H3> ...sección 2.1...
Podemos lograr el mismo efecto haciendo que los elementos de encabezado sean ellos mismos los destinos de los vínculos:
<H1>Tabla de Contenidos</H1> <P><A href="#seccion1">Introducción</A><BR> <A href="#seccion2">Antecedentes</A><BR> <A href="#seccion2.1">Experiencias personales</A><BR> ...el resto de la tabla de contenidos... ...el cuerpo del documento... <H2 id="seccion1">Introducción</H2> ...sección 1... <H2 id="seccion2">Antecedentes</H2> ...sección 2... <H3 id="seccion2.1">Experiencias personales</H3> ...sección 2.1...
La utilización más común de un vínculo es con mucho la obtención de otro recurso de la Web, tal y como se ilustra en los ejemplos precedentes. Sin embargo, los autores pueden insertar en sus documentos vínculos que expresen otras relaciones entre recursos distintas a "activar este vínculo para visitar ese recurso relacionado". Para los vínculos que expresan otros tipos de relaciones, se especifican uno o más tipos de vínculo en el origen del vínculo.
Los papeles de un vínculo definido por A o LINK se especifican mediante los atributos rel y rev.
Por ejemplo, los vínculos definidos por el elemento LINK pueden describir la posición de un documento dentro de una serie de documentos. En el extracto que sigue, los vínculos contenidos en el documento llamado "Capítulo 5" apuntan a los capítulos anterior y siguiente:
<HEAD> ...otras informaciones de cabecera... <TITLE>Capítulo 5</TITLE> <LINK rel="prev" href="capitulo4.html"> <LINK rel="next" href="capitulo6.html"> </HEAD>
El tipo de vínculo del primer vínculo es "prev" ("anterior"), y el del segundo es "next" ("siguiente"), dos de los diferentes tipos de vínculos reconocidos. Los vínculos especificados con LINK no son representados con los contenidos del documento, aunque los agentes de usuario pueden representarlos de otras maneras (p.ej., como herramientas de navegación).
Incluso aunque no se usen para navegar, estos vínculos pueden ser interpretados de formas interesantes. Por ejemplo, un agente de usuario que imprima una serie de documentos HTML como un documento único, puede usar la información de estos vínculos como la base para formar un documento lineal coherente. Más adelante se da más información sobre la utilización de vínculos para el beneficio de los motores de búsqueda.
Aunque algunos elementos y atributos de HTML crean vínculos a otros recursos (p.ej., el elemento IMG, el elemento FORM, etc.), este capítulo se refiere a los vínculos creados con los elementos LINK y A. El elemento LINK sólo puede aparecer en la cabecera del documento. El elemento A sólo puede aparecer en el cuerpo.
Si el atributo href del elemento A tiene algún valor, el elemento define un origen de vínculo que puede ser activado por el usuario para obtener un recurso de la Web. El origen del vínculo está en el lugar donde aparece el elemento A y el destino del vínculo es el recurso web.
El agente de usuario puede manipular el recurso obtenido de diferentes maneras: abriendo un nuevo documento HTML en la misma ventana del agente de usuario, abriendo un nuevo documento HTML en una ventana diferente, iniciando un nuevo programa que maneje el recurso, etc. Como el elemento A tiene contenido (texto, imágenes, etc.), los agentes de usuario pueden representar este contenido de modo tal que se indique la presencia de un vínculo (p.ej., subrayando el contenido).
Si el atributo name o el atributo id del elemento A toman algún valor, el elemento define un posible destino de otros vínculos.
Los autores pueden establecer los atributos name y href de un mismo elemento A simultáneamente.
El elemento LINK define una relación entre el documento actual y otro recurso. Aunque LINK no tiene contenido, la relación que define puede ser representada por algunos agentes de usuario.
Se puede especificar el atributo title tanto para A como para LINK para añadir información sobre la naturaleza de un vínculo. Esta información puede ser pronunciada por un agente de usuario, representada como una indicación visual ("tool-tip"), producir un cambio en la imagen del cursor, etc.
Así, podemos desarrollar uno de los ejemplos anteriores proporcionando un título para cada vínculo:
<BODY>
...texto...
<P>Encontrarás mucho más en el <A href="capitulo2.html"
title="Ir al capítulo 2">capítulo dos</A>.
<A href="./capitulo2.html"
title="Obtener capítulo dos.">capítulo dos</A>.
Mira también este <A href="../imagenes/bosque.gif"
title="imagen GIF del bosque encantado">mapa del
bosque encantado.</A>
</BODY>
Debido a que los vínculos pueden apuntar a documentos codificados con diferentes codificaciones de caracteres, los elementos A y LINK soportan el atributo charset. Este atributo permite a los autores avisar a los agentes de usuario sobre la codificación de los datos del otro extremo del vínculo.
El atributo hreflang proporciona a los agentes de usuario información sobre el idioma del recurso del otro extremo del vínculo, igual que el atributo lang proporciona información sobre el idioma del contenido o de los valores de los atributos de un elemento.
Los agentes de usuario, provistos de esta información adicional, deberían ser capaces de evitar la presentación de "basura" al usuario. En su lugar, pueden o bien localizar los recursos necesarios para la presentación correcta del documento o, si no pueden localizar los recursos, deberían al menos advertir al usuario de que el documento será ilegible, explicando las causas.
<!ELEMENT A - - (%inline;)* -(A) -- ancla --> <!ATTLIST A %attrs; -- %coreattrs, %i18n, %events -- charset %Charset; #IMPLIED -- codificación de caracteres del recurso vinculado -- type %ContentType; #IMPLIED -- tipo de contenido consultivo -- name CDATA #IMPLIED -- destino de vínculo con nombre -- href %URI; #IMPLIED -- URI del recurso vinculado -- hreflang %LanguageCode; #IMPLIED -- código de idioma -- rel %LinkTypes; #IMPLIED -- tipos de vínculos directos -- rev %LinkTypes; #IMPLIED -- tipos de vínculos inversos -- accesskey %Character; #IMPLIED -- carácter de la tecla de accesibilidad -- shape %Shape; rect -- para mapas de imágenes en el cliente -- coords %Coords; #IMPLIED -- para mapas de imágenes en el cliente -- tabindex NUMBER #IMPLIED -- posición en el orden de tabulación -- onfocus %Script; #IMPLIED -- el foco se dirigió hacia el elemento -- onblur %Script; #IMPLIED -- el elemento perdió el foco -- >
Etiqueta inicial: obligatoria, Etiqueta final: obligatoria
Definiciones de atributos
Atributos definidos en otros lugares
Cada elemento A define un origen o destino de vínculo.
Los autores también pueden crear un elemento A que no sea origen ni destino de vínculo, es decir, que no especifica ni href, ni name, ni id. Los valores de estos atributos pueden ser establecidos posteriormente a través de scripts.
En el ejemplo que sigue, el elemento A define un vínculo. El origen del vínculo es el texto "Sitio web del W3C" y el destino del vínculo es "http://www.w3.org/":
Para más información sobre el W3C, consulte el <A href="http://www.w3.org/">sitio web del W3C</A>.
Este vínculo designa la página principal del World Wide Web Consortium. Cuando un usuario active este vínculo en un agente de usuario, el agente de usuario obtendrá el recurso, en este caso un documento HTML.
Los agentes de usuario suelen representar los vínculos de modo tal que éstos son obvios para los usuarios (subrayándolos, invirtiendo los colores, etc.). La representación exacta depende del agente de usuario. La representación puede variar según que el usuario haya visitado ya el vínculo o no. Una posible representación visual del vínculo anterior podría ser ésta:
Para más información sobre el W3C, consulte el sitio web del W3C.
~~~~~~~~~~~~~~~~~
Para decir explícitamente a los agentes de usuario cuál es la codificación de caracteres de la página destino, se establece el atributo charset:
Para más información sobre el W3C, consulte el <A href="http://www.w3.org/" charset="ISO-8859-1">sitio web del W3C</A>
Supongamos que definimos un destino de vínculo llamado "destino-uno" en el fichero "uno.html".
...texto antes del destino de vínculo... <A name="destino-uno">Esta es la localización del destino de vínculo número uno.</A> ...texto después del destino de vínculo...
Esto crea un destino de vínculo alrededor del texto "Esta es la localización del destino de vínculo número uno.". Normalmente, los contenidos de A no se representan de manera especial cuando A sólo define un destino de vínculo.
Una vez definido el destino, podemos crear un vínculo a él desde el mismo documento o desde otro diferente. Los URIs referidos a elementos A que son destinos de vínculo, contienen un carácter "#" seguido del nombre del elemento (el identificador de fragmento). Aquí tenemos varios ejemplos:
Así, un vínculo definido en el fichero "dos.html" contenido en el mismo directorio que "uno.html" se referiría a este destino del modo siguiente:
...texto antes del vínculo... Para más información, consulte el <A href="./uno.html#destino-uno">destino uno</A>. ...texto después del vínculo...
El elemento A del siguiente ejemplo especifica un vínculo (con href) y crea un destino de vínculo (con name) simultáneamente:
¡Acabo de volver de mis vacaciones! Aquí os pongo <A name="destino-dos" href="http://www.algunaempresa.com/Gente/Juan/vacaciones/familia.png"> una foto de mi familia junto al lago.</A>
Este ejemplo contiene un vínculo a un tipo diferente de recurso web (una imagen PNG). Al activar el vínculo la imagen debería ser obtenida de la Web (y posiblemente mostrada si el sistema ha sido configurado para ello).
Nota. Los agentes de usuario deberían ser capaces de encontrar destinos de vínculo creados con elementos A vacíos, pero algunos de ellos no pueden. Por ejemplo, algunos agentes de usuario pueden no encontrar el "destino-vacio" del siguiente fragmento HTML:
<A name="destino-vacio"></A> <EM>...código HTML...</EM> <A href="#destino-vacio">Vínculo a destino vacío</A>
Un nombre de vínculo es el valor del atributo name o del atributo id cuando éste se use en el contexto de vínculos. Los nombres de vínculos deben seguir las siguientes reglas:
Así, el ejemplo siguiente es correcto con respecto al emparejamiento de cadenas y los agentes de usuario deben considerarlo como tal:
<P><A href="#xxx">...</A> ...más texto... <P><A name="xxx">...</A>
EJEMPLO ILEGAL:
El siguiente ejemplo es ilegal con respecto a la unicidad, ya que los dos
nombres son iguales y sólo se diferencian por las mayúsculas:
<P><A name="xxx">...</A> <P><A name="XXX">...</A>
Aunque el siguiente extracto es HTML legal, el comportamiento del agente de usuario es indefinido; algunos agentes de usuario pueden considerar (incorrectamente) que hay un emparejamiento, y otros no.
<P><A href="#xxx">...</A> ...más texto... <P><A name="XXX">...</A>
Los nombres de los vínculos deberían restringirse a los caracteres ASCII. Consulte el apéndice para más información sobre caracteres no ASCII en valores de atributos URI.
Los vínculos definidos mediante elementos A no deben ser anidados; un elemento A no debe contener ningún otro elemento A.
Como el DTD define que el elemento LINK es vacío, los elementos LINK tampoco pueden estar anidados.
El atributo id puede utilizarse para crear un destino de vínculo en la etiqueta inicial de cualquier elemento (incluyendo al elemento A).
Este ejemplo ilustra la utilización del atributo id para poner un destino de vínculo en un elemento H2. El destino es vinculado por medio del elemento A.
Puedes leer más sobre esto en la <A href="#seccion2">Sección Dos</A>. ...más abajo en el mismo documento <H2 id="seccion2">Sección Dos</H2> ...más abajo en el mismo documento <P>Consulte la <A href="#seccion2">Sección Dos</A> más arriba para más detalles.
El siguiente ejemplo le da un nombre a un destino de vínculo con el atributo id:
¡Acabo de volver de mis vacaciones! Aquí os pongo una <A id="destino-dos">foto de mi familia junto al lago.</A>
Los atributos id y name comparten el mismo espacio de nombres. Esto significa que no pueden definir cada uno un destino de vínculo con un mismo nombre en el mismo documento. Está permitido usar ambos atributos para especificar un identificador único para un mismo elemento en los siguientes elementos: A, APPLET, FORM, FRAME, IFRAME, IMG y MAP. Cuando se usen ambos atributos en un mismo elemento, sus valores deben ser idénticos.
EJEMPLO ILEGAL:
El siguiente extracto es HTML ilegal, ya que estos atributos declaran el mismo
nombre dos veces en el mismo documento.
<A href="#a1">...</A> ... <H1 id="a1"> ...páginas y más páginas... <A name="a1"></A>
El siguiente ejemplo ilustra el hecho de que id y name deben tener el mismo valor cuando los dos aparecen en la etiqueta inicial de un elemento:
<P><A name="a1" id="a1" href="#a1">...</A>
Debido a su especificación en el DTD de HTML, el atributo name puede contener referencias de caracteres. Así, el valor Dürst es un valor válido para el atributo name, como lo es Dürst . El atributo id, por contra, no puede contener referencias de caracteres.
¿Es mejor utilizar id, o name? Los autores deberían considerar las siguientes cuestiones cuando decidan entre usar id o name para el nombre de un vínculo:
Una referencia a un recurso no disponible o no identificable es un error. Aunque los agentes de usuario puedan diferir en el modo de tratar tales errores, recomendamos el comportamiento siguiente:
<!ELEMENT LINK - O EMPTY -- un vínculo independiente del medio --> <!ATTLIST LINK %attrs; -- %coreattrs, %i18n, %events -- charset %Charset; #IMPLIED -- codificación de caracteres del recurso vinculado -- href %URI; #IMPLIED -- URI del recurso vinculado -- hreflang %LanguageCode; #IMPLIED -- código de idioma -- type %ContentType; #IMPLIED -- tipo consultivo de contenido -- rel %LinkTypes; #IMPLIED -- tipos de vínculos directos -- rev %LinkTypes; #IMPLIED -- tipos de vínculos inversos -- media %MediaDesc; #IMPLIED -- para representar en estos medios -- >
Etiqueta inicial: obligatoria, Etiqueta final: prohibida
Atributos definidos en otros lugares
Este elemento define un vínculo. A diferencia de A, sólo puede aparecer en la sección HEAD de un documento, aunque puede aparecer cualquier número de veces. Si bien LINK no tiene contenido, conlleva cierta información relacional que puede ser representada por los agentes de usuario de distintas maneras (p.ej., una barra de herramientas con un menú desplegable para los vínculos).
Este ejemplo ilustra cómo pueden aparecer varias definiciones LINK en la sección HEAD de un documento. El documento actual es "Capitulo2.html". El atributo rel especifica la relación del documento vinculado con el documento actual. Los valores "Index", "Next" y "Prev" se explican en la sección sobre tipos de vínculos.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <TITLE>Capítulo 2</TITLE> <LINK rel="Index" href="../indice.html"> <LINK rel="Next" href="Capitulo3.html"> <LINK rel="Prev" href="Capitulo1.html"> </HEAD> ...el resto del documento...
Los atributos rel y rev juegan papeles complementarios: el atributo rel especifica un vínculo directo y el atributo rev especifica un vínculo inverso.
Consideremos dos documentos A y B.
Documento A: <LINK href="docB" rel="blabla">
Esto significa exactamente lo mismo que:
Documento B: <LINK href="docA" rev="blabla">
Ambos atributos pueden especificarse simultáneamente.
Cuando el elemento LINK vincula una hoja de estilo externa a un documento, el atributo type especifica el lenguaje de la hoja de estilo, y el atributo media especifica el medio o medios de representación deseados. Los agentes de usuario pueden ahorrar tiempo obteniendo de la red sólo aquellas hojas de estilo que se apliquen al dispositivo actual.
Los tipos de medios se tratan con más profundidad en la sección sobre hojas de estilo.
Los autores pueden usar el elemento LINK para proporcionar distintas informaciones a los motores de búsqueda, entre las que se incluyen:
Los ejemplos que siguen ilustran cómo puede combinarse la información sobre el idioma, los tipos de medios y los típos de vínculos para mejorar el procesamiento de los documentos por parte de los motores de búsqueda.
En el siguiente ejemplo, usamos el atributo hreflang para decir a los motores de búsqueda dónde encontrar las versiones en neerlandés, portugués y árabe de un documento. Obsérvese el uso del atributo charset para el manual en árabe. Obsérvese también el uso del atributo lang para indicar que el valor del atributo title del elemento LINK que designa al manual francés está en francés.
<HEAD>
<TITLE>El manual en castellano</TITLE>
<LINK title="El manual en neerlandés"
type="text/html"
rel="alternate"
hreflang="nl"
href="http://algunsitio.com/manual/neerlandes.html">
<LINK title="El manual en portugués"
type="text/html"
rel="alternate"
hreflang="pt"
href="http://algunsitio.com/manual/portugues.html">
<LINK title="El manual en árabe"
type="text/html"
rel="alternate"
charset="ISO-8859-6"
hreflang="ar"
href="http://algunsitio.com/manual/arabe.html">
<LINK lang="fr" title="La documentation en Français"
type="text/html"
rel="alternate"
hreflang="fr"
href="http://algunsitio.com/manual/frances.html">
</HEAD>
En el siguiente ejemplo, le decimos a los motores de búsqueda dónde encontrar la versión impresa de un manual.
<HEAD>
<TITLE>Manual de referencia</TITLE>
<LINK media="print" title="El manual en postscript"
type="application/postscript"
rel="alternate"
href="http://algunsitio.com/manual/postscript.ps">
</HEAD>
En el siguiente ejemplo, le decimos a los motores de búsqueda dónde encontrar la portada de un conjunto de documentos.
<HEAD>
<TITLE>Manual de referencia -- Página 5</TITLE>
<LINK rel="Start" title="La primera página del manual"
type="text/html"
href="http://algunsitio.com/manual/portada.html">
</HEAD>
En las notas del apéndice se da más información sobre cómo ayudar a los motores de búsqueda a indexar su sitio web.
<!ELEMENT BASE - O EMPTY -- URI base del documento --> <!ATTLIST BASE href %URI; #REQUIRED -- URI que actúa como URI base -- >
Etiqueta inicial: obligatoria, Etiqueta final: prohibida
Definiciones de atributos
Atributos definidos en otros lugares
En HTML, los vínculos y las referencias a recursos externos como imágenes, aplicaciones, programas de procesamiento de formularios, hojas de estilo, etc., se especifican siempre mediante un URI. Los URIs relativos se completan de acuerdo con un URI base, el cual puede provenir de distintas fuentes. El elemento BASE permite a los autores especificar el URI base de un documento explícitamente.
Si está presente, el elemento BASE debe aparecer en la sección HEAD del documento HTML, antes de cualquier elemento que haga referencia a una fuente externa. La información de ruta especificada por el elemento BASE sólo afecta a los URIs del documento en el cual aparece el elemento.
Por ejemplo, dadas las siguientes declaraciones BASE y A:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <TITLE>Nuestros productos</TITLE> <BASE href="http://www.pajareria.com/productos/intro.html"> </HEAD> <BODY> <P>¿Conoce ya nuestras <A href="../jaulas/pajaros.gif">Jaulas para Pájaros</A>? </BODY> </HTML>
el URI relativo "../jaulas/pajaros.gif" se completaría a:
http://www.pajareria.com/jaulas/pajaros.gif
Los agentes de usuario deben calcular el URI base para completar los URIs relativos de acuerdo con [RFC1808], sección 3. A continuación se describe cómo se aplica [RFC1808] al HTML específicamente.
Los agentes de usuario deben calcular el URI base de acuerdo con el siguiente orden de precedencia (de prioridad más alta a prioridad más baja):
Por otra parte, los elementos OBJECT y APPLET definen atributos que tienen precedencia sobre el valor establecido por el elemento BASE. Consulte las definiciones de estos elementos para más información sobre cuestiones específicas de estos elementos relacionadas con los URIs.