Comment créer un lien vers une page web : Méthodes HTML, CSS & JavaScript

Le lien est la primitive fondamentale du web. Voici les trois couches d'implémentation.

1. HTML : La fondation sémantique (Toujours commencer ici)

<a href="https://example.com">Texte du lien</a>

Attributs essentiels :

href : Destination (URL absolue, chemin relatif, mailto:, tel:, #ancre)
target="_blank" : Nouvel onglet — ajoutez toujours rel="noopener noreferrer"
rel : nofollow, sponsored, ugc (signaux SEO)
title : Infobulle (supplémentaire, pas remplacement texte clair)
download : Force téléchargement fichier

Accessibilité : Texte lien doit décrire destination (« Voir tarifs » pas « Cliquez ici »).

2. CSS : Style visuel & interaction

a { color: #0066cc; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.2s, color 0.2s; } a:hover, a:focus { color: #004499; border-bottom-color: currentColor; text-decoration: none; } a:focus-visible { outline: 2px solid #0066cc; outline-offset: 2px; border-radius: 2px; } /* Indicateur lien externe */ a[href^="http"]:not([href*="votre-domaine.com"])::after { content: " ↗"; font-size: 0.8em; opacity: 0.7; }

3. JavaScript : Comportement enrichi

// Amélioration progressive : intercepter pour SPA, analytics, confirmation document.querySelectorAll('a[data-confirm]').forEach(link => { link.addEventListener('click', e => { if (!confirm(link.dataset.confirm)) e.preventDefault(); }); }); // Lien routeur SPA (pas de rechargement complet) function navigate(href) { history.pushState(null, '', href); renderApp(); // votre fonction render } document.querySelectorAll('a[href^="/"]').forEach(link => { link.addEventListener('click', e => { if (e.metaKey || e.ctrlKey || e.shiftKey) return; // nouvel onglet e.preventDefault(); navigate(link.getAttribute('href')); }); });

Types de liens spéciaux

Sécurité

Ne mettez jamais de secrets dans URLs (logs, referrer, historique)
Validez/assainissez liens générés utilisateurs
CSP : directives connect-src, navigate-to

HTML fait le travail. CSS le rend clair. JS ajoute le comportement. Dans cet ordre.

Gamme produits Oakley : Lunettes, Vêtements, Équipements & Plus

Les posts Facebook « économiser en ligne » sont-ils du spam ?

Téléavertisseurs

Type	Format href	Exemple
Email	`mailto:email@domaine.com?subject=Sujet&body=...`	Liens contact
Téléphone	`tel:+33123456789`	Appel direct mobile
SMS	`sms:+33123456789?body=Bonjour`	SMS pré-rempli
Ancre	`#section-id`	Défilement même page
WhatsApp	`https://wa.me/33123456789?text=Bonjour`	Chat direct