A href: estructura d’un enllaç
Aquest exemple condueix a una pàgina real d’aquest web:
<a href="/ca/interlinking/">Guia d’enllaços interns</a>L’etiqueta a crea l’enllaç, href conté l’adreça i «Guia d’enllaços interns» és el text visible. Utilitza cometes per delimitar el valor de l’atribut i tanca l’etiqueta. No posis un enllaç dins d’un altre ni botons interactius dins d’un enllaç.
Adreces completes, rutes i fragments
Un URL complet inclou protocol i domini; una ruta que comença per / es resol des de l’arrel del lloc. Una ruta sense aquesta barra depèn de la ubicació actual, llevat que hi hagi una base configurada. Aquesta diferència explica molts enllaços que funcionen a la portada però fallen dins una carpeta.
<a href="https://example.com/cataleg/">Catàleg</a>
<a href="/ca/contacte/">Contacte</a>
<a href="#requisits">Requisits</a>Són exemples de sintaxi. El fragment requisits necessita un element amb id="requisits" a la pàgina. Canviar el títol d’una secció no ha de deixar un índex apuntant a un identificador inexistent.
Text visible, pestanyes noves i atributs
Escriu un text que descrigui la destinació, com ara «condicions de lliurament», en lloc de repetir «aquí». Si l’enllaç és una imatge, l’alternativa textual ha d’explicar la funció corresponent. L’accessibilitat també depèn del context i de poder utilitzar l’enllaç amb teclat.
target="_blank" obre un altre context de navegació, habitualment una pestanya. Utilitza’l amb criteri i informa’n quan ajudi a evitar sorpreses. rel="noopener" tracta la relació amb la finestra d’origen; no significa nofollow ni identifica un patrocini.
Comprovacions per a navegació i SEO
Google recomana enllaços a amb href per descobrir destinacions de manera fiable. Si una interacció només executa una acció, com desplegar un filtre, normalment correspon un botó. No utilitzis href buit, # o javascript com a substitut d’un enllaç a una pàgina real.
Prova la destinació, revisa l’idioma i comprova si passa per redireccions evitables. Un enllaç correcte no obliga a indexar la pàgina ni garanteix posicions. Per organitzar-ne les relacions consulta la guia d’interlinking.
Si estàs aplicant aquests enllaços al menú, les fitxes o les crides a l’acció del teu projecte, pots consultar el servei de Disseny web a Barcelona. Hi expliquem com combinem navegació, accessibilitat i presentació en un web orientat a l’ús.