Guide de style

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

Utilisez class="intro" pour un texte d’ouverture 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 corps du texte.

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

Texte éditorial

Les pages éditoriales peuvent combiner une importance forte, de l’emphase, du texte supprimé, des termes mis en évidence et l’élément inline code-style labels 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 brèves références techniques.

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

Échelle des titres

Les titres doivent former 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 illustrations

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 Darkroom Journal, <var> pour des variables comme n, et <samp> pour un résultat d’exemple tel que Enregistrement réussi.

Les exemples inline 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 localisation, et non pour un format postal général.

Boutique phare
123 Example Avenue
New York, NY 10001
Voir les points de vente

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 les produits avec attention. Commencez par une autre illustration 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 contenir des étapes ordonnées imbriquées :
  1. Confirmez les exigences de taille, de matériau ou de style.
  2. Consultez le contenu complémentaire, notamment les FAQ et les pages de politiques.
  3. Choisissez l’option qui équilibre le mieux l’ajustement, 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. Étayez le point principal avec des détails utiles :
   • Mettez en évidence les termes clés avec parcimonie.
   • Utilisez <code> pour les libellés ou extraits littéraux.
   • Incluez du gras ou du texte mis en évidence uniquement lorsque cela 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 textes provenant d’une source, les témoignages, les extraits éditoriaux ou les affirmations qui doivent être visuellement séparées de la prose environnante.

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

Équipe éditoriale Darkroom

Utilisez class="pullquote" lorsqu’une citation doit être davantage mise en avant qu’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 illustrer 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 contenir des titres utiles et des cellules aux contenus variés afin que les lecteurs puissent comparer rapidement les détails.

Comparaison d’illustrations

Caractéristique	Option standard	Option vedette	Notes
Lien principal	Produit un	Produit deux	Les liens dans les cellules de tableau doivent rester faciles à identifier et à sélectionner.
Pertinence éditoriale	Description courte avec une emphase légère.	Description plus longue qui s’étend sur plusieurs lignes et comprend du texte important pour la phrase essentielle.	Utilisez des cellules de longueurs variées pour vérifier l’alignement et les espacements.
Détails 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 de tableau peuvent contenir des mises en évidence, des liens et des indications de longueur de phrase.

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ù les espacements et les retours à la ligne sont importants.

<section>
  <h2>Care notes for artwork</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épliables

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’une séparation thématique est plus claire qu’un nouveau titre. Les cases à cocher peuvent apparaître dans du contenu de type tâche lorsque la page doit afficher 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, agréable à lire et cohérent dans toute l’expérience Darkroom.