Skip to main content

Enllaços i Atributs

En aquest capítol aprendrem a crear enllaços amb l’etiqueta <a>, configurar atributs útils com target, rel, download, i també a crear enllaços interns dins d’una mateixa pàgina. Aprendrem també les bones pràctiques per nomenar ID i enllaçar correctament seccions internes.

L'etiqueta <a>​

L’etiqueta <a> s’utilitza per crear enllaços (links) cap a altres llocs web, fitxers, adreces electròniques, seccions internes, etc.

<a href="https://www.exemple.com">Això és un enllaç</a>

Enllaç a una web​

<a href="https://www.tecnocampus.cat">Web Tecnocampus</a>

Atribut target​

  • target="_self" (per defecte): obre l’enllaç a la mateixa finestra
  • target="_blank": obre l’enllaç en una nova pestanya
<a href="https://www.tecnocampus.cat" target="_blank">Obrir nova pestanya</a>

Atribut rel​

  • rel="nofollow": indica als motors de cerca que no segueixin l’enllaç
  • rel="noreferrer": impedeix que el navegador enviï la URL d’origen (Referer)
<a href="https://www.tecnocampus.cat" rel="nofollow noreferrer">Web segura</a>

Enllaços especials​

Enllaç de descàrrega (només fitxers al mateix domini)​

<a href="./img/logo.png" download>Descarregar</a>

Obrir client de correu electrònic​

<a href="mailto:info@example.com">Contacta per email</a>

Fer una trucada telefònica (en mòbils)​

<a href="tel:+34123456789">Truca'ns</a>

Enllaços interns (àncora)​

Serveixen per navegar dins de la mateixa pàgina.

Ex: Anar a una secció específica​

<a href="#contacte">Anar a contacte</a>

I a la secció de destinació cal posar:

<h2 id="contacte">Contacte</h2>

Bones pràctiques amb l'atribut id​

  • Utilitza noms descriptius: "menu-principal", "seccio-contacte"
  • Escriu-los en minúscules
  • No facis servir espais o caràcters especials → usa - o _
  • Evita IDs molt llargs
  • Cada ID ha de ser únic dins la pàgina
<section id="referencies">
  <h2>Referències</h2>
</section>

Aquest mòdul et proporciona les eines per enllaçar recursos dins i fora del teu web, estructurar correctament seccions internes i millorar l’accessibilitat i la navegació de les teves pàgines.