# Ajouter des liens d'ancrage au contenu de l'email avec du HTML
## Description

Un lien d'ancrage amène le lecteur à un autre endroit du même email, par exemple d'une table des matières en haut vers une section plus bas. Cet article explique comment créer la destination avec un bloc HTML, puis comment y diriger un lien, un bouton ou un élément de menu.

Cette méthode fonctionne dans une newsletter normale créée avec l'éditeur glisser-déposer. Vous n'avez pas besoin d'écrire votre email en HTML : vous ajoutez seulement un petit bloc HTML pour chaque destination.

## Pourquoi c'est important

Les liens d'ancrage rendent les longues newsletters et les emails de type récapitulatif plus faciles à lire. Les lecteurs vont directement aux sections qui les intéressent : ils font moins défiler et s'intéressent davantage à votre contenu. Les liens d'ancrage sont utiles pour les emails qui présentent plusieurs sujets, des produits ou un programme d'événements.

<Callout type="caution">
Utilisez l'attribut `id` sur une balise `<a>` vide, par exemple `<a id="section1"></a>`. N'utilisez pas l'attribut `name` : la plateforme le retire à l'envoi, et le lien ne mène alors nulle part. Une `<div>` avec un `id` ne fonctionne pas non plus.
</Callout>

<Callout type="caution">
**Gmail (sur le web et dans l'application) ne prend pas en charge les liens vers une section du même email : le lien ne fait rien.** Ils fonctionnent dans la plupart des autres messageries, comme Apple Mail et Outlook. Si beaucoup de vos abonnés utilisent Gmail, préférez des liens vers des pages web.
</Callout>

## Instructions étape par étape

<Stepper>

1. Ajoutez un bloc HTML
   - Dans l'éditeur d'emails, ouvrez l'onglet **Contenu**.
   - Glissez le bloc **HTML** à l'endroit où le lecteur doit arriver, juste au-dessus de la section visée.
   - Le reste de votre email ne change pas : vos textes, images et boutons restent des blocs normaux.

1. Ajoutez le repère de destination
   - Sélectionnez le bloc HTML. Son code s'affiche à droite, dans le panneau **Propriétés HTML**.
   - Effacez le code d'exemple du bloc et collez ce code à la place :
   ```html
   <a id="section1"></a>
   ```
   Cette balise vide marque la destination. Le lecteur ne la voit pas dans l'email.

   ![Panneau Propriétés HTML avec le code de repère](/images/campaign-creation/anchor-link-html-block.png)

1. Créez le lien vers la destination
   - **Lien dans un texte** : sélectionnez le texte, puis cliquez sur l'icône de lien (**Insérer/modifier lien**) dans la barre d'outils du texte. La fenêtre **Insert link** s'ouvre en anglais : dans le champ **URL**, tapez `#section1`, puis cliquez sur **Save**.
   - **Bouton** : sélectionnez le bouton. Dans ses propriétés, sous **Action**, tapez `#section1` dans le champ **URL**.
   - **Élément de menu** : sélectionnez le menu. Sous **Configurer les éléments de menu**, activez **Plus d'options** pour l'élément, puis tapez `#section1` dans le champ **URL**. Chaque champ d'un élément de menu est expliqué dans [Utiliser le bloc Menu](/fr/docs/campaign-creation/using-the-menu-block).

   L'adresse est le signe `#` suivi de l'`id` exact de la destination.

1. Enregistrez et testez
   - Enregistrez votre email.
   - Envoyez-vous un email de test et cliquez sur chaque lien d'ancrage pour vérifier qu'il mène au bon endroit.

</Stepper>

### Règles pour les noms d'ancrage

- Donnez à chaque destination un `id` unique dans l'email.
- N'utilisez ni espace ni accent dans l'`id`. Utilisez des lettres, des chiffres et des traits d'union, par exemple `section1` ou `menu-desserts`.
- L'adresse du lien doit correspondre exactement à l'`id`, précédée du signe `#` : `id="section1"` et `#section1`.

### Exemple de code HTML

Voici un exemple avec un lien en haut de l'email et sa destination plus bas :

```html
<p><a href="#section1">Aller à la section 1</a></p>

<!-- ... autre contenu ... -->

<a id="section1"></a>
<h2>Section 1</h2>
<p>Contenu de la section 1.</p>
```

Quand le lecteur clique sur **Aller à la section 1**, l'email défile jusqu'à la balise `<a id="section1"></a>`, juste au-dessus du titre de la section.

Le suivi des clics ne modifie pas les liens d'ancrage. Ils restent `#section1` dans l'email envoyé.

## Dépannage

**Le lien ne mène nulle part**

- N'utilisez pas l'attribut `name` (`<a name="section1">`). La plateforme le retire à l'envoi. Utilisez plutôt `id` : `<a id="section1"></a>`.
- Une `<div>` avec un `id` (`<div id="section1">`) ne fonctionne pas comme destination. Utilisez une balise `<a>` vide avec un `id`.
- Vérifiez que l'`id` ne contient ni espace ni accent.
- Vérifiez que l'adresse du lien correspond exactement à l'`id`, majuscules et minuscules comprises.

**Le lien mène au mauvais endroit**

- Vérifiez que chaque `id` n'est utilisé qu'une seule fois dans l'email.
- Placez la balise de destination juste avant le contenu que le lecteur doit voir.

**Compatibilité des clients de messagerie**

- Gmail (sur le web et dans l'application) ne prend pas en charge les liens d'ancrage : le lien ne fait rien. Ils fonctionnent dans la plupart des autres messageries, comme Apple Mail et Outlook.
- Testez dans les applications de messagerie que votre public utilise le plus.
- Dans un très long email, ajoutez aussi un court résumé en haut pour que tous les lecteurs trouvent l'information.

**Le code HTML ne s'affiche pas**

- Utilisez le bloc **HTML**, et non un bloc de texte, pour la balise de destination.
- Vérifiez que chaque balise est bien fermée.

## Articles connexes

- [Utiliser le bloc Menu](/fr/docs/campaign-creation/using-the-menu-block) - Éléments de menu vers des sections
- [Utiliser l'éditeur d'emails](/fr/docs/campaign-creation/using-the-email-designer) - Mode d'édition HTML
- [Importer votre code HTML](/fr/docs/email-templates/importing-your-html-code) - Travailler avec le HTML
- [Ajouter un sondage à une campagne](/fr/docs/campaign-creation/integrating-survey-forms) - Créer des liens vers des sections
- [Créer des campagnes](/fr/docs/campaign-creation/creating-campaigns) - Les bases des campagnes
- [Tester votre campagne](/fr/docs/campaign-creation/testing-your-campaign) - Tester les liens d'ancrage