Guide de style

Ce guide de style présente l’ensemble des éléments WYSIWYG que vous pouvez utiliser pour du contenu éditorial long sur vos pages ou dans vos articles. Cette liste n’est pas exhaustive, mais elle présente la plupart des éléments courants dont vous pourriez avoir besoin !

Utilisez class="intro" pour un texte d’introduction qui doit être plus visible qu’un paragraphe standard tout en restant intégré au contenu de la page.

Utilisez class="small" pour des notes secondaires qui doivent rester lisibles tout en étant clairement moins importantes que le texte principal.

Utilisez class="citation" pour les notes de source, les crédits compacts, les légendes ou les apartés éditoriaux.

Texte éditorial

Les pages éditoriales peuvent combiner une importance forte, l’emphase, un texte supprimé, des termes mis en évidence et l’élément inline code-style labels sans perturber le rythme.

Utilisez <mark> pour attirer l’attention sur une expression, <del> ou <s> pour du texte supprimé ou obsolète, et <code> pour les libellés littéraux, noms de fichiers, paramètres ou courtes références techniques.

Utilisez class="callout" sur un paragraphe pour de brèves indications, des notes de lancement, du contexte d’achat ou des informations importantes relatives aux politiques.

Échelle des titres

Les titres doivent créer un plan clair. Réservez <h1> au titre principal de la page lorsque le modèle n’en fournit pas déjà un, puis utilisez <h2> et <h3> pour organiser les sections de la page.

Niveau de titre un pour les chemises

Niveau de titre deux pour les sections de page

Niveau de titre trois pour les sous-sections

Niveau de titre quatre pour les détails regroupés

Niveau de titre cinq pour les libellés compacts

Niveau de titre six pour les métadonnées

Sémantique inline

Utilisez <kbd> pour les commandes clavier telles que Ctrl + K, <abbr> pour les abréviations comme SEO, et <dfn> lors de l’introduction d’un terme tel que contenu structuré.

Utilisez <time> pour des dates comme 25 juin 2026, <cite> pour des titres ou des sources comme The Reset Journal, <var> pour des variables comme n, et <samp> pour un résultat d’exemple comme Enregistrement réussi.

Les exemples inline comprennent également le gras, l’italique, le soulignement, le barré, l’_indice, l’^exposant et un lien produit.

Adresse

Utilisez <address> pour les coordonnées ou les informations de localisation, et non pour une mise en forme postale générale.

Boutique phare
123 Example Avenue
New York, NY 10001
Voir les boutiques

Listes

Les listes doivent faciliter la lecture rapide des indications tout en offrant suffisamment de texte pour tester le retour à la ligne, les liens et la mise en forme inline.

Liste non ordonnée avec étapes ordonnées

• Comparez soigneusement les produits. Commencez par une autre chemise mise en avant, puis examinez les détails les plus importants pour l’usage prévu.
• Planifiez le parcours d’achat. Un élément de liste peut contenir des étapes ordonnées imbriquées :
  1. Confirmez les exigences de taille, de matière ou de style.
  2. Consultez le contenu complémentaire, notamment les FAQ et les pages de politique.
  3. Choisissez l’option qui équilibre le mieux la coupe, la finition et la disponibilité.
• Utilisez des formulations concises, mais fournissez suffisamment de contexte pour que chaque élément reste compréhensible lors d’une lecture rapide.

Liste ordonnée avec notes non ordonnées

1. Présentez l’objectif de la page dans un paragraphe clair avec un lien pertinent.
2. Appuyez l’idée principale avec des informations utiles :
   • Mettez en évidence les termes clés avec modération.
   • Utilisez <code> pour les libellés ou extraits littéraux.
   • Incluez du texte en gras ou mis en valeur uniquement lorsqu’il aide le lecteur.
3. Terminez la section par une idée claire, et non par un fragment sans issue.

Citations et encadrés

Utilisez les citations en bloc pour les propos issus d’une source, les témoignages, les extraits éditoriaux ou les déclarations qui nécessitent une séparation visuelle du texte environnant.

Le contenu produit le plus utile répond aux questions pratiques tout en donnant à la marque un point de vue distinct.

Équipe éditoriale de Reset

Utilisez class="pullquote" lorsqu’une citation doit bénéficier d’une importance visuelle supérieure à celle d’une citation en bloc standard.

Images

Utilisez des figures lorsqu’une image nécessite une légende. Les exemples ci-dessous utilisent <figure class="embed image"> et <figcaption class="caption"> pour montrer le placement d’une légende en dessous ou au-dessus.

Vidéo hébergée

Utilisez l’élément <video> standard pour du contenu MP4 hébergé. Gardez le balisage simple, sauf si la mise en page environnante nécessite spécifiquement une structure supplémentaire.

Iframe YouTube

Utilisez l’iframe YouTube standard lorsqu’une vidéo doit être intégrée depuis YouTube.

Tableau

Les tableaux doivent comporter des en-têtes utiles et des cellules au contenu varié afin que les lecteurs puissent comparer rapidement les détails.

Comparaison de chemises

Caractéristique	Option standard	Option mise en avant	Notes
Lien principal	Produit un	Produit deux	Les liens dans les cellules d’un tableau doivent rester faciles à repérer et à sélectionner.
Style éditorial	Brève description avec une légère emphase.	Une description plus longue qui s’étend sur plusieurs lignes et contient du texte fort pour la phrase la plus importante.	Utilisez des longueurs de cellule variées pour vérifier l’alignement et l’espacement.
Détail d’entretien	Spot clean	Professional care recommended	Le code inline peut identifier des libellés littéraux, des étiquettes d’entretien ou des caractéristiques compactes.
Disponibilité	Limitée	Disponible en ligne et dans la boutique phare.	Les cellules d’un tableau peuvent contenir des mises en évidence, des liens et des indications de longueur variable.

Liste de définitions

Utilisez <dl> pour les paires terme-description, les entrées de glossaire, les caractéristiques compactes ou les métadonnées regroupées.

Paragraphe d’introduction

Utilisez class="intro" pour créer un paragraphe d’ouverture plus marqué.

Légende

Utilisez class="caption" pour les légendes de figures qui nécessitent un style cohérent.

Citation mise en avant

Utilisez class="pullquote" lorsqu’une citation doit constituer un moment éditorial plus fort.

Bloc de code

Utilisez <pre> avec <code> pour les exemples plus longs où l’espacement et les sauts de ligne sont importants.

<section>
  <h2>Care notes for shirts</h2>
  <p class="intro">Begin with a concise overview that helps readers orient themselves.</p>
  <ul>
    <li><strong>Store carefully.</strong> Keep the item clean, dry, and protected between uses.</li>
    <li><em>Review the details.</em> Link to related products or supporting pages where useful.</li>
  </ul>
  <p class="small">Use small text for secondary reminders, not primary instructions.</p>
</section>

Volets dépliants

Utilisez <details> et <summary> pour du contenu facultatif qui doit rester disponible sans surcharger la page principale.

Exemple de contenu dépliable

Les blocs de détails sont utiles pour les politiques détaillées, les informations d’entretien, les conseils de taille ou les notes éditoriales facultatives.

Séparateurs et listes de tâches

Utilisez <hr> lorsqu’un séparateur thématique est plus clair qu’un autre titre. Des cases à cocher peuvent apparaître dans un contenu de type tâche lorsque la page doit présenter une progression ou une liste de contrôle.

---

• Élément de tâche coché avec une progression importante déjà terminée.
• Élément de tâche non coché avec un contexte complémentaire encore en attente.

Lorsque chaque section a un objectif clair, le contenu long reste facile à parcourir, utile à lire et cohérent dans toute l’expérience Reset.