🔗 La balise HTML `<a>` : toutes ses possibilités

La balise HTML <a> permet de créer des liens, mais aussi de déclencher différentes actions sur un ordinateur ou un smartphone.

Son fonctionnement principal repose sur l'attribut href.

🌐 1. Lien vers un site web

<a href="https://www.estagel.fr">🌐 Site de la mairie</a>

Ouvrir dans un nouvel onglet

<a href="https://www.estagel.fr" target="_blank" rel="noopener">
    🌐 Site de la mairie
</a>

target="_blank" ouvre le lien dans un nouvel onglet.

rel="noopener" améliore la sécurité lors de l'ouverture d'un site externe.

📞 2. Téléphoner avec `tel:`

La balise <a> peut ouvrir directement l'application téléphone sur un smartphone.

<a href="tel:+33123456756">📞 Appeler</a>

Exemple pour une mairie :

<a href="tel:+33468590000">📞 Appeler la mairie</a>

Pour un numéro français, on peut utiliser le format international.

04 68 59 00 00

devient :

+33468590000

✉️ 3. Envoyer un e-mail avec `mailto:`

<a href="mailto:mairie@estagel.fr">
    ✉️ Envoyer un e-mail
</a>

Le système ouvre l'application de messagerie configurée sur l'appareil.

Préremplir le sujet

<a href="mailto:mairie@estagel.fr?subject=Demande%20de%20renseignements">
    ✉️ Nous contacter
</a>

Préremplir le sujet et le message

<a href="mailto:mairie@estagel.fr?subject=Demande&body=Bonjour%2C%0A%0AJe%20souhaite...">
    ✉️ Écrire à la mairie
</a>

Quelques caractères utiles dans une URL :

%20 = espace
%0A = retour à la ligne

💬 4. Envoyer un SMS avec `sms:`

<a href="sms:+33612345678">
    💬 Envoyer un SMS
</a>

Sur smartphone, cela ouvre généralement l'application SMS.

Préremplir le message

<a href="sms:+33612345678?body=Bonjour%2C%20je%20vous%20contacte%20au%20sujet%20de...">
    💬 Envoyer un SMS
</a>

Le comportement peut varier selon Android, iOS et l'application de messagerie utilisée.

📱 5. Contacter quelqu'un avec WhatsApp

On peut créer un lien WhatsApp avec https://wa.me/.

<a href="https://wa.me/33612345678">
    💬 Contacter par WhatsApp
</a>

Le numéro doit être au format international, sans +, sans espaces et sans le 0 initial.

Par exemple :

06 12 34 56 78

devient :

33612345678

Préremplir un message WhatsApp

<a href="https://wa.me/33612345678?text=Bonjour%2C%20je%20souhaite%20vous%20contacter">
    💬 Contacter la mairie
</a>

📍 6. Ouvrir une localisation sur Google Maps

<a href="https://www.google.com/maps/search/?api=1&query=Estagel">
    📍 Voir sur la carte
</a>

Avec une adresse précise :

<a href="https://www.google.com/maps/search/?api=1&query=Place+Arago,+Estagel">
    📍 Nous trouver
</a>

Avec des coordonnées GPS :

<a href="https://www.google.com/maps/search/?api=1&query=42.7706,2.6631">
    📍 Voir notre emplacement
</a>

🗺️ 7. Utiliser le schéma `geo:`

Sur certains appareils mobiles, le schéma geo: peut ouvrir une application cartographique.

<a href="geo:42.7706,2.6631">
    🗺️ Naviguer vers Estagel
</a>

Le fonctionnement dépend du système d'exploitation et du navigateur.

Pour un site public, un lien cartographique classique est généralement plus fiable.

📄 8. Ouvrir un document PDF

<a href="/documents/bulletin-municipal.pdf">
    📄 Bulletin municipal
</a>

Le navigateur ouvre généralement le PDF directement.

📥 9. Télécharger un fichier

L'attribut download demande au navigateur de télécharger le fichier plutôt que de simplement l'ouvrir.

<a href="/documents/bulletin-municipal.pdf" download>
    📥 Télécharger le bulletin
</a>

On peut également proposer un nom de fichier :

<a href="/documents/bulletin.pdf" download="bulletin-municipal.pdf">
    📥 Télécharger le bulletin
</a>

Le comportement peut dépendre du navigateur et de la configuration du serveur.

🖼️ 10. Ouvrir une image

<a href="/images/mairie.jpg">
    🖼️ Voir la photo
</a>

On peut également rendre une miniature cliquable :

<a href="/images/mairie-grande.jpg">
    <img src="/images/mairie-mini.jpg" alt="Mairie d'Estagel">
</a>

📂 11. Lien vers une page interne

<a href="/agenda">
    📅 Agenda
</a>

Ou vers un fichier :

<a href="/pages/agenda.md">
    📅 Agenda
</a>

⚓ 12. Aller directement à une partie de la page

On peut créer une ancre avec l'attribut id.

Le lien :

<a href="#contact">
    📞 Contact
</a>

pointe vers :

<section id="contact">
    <h2>Contact</h2>
    ...
</section>

C'est particulièrement pratique pour les pages longues.

🔝 13. Retourner en haut de la page

Créer un lien :

<a href="#top">
    ⬆️ Retour en haut
</a>

Puis placer au début de la page :

<body id="top">

Ou :

<div id="top"></div>

🖨️ 14. Imprimer la page

Il est possible de déclencher l'impression avec JavaScript :

<a href="javascript:window.print()">
    🖨️ Imprimer
</a>

Cependant, il est généralement préférable d'utiliser un bouton :

<button onclick="window.print()">
    🖨️ Imprimer
</button>

📱 15. Utiliser d'autres schémas d'URL

Certains services proposent leurs propres schémas d'URL.

Le principe général est :

<a href="schema:valeur">
    Action
</a>

Exemples :

tel:
sms:
mailto:
geo:

Les schémas disponibles et leur comportement dépendent toutefois du système d'exploitation, du navigateur et des applications installées.

📋 Résumé des principales possibilités

Fonction	Exemple
🌐 Site web	`https://...`
📞 Téléphone	`tel:+33123456756`
✉️ E-mail	`mailto:adresse@example.fr`
💬 SMS	`sms:+33612345678`
📱 WhatsApp	`https://wa.me/33612345678`
🗺️ Géolocalisation	`geo:42.7706,2.6631`
⚓ Ancre	`#contact`
📄 Document	`/documents/fichier.pdf`
📥 Téléchargement	`/documents/fichier.pdf` + `download`

⭐ Exemples particulièrement utiles pour un site municipal

<a href="tel:+33468590000">
    📞 Appeler la mairie
</a>

<a href="mailto:mairie@estagel.fr">
    ✉️ Écrire à la mairie
</a>

<a href="sms:+33612345678">
    💬 Envoyer un SMS
</a>

<a href="https://wa.me/33612345678">
    📱 Contacter par WhatsApp
</a>

<a href="https://www.google.com/maps/search/?api=1&query=Place+Arago,+Estagel">
    📍 Nous trouver
</a>

<a href="/documents/bulletin-municipal.pdf">
    📄 Lire le bulletin municipal
</a>

<a href="/documents/bulletin-municipal.pdf" download>
    📥 Télécharger le bulletin
</a>

<a href="/agenda">
    📅 Agenda municipal
</a>

<a href="#contact">
    📞 Aller aux coordonnées
</a>

<a href="#top">
    ⬆️ Retour en haut
</a>

💡 À retenir

La balise <a> ne sert donc pas uniquement à aller vers une autre page.

La forme générale est :

<a href="DESTINATION">
    TEXTE OU ICÔNE
</a>

La destination peut notamment être :

https://...
tel:...
mailto:...
sms:...
geo:...
#ancre
/fichier.pdf

Pour un site municipal, les possibilités les plus intéressantes sont notamment le téléphone, l'e-mail, le SMS, WhatsApp, la carte, le téléchargement de documents et la navigation par ancres.

📱 Envoyer automatiquement des SMS depuis une page web

Peut-on simuler un clic sur « Envoyer » ?

Oui pour certains éléments de sa propre page web, mais non pour simuler le bouton « Envoyer » de l'application SMS du téléphone.

C'est une restriction de sécurité du navigateur et du système.

1. Ouvrir l'application SMS avec un message préparé

Une balise <a> peut ouvrir directement l'application SMS :

<a href="sms:+33612345678?body=Bonjour%20!%20Je%20vous%20invite%20à%20mon%20anniversaire%20samedi%20à%2019h.">
    🎂 Inviter
</a>

Le téléphone ouvre alors l'application SMS avec :

📱 le numéro du destinataire ;
💬 le message déjà écrit.

Mais l'utilisateur doit encore appuyer sur Envoyer.

2. Peut-on simuler le clic sur « Envoyer » ?

Avec JavaScript, on peut simuler un clic sur un élément qui appartient à notre propre page.

document.querySelector("#monBouton").click();

Par exemple :

<button id="monBouton">Envoyer</button>

<script>
document.querySelector("#monBouton").click();
</script>

Mais cela ne permet pas de cliquer automatiquement sur le bouton « Envoyer » de l'application SMS.

Une page web n'a pas accès aux boutons et à l'interface des autres applications.

3. Pourquoi ?

Imagine une page web contenant simplement :

<a href="sms:+33612345678?body=Bonjour">
    Cliquez ici
</a>

Le navigateur peut autoriser l'ouverture de l'application SMS.

En revanche, il ne permet pas ensuite à cette page de faire :

Ouvrir l'application SMS
        ↓
Trouver le bouton « Envoyer »
        ↓
Simuler un clic
        ↓
Envoyer le SMS

Sinon une page web pourrait envoyer des SMS sans que l'utilisateur le sache.

C'est donc une protection de sécurité et de confidentialité.

🎂 4. Pour une invitation d'anniversaire

Si tu veux simplement envoyer une invitation à ta famille, on peut faire quelque chose de très pratique.

<a href="sms:+33612345678?body=🎂%20Bonjour%20!%20Je%20vous%20invite%20à%20mon%20anniversaire%20samedi%20à%2019h.%20À%20bientôt%20!">
    🎂 Inviter
</a>

Le résultat est :

Clic sur « 🎂 Inviter »
        ↓
Ouverture de l'application SMS
        ↓
Numéro déjà renseigné
        ↓
Message déjà renseigné
        ↓
Appui sur « Envoyer »

C'est la solution la plus simple sans utiliser de service externe.

👨‍👩‍👧‍👦 5. Envoyer à plusieurs personnes

On pourrait créer une page contenant plusieurs boutons :

<a href="sms:+33612345678?body=🎂%20Bonjour%20!%20Je%20vous%20invite%20à%20mon%20anniversaire%20samedi%20à%2019h.">
    👤 Jean
</a>

<a href="sms:+33623456789?body=🎂%20Bonjour%20!%20Je%20vous%20invite%20à%20mon%20anniversaire%20samedi%20à%2019h.">
    👤 Marie
</a>

<a href="sms:+33712345678?body=🎂%20Bonjour%20!%20Je%20vous%20invite%20à%20mon%20anniversaire%20samedi%20à%2019h.">
    👤 Paul
</a>

Chaque clic ouvre un nouveau SMS préparé.

⚡ 6. Envoyer réellement les SMS automatiquement

Si l'objectif est :

Sélectionner toute la famille
        ↓
Cliquer une seule fois
        ↓
Envoyer réellement tous les SMS

alors une simple balise <a> ne suffit pas.

Il faut utiliser un service d'envoi SMS disposant d'une API.

Le principe serait :

Page PHP
   ↓
Liste des destinataires
   ↓
Message
   ↓
API SMS
   ↓
Envoi automatique
   ↓
📱 📱 📱 📱 📱

Le PHP pourrait par exemple préparer une liste :

$message = "🎂 Bonjour ! Je vous invite à mon anniversaire samedi à 19h. À bientôt !";

$destinataires = [
    "+33612345678",
    "+33623456789",
    "+33712345678"
];

Puis transmettre cette liste à l'API du fournisseur SMS.

💡 7. Les trois solutions

Solution	Automatique	Service externe	Confirmation nécessaire
`sms:`	❌	❌	✅
JavaScript + `sms:`	❌	❌	✅
PHP + API SMS	✅	✅	❌

⭐ Conclusion

Pour une utilisation personnelle et occasionnelle, le lien sms: est probablement la solution la plus simple :

<a href="sms:+33612345678?body=🎂%20Bonjour%20!%20Je%20vous%20invite%20à%20mon%20anniversaire%20samedi%20à%2019h.">
    🎂 Inviter
</a>

Il permet de préparer automatiquement le SMS, mais l'utilisateur doit toujours effectuer l'action finale d'envoi.

Pour envoyer automatiquement des SMS à plusieurs personnes sans intervention, il faut passer par une API SMS ou une application disposant des autorisations appropriées.

🔗 La balise HTML <a> : toutes ses possibilités