Logo de Mosaic
El text central d'HTML
Enllaços HTML: construïm un web!

18. Enllaços HTML: construïm un web!

Christian Heilmann. 8 de juliol del 2008. Darrera modificació: 9 de març de 2017 (equip docent del grau de Multimèdia de la UOC). Publicat a: alt, href, àncora, títol, enllaç

En aquest apartat trobareu informació sobre un dels invents més revolucionaris de tota la història del web: els enllaços. Els enllaços permeten que el lector d'un document els segueixi per anar cap a un altre document i pugui passar d'un servidor a un altre sense necessitat de desconnectar-se i tornar-se a connectar cada vegada. Des que es van inventar han passat moltes coses, però n'hi ha una que no ha canviat gens: els enllaços són una part molt important de l'experiència en el web, i segons com els utilitzeu podeu posar les coses fàcils o difícils a les persones que visitin el vostre web.

Una vegada hàgiu llegit aquest apartat sabreu com crear enllaços que siguin fàcils d'entendre i que funcionin en qualsevol entorn. A més a més, també aprendreu la manera en què els enllaços afecten la vostra popularitat en els motors de cerca i rebreu alguns consells sobre la descripció dels enllaços.

Nota

Com ja és habitual, aquest apartat va acompanyat d'un arxiu "links_code.zip" que conté diversos arxius als quals aniré fent referència.

Els continguts d'aquest apartat són els següents:

Els enllaços són parts d'un lloc web (normalment creats amb l'HTML, però no sempre) que apunten cap a altres recursos, com per exemple altres documents HTML, arxius de text, PDF, etc. Hi ha enllaços que el navegador ha de seguir automàticament i que es creen amb elements link (ja n'heu trobat alguns en apartats anteriors, els quals s'utilitzaven per a importar arxius CSS a un document HTML) i també hi ha enllaços que l'usuari pot activar opcionalment. Aquests es coneixen com a àncores i podeu afegir-los al document amb l'element a.

18.2. L'anatomia d'un enllaç àncora

Podeu convertir qualsevol element inserit en el document en un enllaç àncora afegint un element a al davant i al darrere.

Per exemple, en el següent document HTML el text Yahoo Developer Network es converteix en un enllaç.

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8">
<title>Link Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>A link to the YDN</h1>
  <p><a href="http://developer.yahoo.com">Yahoo Developer Network</a></p>
</body>
</html>

Arxiu font: "linkexample.html"

Les persones que visitin el web i activin aquest enllaç (clicant-hi amb el ratolí o activant-lo amb el teclat o, en alguns casos, amb la veu) deixaran el lloc actual i passaran a YDN. L'enllaç en si experimenta altres canvis, que ja veurem quan parlem dels estils dels enllaços.

L'àncora té diversos atributs que podeu afegir-hi:

Ara veurem en primer lloc els atributs més importants i llavors parlarem sobre el que podeu fer per tal que tot sigui més comprensible per a les persones que visitin el vostre web.

18.3. Enllaç o destinació? Els atributs id i href

Un element a pot tenir diverses funcions segons els atributs que hi definiu. L'atribut més habitual que utilitzareu és href, que defineix el recurs al qual apunta l'enllaç. Aquest atribut pot contenir diferents valors:

Qualsevol d'aquests valors el convertirà en un enllaç, ja que apuntarà cap a un altre lloc. Per altra banda, un atribut id el convertirà en una àncora dins la pàgina; alguna cosa a la qual apunta un altre enllaç. Això pot ser una mica confús, ja que els dos utilitzen l'element d'àncora (a). Per a poder-ho recordar més fàcilment podeu veure-ho de la manera següent: un atribut id converteix un enllaç en una àncora i el podeu utilitzar per a enllaçar amb seccions específiques del document.

El següent bloc de codi HTML conté exemples de tots els tipus diferents d'enllaços:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8">
<title>Different Link Example</title>
<link rel="stylesheet" href="linkexamplestyles.css">
</head>
<body>
  <h1>Different Link examples</h1>

  <h2>Example of in-page navigation with fragment identifiers, links and anchors</h2>
  <div id="nav">
    <ul id="toc">
      <li><a href="#sec1">Section One</a></li>
      <li><a href="#sec2">Section Two</a></li>
      <li><a href="#sec3">Section Three</a></li>
      <li><a href="#sec4">Section Four</a></li>
      <li><a href="#sec5">Section Five</a></li>
    </ul>
  </div>  

  <div id="content">
    <div>
      <h2><a id="sec1">Section #1</a></h2>
      <p><a href="#toc">Back to menu</a></p>
    </div>
    <div>
      <h2><a id="sec2">Section #2</a></h2>
      <p><a href="#toc">Back to menu</a></p>
    </div>
    <div>
      <h2><a id="sec3">Section #3</a></h2>
      <p><a href="#toc">Back to menu</a></p>
    </div>
    <div>
      <h2><a id="sec4">Section #4</a></h2>
      <p><a href="#toc">Back to menu</a></p>
    </div>
    <div>
      <h2><a id="sec5">Section #5</a></h2>
      <p><a href="#toc">Back to menu</a></p>
    </div>
  </div>

  <h2>Some other link examples</h2>
  <ul>
    <li><a href="http://developer.yahoo.com">Yahoo Developer Network</a></li>
    <li><a href="http://dev.opera.com/articles/view/the-freelancing-
     business-part-1-pricing/#marketing">Tips on marketing yourself</a></li>
    <li><a href="ftp://get.opera.com/pub/opera/win/">Download different
     Opera versions</a></li>
    <li><a href="http://farm1.static.flickr.com/56/188791635_0b8bdd808d.jpg?v=0">
     Photo of my book</a></li>
  </ul>
</body>
</html>

Arxiu font: "linkexample.html"

Obriu aquest arxiu en el navegador i experimenteu-hi. Veureu que si activeu qualsevol dels enllaços de la primera llista passareu a la secció corresponent del document. Això és així perquè estan connectats pel mateix identificador de fragment; el primer enllaç de la llista, per exemple, té un atribut href de #sec1, que és el mateix que el valor ID de l'enllaç que hi ha a l'interior del primer element h2 del contingut. Això és tot el que necessiteu per a connectar dos elements d'àncora en un document; si us hi enllaceu en un atribut href, utilitzeu el mateix valor precedit per un coixinet. També pot ser que us hagueu adonat que la URL de la barra d'ubicació del navegador ha canviat i que ara mostra un identificador de segment al final, la qual cosa significa que els visitants poden afegir aquesta secció a les adreces d'interès o enviar l'enllaç per correu electrònic a altres persones per a indicar-los exactament on han d'anar.

No obstant això, si activeu qualsevol dels enllaços "Back to menu" (tornar al menú) ocorrerà el mateix. Com pot ser? Els identificadors de fragment poden ser qualsevol element amb un ID.

Per a recapitular:

Tot això cobreix el menú i les diferents seccions de l'exemple, però què passa amb els altres enllaços? Si els proveu veureu que apunten cap a destinacions diferents: un va a un altre lloc, un altre mostra una fotografia i el tercer mostra una secció concreta d'una altra pàgina web (que es troba passant a un ID específic). Si tot ha funcionat bé, perfecte! Però què passa si no heu entès, o el navegador no ha entès, alguns d'aquests recursos?

18.4. No permeteu cap ambigüitat en els enllaços

El més important que cal que recordeu sobre els enllaços és que són una part bàsica per a la vostra relació amb les persones que us visitin. Aquestes persones es refien que quan els oferiu un enllaç podran seguir-lo i accedir a una informació bona i pertinent. Si els vostres enllaços no funcionen perquè el recurs al qual apunten no està disponible o es troba en un format que el visitant no pot llegir, haureu traït la seva confiança i haureu perdut credibilitat. No heu de permetre mai que això passi.

18.4.1. Oferir informació addicional amb un atribut title

Igual que amb qualsevol altre element HTML, podeu afegir un atribut title a un element a per afegir-hi informació addicional. Els navegadors mostraran el que es coneix com un indicador de funció quan els visitants passin el cursor del ratolí sobre l'enllaç. Aquest indicador de funció els indica la naturalesa d'aquest enllaç.

Per exemple, podeu escriure una petita introducció al contingut i la ubicació del document enllaçat:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8">
<title>Adding extra information with a title attribute</title>
<link rel="stylesheet" href="linkexamplestyles.css">
</head>
<body>
  <h1>Adding extra information with a title attribute</h1>
  <ul>
    <li>Find more information on the <a title="The Yahoo Developer
     Network is the main hub for all the developer tools Yahoo offers,
     including the Yahoo User Interface Library (YUI) and the Design
     Patterns repository" href="http://developer.yahoo.com">Yahoo
     Developer Network</a>.</li>
  </ul>
</body>
</html>

Arxiu font: "titleexample.html"

Figura 1. Afegir un atribut de títol per a mostrar la informació com un indicador de funció quan els visitants passen per sobre l'enllaç.

Però no podeu esperar que els visitants tinguin prou paciència i coordinació mà-ull per a poder-vos refiar d'aquest recurs per a donar informació crucial. És molt probable que els usuaris amb alguna discapacitat visual, que no poden veure la pàgina, no puguin accedir a aquesta informació. Tot i que els lectors de pantalla inclouen l'opció de llegir en veu alta els atributs title per a l'usuari final, aquesta opció està desactivada per defecte; és per aquest motiu que no hauríeu de fer servir mai l'atribut title per a donar informació crucial sobre l'enllaç. La informació crucial:

18.4.2. Enllaços a recursos no HTML: no obligueu els visitants a fer conjectures

Hi ha una situació molt empipadora, que és quan cliqueu un enllaç i el navegador no sap què ha de fer amb allò a què apunta l'enllaç que heu clicat. No obstant això, no és gens estrany veure llocs web que enllacen amb imatges, documents PDF i vídeos sense avisar els visitants perquè estiguin preparats. Els vídeos són una causa molt habitual de problemes dels navegadors. A més a més, també és possible que el recurs tingui un volum molt gran (un PDF de 20 MB, per exemple), la qual cosa significa que potser el visitants preferirien descarregar-lo en lloc d'obrir-lo dintre del navegador i afegir-lo així a un consum de memòria que ja és considerable; o potser fins i tot decidirien ni tan sols accedir-hi.

Uns dels factors principals de l'èxit d'un producte web és el fet de no obligar les persones que el visiten a fer conjectures sobre què passarà quan hi facin alguna cosa; sempre s'ha d'explicar clarament quins efectes tindran les seves accions. En el cas dels enllaços, tot el que cal que feu per a evitar moltes frustracions és explicar bé als visitants què és el recurs al qual porta l'enllaç.

Aquí trobareu alguns exemples:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8">
<title>Linking non-HTML resources</title>
<link rel="stylesheet" href="linkexamplestyles.css">
</head>
<body>
  <h1>Linking non-HTML resources</h1>
  
  <ul>
    <li>Find more information on the <a href="http://developer.yahoo
     .com">Yahoo Developer Network site (external)</a></li>
    <li>Download the <a href="http://www.wait-till-i.com/stuff/JavaScript
     -DOM-Cheatsheet.pdf">Dom Cheatsheet (PDF, 85KB)</a></li>
    <li>Pick and <a href="ftp://get.opera.com/pub/opera/win/">download
     different Opera versions from their FTP (external)</a></li>
    <li>Check out a <a href="http://farm1.static.flickr.com/56/188791635_
     0b8bdd808d.jpg?v=0">Photo of my book (JPG, 200KB)</a></li>
  </ul>
</body>
</html>

Arxiu font: "linkingnonhtml.html"

Si oferiu tota aquesta informació sobre l'arxiu enllaçat i l'espai que ocupa, els visitants podran decidir què en faran i no haureu de suposar que tenen el navegador configurat d'una manera concreta o alguns programes instal·lats. Si ho combineu amb uns estils intel·ligents, fins i tot podreu aconseguir que tingui un bon aspecte i que tot sigui molt intuïtiu. Si us en voleu assegurar del tot, també podeu oferir una secció d'ajuda que expliqui què són els diferents formats d'arxiu i on es poden aconseguir els programes necessaris per obrir-los.

18.4.3. Enllaços externs i enllaços interns

Una de les coses que més temen els responsables dels negocis pel que fa als llocs web de les seves companyies és que la gent que els visiti en surti prematurament. Aquesta és sovint la raó per no oferir mai enllaços cap a tercers (a menys que aquests tercers paguin diners pel privilegi del redireccionament del trànsit cap a ells). Més endavant ja tornaré a parlar d'aquest criteri tan equivocat; de moment parlarem del que fa la gent per a evitar que els visitants abandonin el seu lloc i les conseqüències que tenen aquestes mesures per a l'èxit del lloc web.

18.5. Marcs i finestres emergents: ni parlar-ne!

El temor de perdre visitants que van cap a altres llocs web, combinat amb el desig de seguir-nos enllaçant amb aquests altres llocs, ens ha portat alguns invents en el desenvolupament dels webs que s'han convertit durant anys en un veritable problema per a la usabilitat dels llocs: els marcs i les finestres emergents.

L'ús de marcs HTML significa que esteu separant la pàgina que apareix en el navegador en diferents documents. L'avantatge és que el document segueix essent aparentment el mateix fins i tot en carregar-ne parts d'aquest, ja sigui des del servidor propi o des de servidors de tercers. Però aquí és on acaba la seva utilitat; els marcs són una experiència terrible per a l'usuari i en realitat són perniciosos:

Els enllaços dintre d'un conjunt de marcs utilitzen l'atribut target de l'àncora per adreçar-se al marc correcte. Cadascun dels marcs d'un conjunt de marcs té un nom concret i en activar l'enllaç s'obre el document definit a l'atribut href d'aquest marc. Si el conjunt de marcs no està disponible (per exemple, quan un visitant ha trobat el document amb els enllaços a través d'un motor de cerca), cadascun dels enllaços s'obre en una nova instància del navegador.

Obrir una nova instància del navegador és una altra de les maneres habituals d'enllaçar amb llocs web de tercers, ja sigui amb una finestra emergent de scripts o amb un atribut target amb el valor _blank. El fet que tots els navegadors moderns tinguin un bloquejador de finestres emergents ja és tota una indicació de si és segur o no refiar-se d'aquesta tècnica... No ho és en absolut!

Ras i curt: no utilitzeu l'atribut target per a crear enllaços tret que sapigueu exactament què esteu fent. De totes maneres, aquesta ja és una idea antiquada; actualment la majoria dels navegadors tenen interfícies amb pestanyes, amb la qual cosa els usuaris poden obrir llocs de tercers en el fons per a tornar-hi més tard i mentrestant quedar-se al vostre lloc web. En algunes circumstàncies és possible que vulgueu indicar la diferència entre els enllaços externs i interns, però heu de deixar sempre que sigui el visitant el que decideixi què en farà.

18.6. Avantatges dels enllaços de sortida i dels enllaços d'entrada

Hi ha algunes bones raons per enllaçar amb llocs de tercers fins i tot quan aquests són de la competència.

La utilitat dels enllaços d'entrada (els enllaços que apunten des del lloc web d'un tercer cap al vostre) genera molt menys debat. Com més llocs web vàlids i d'alta qualitat s'enllacin amb el vostre amb les paraules clau pertinents, més amunt apareixereu en els motors de cerca com el Google. Abans que això passi, però, cal que demostreu que no teniu por d'enllaçar-vos amb altres llocs.

Les paraules clau pertinents ens porten cap a una altra part molt important de la creació d'uns bons enllaços: com descriure'ls.

18.7. Descripció dels enllaços

Ja n'he parlat una mica en el subapartat sobre els enllaços cap a recursos no HTML, però sempre és bo recordar que els enllaços no només són part del text de la pàgina, sinó que també són uns elements interactius del document.

Algunes tecnologies d'assistència ofereixen una llista dels enllaços en lloc de tot el document per tal de permetre als usuaris que puguin navegar ràpidament per ell, la qual cosa significa que heu de comprovar que els textos dels vostres enllaços tinguin sentit fora del context en què es troben. Podeu comprovar-ho molt fàcilment a Opera obrint qualsevol lloc web i seleccionant Tools > Links (eines > enllaços) en el menú o prement 'Ctrl' + 'Majúscules' + 'L'. S'obrirà una pestanya nova en la qual podreu veure tots els enllaços del document i cap a on apunten.

Això significa que heu de comprovar no només que tots els textos dels enllaços tinguin sentit, sinó també que no hi hagi diversos enllaços amb la mateixa descripció però que apuntin cap a recursos diferents. L'error clàssic que es comet és el dels enllaços "cliqueu aquí" que es descriuen, per exemple, com a "Per descarregar l'última versió de la nostra eina, cliqueu aquí". És molt millor utilitzar un text de l'enllaç que expliqui cap on apunta; en aquest cas, "Podeu descarregar i provar l'última versió de la nostra eina".

Això mateix també s'aplica als enllaços "més". Els trobareu en els llocs de notícies, en els quals veureu un titular i un text resumit i un enllaç "més" o "notícia completa" que s'ha de seguir. La solució d'aquest problema és utilitzar una imatge "més" enllaçada i donar-li un text alternatiu únic o afegir un espai dins l'enllaç després de "més" i ocultar-lo amb el CSS. Explicarem tots aquests trucs més detalladament a l'apartat sobre els menús i la navegació, que trobareu més endavant en aquest curs.

Vegeu també

Vegeu l'apartat 23 d'aquest mòdul.

18.8. Estils dels enllaços

Encara no ha arribat el moment de parlar del CSS, però en aquest punt és útil tenir en compte que l'aspecte dels enllaços és molt important i que hi ha diversos i diferents estats d'enllaços que cal considerar. Els estats dels enllaços (que més endavant es relacionen amb els pseudoselectors del CSS; pot sonar complex, però no ho és) són:

Resum

Aquesta vegada hem explicat moltes coses, però és molt important recordar el funcionament dels enllaços i què han de fer. Al llarg de la vostra trajectòria professional com a desenvolupadors de webs aprendreu molts trucs i tècniques per a anul·lar aquests comportaments per defecte, i espero que us pareu a pensar si el que voleu fer és realment necessari.

He parlat de:

Amb tots aquests coneixements hauríeu de ser capaços d'escriure documents HTML que s'enllacin adequadament, i ja esteu preparats per a començar a pensar en els menús i la navegació del lloc.

Preguntes de repàs

  1. Quin problema té l'enllaç següent: <a href="report.pdf" title="report as PDF, 2.3MB">get our latest report</a>?

  2. Per a què serveix l'atribut target en els enllaços? Es pot fer servir d'alguna manera positiva?

  3. He parlat sobre les relacions dels enllaços i les connexions entre els enllaços i les àncores. Hi ha algun atribut per als enllaços que descrigui també les relacions entre documents?

  4. Com es pot escriure un enllaç que enviï els visitants cap a un element que hi ha més avall de la pàgina en clicar-lo? Què cal comprovar per endavant?

Logo Creative Commons
Els continguts recollits en aquest article estan subjectes a una llicència Creative
Commons Reconeixement, No comercial - Compartir Igual 3.0 No adaptada.
: Anar a l'índex :