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 elle présente la plupart des éléments courants dont vous pourriez avoir besoinF

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, de l’emphase, du texte supprimé, des termes mis en évidence et un élément intégré code-style labels sans nuire au rythme.

Utilisez <mark> pour attirer l’attention sur une phrase, <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 sur les règles applicables.

É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.

Titre de niveau un pour les soins de la peau

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 intégrée

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 les sources comme The Align Journal, <var> pour les variables comme n, et <samp> pour les sorties d’exemple telles que Enregistrement réussi.

Les exemples intégrés 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 une mise en forme postale générale.

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

Listes

Les listes doivent faciliter le parcours des indications tout en permettant suffisamment de texte pour tester le retour à la ligne, les liens et la mise en forme intégrée.

Liste non ordonnée avec étapes ordonnées

• Comparez les produits avec attention. Commencez par un autre produit de soin mis 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 inclure des étapes ordonnées imbriquéesF
  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 règles applicables.
  3. Choisissez l’option qui équilibre le mieux la coupe, la finition et la disponibilité.
• Utilisez une formulation concise, mais ajoutez suffisamment de contexte pour que chaque élément reste compréhensible lors d’une lecture rapide.

Liste ordonnée avec remarques non ordonnées

1. Présentez l’objectif de la page dans un paragraphe clair avec un lien pertinent.
2. Étayer le point principal avec des détails utilesF
   • Mettez en évidence les termes clés avec parcimonie.
   • Utilisez <code> pour les libellés ou extraits littéraux.
   • Utilisez du texte en gras ou 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 déclarations qui nécessitent une séparation visuelle du texte environnant.

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

Équipe éditoriale Align

Utilisez class="pullquote" lorsqu’une citation doit bénéficier d’une emphase visuelle plus forte 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 présenter un positionnement de légende inférieur et supérieur.

Vidéo hébergée

Utilisez l’élément <video> standard pour le 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 inclure des titres utiles et des cellules au contenu varié afin que les lecteurs puissent comparer rapidement les détails.

Comparaison de produits de soin de la peau

Caractéristique	Option standard	Option mise en avant	Remarques
Lien principal	Produit un	Produit deux	Les liens dans les cellules d’un tableau doivent rester faciles à identifier et à sélectionner.
Pertinence éditoriale	Courte description avec une emphase légère.	Une description plus longue qui s’étend sur plusieurs lignes et inclut du texte important pour la phrase essentielle.	Variez la longueur des cellules pour vérifier l’alignement et les espacements.
Détail d’entretien	Spot clean	Professional care recommended	Le code intégré peut identifier des libellés littéraux, des consignes d’entretien ou des caractéristiques compactes.
Disponibilité	Limitée	Disponible en ligne et dans la boutique phare.	Les cellules d’un tableau peuvent inclure des éléments mis en évidence, 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 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 longs où les espacements et les retours à la ligne sont importants.

<section>
  <h2>Care notes for skincare</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 règles denses, les informations d’entretien, les conseils sur les tailles 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 nouveau 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 Align.