Guide de style

Ce guide de style d’exemple présente l’ensemble des éléments WYSIWYG que vous pouvez utiliser pour du contenu éditorial long dans vos pages ou articles. Il ne s’agit pas d’une liste exhaustive, mais il 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 les notes secondaires qui doivent rester lisibles tout en étant clairement moins importantes que le texte courant.

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

Texte éditorial

Les pages éditoriales peuvent combiner une forte mise en avant, l’emphase, du texte supprimé, des termes surlignés et code-style labels en ligne sans rompre 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, des informations utiles à l’achat ou des informations importantes sur les politiques.

Hiérarchie 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.

Titre de niveau un pour les arbres

Titre de niveau deux pour les sections de page

Titre de niveau trois pour les sous-sections

Titre de niveau quatre pour les détails regroupés

Titre de niveau cinq pour les libellés compacts

Titre de niveau six pour les métadonnées

Sémantique en ligne

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 les dates comme 25 juin 2026, <cite> pour les titres ou sources comme The Verdant Journal, <var> pour les variables comme n, et <samp> pour les résultats d’exemple tels que Enregistrement réussi.

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

Adresse

Utilisez <address> pour les coordonnées ou les informations de lieu, 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 tout en offrant suffisamment de texte pour tester le retour à la ligne, les liens et la mise en forme en ligne.

Liste non ordonnée avec étapes ordonnées

• Comparez les produits avec attention. Commencez par un autre arbre vedette, puis examinez les détails les plus importants pour l’usage prévu.
• Planifiez le parcours d’achat. Un élément de liste peut inclure des étapes ordonnées imbriquées :
  1. Confirmez les exigences de taille, de matériau ou de style.
  2. Consultez les contenus complémentaires, notamment les FAQ et les pages consacrées aux politiques.
  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 :
   • Surlignez les termes clés avec parcimonie.
   • Utilisez <code> pour les libellés ou extraits littéraux.
   • Incluez du texte en gras ou mis en évidence uniquement lorsque cela aide le lecteur.
3. Terminez la section par une idée claire pour la suite, et non par un fragment sans issue.

Citations et encadrés

Utilisez les citations en bloc pour les textes sourcés, 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 Verdant

Utilisez class="pullquote" lorsqu’une citation doit bénéficier d’une mise en avant 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 présenter le positionnement de la légende en bas et en haut.

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 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 aux contenus variés afin que les lecteurs puissent comparer rapidement les détails.

Comparaison d’arbres d’exemple

Caractéristique	Option standard	Option vedette	Notes
Lien principal	Produit un	Produit deux	Les liens dans les cellules d’un tableau doivent rester faciles à identifier et à sélectionner.
Pertinence éditoriale	Description courte avec une légère emphase.	Description plus longue qui s’étend sur plusieurs lignes et comprend du texte important pour l’expression principale.	Utilisez des cellules de longueurs variées pour vérifier l’alignement et l’espacement.
Détails d’entretien	Spot clean	Professional care recommended	Le code en ligne peut identifier des libellés littéraux, des étiquettes d’entretien ou des spécifications compactes.
Disponibilité	Limitée	Disponible en ligne et dans la boutique phare.	Les cellules d’un tableau peuvent inclure des surlignages, des liens et des indications de longueur équivalente à une phrase.

Liste de définitions

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

Paragraphe d’introduction

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

Légende

Utilisez class="caption" pour les légendes de figure 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 trees</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>

Sections dépliantes

Utilisez <details> et <summary> pour le 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 titre supplémentaire. 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é dont le contexte complémentaire reste à traiter.

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