Guide de style

Création de contenu

Avant de créer du contenu, les créateurs de contenu et les fournisseurs de contenu doivent comprendre ce qui suit et s'y conformer :

Accessibility guideline: Provides content authors and webmasters with an understanding of how to create and code content so that is accessible to all users.
Principes de création du contenu: Renseignements liés au contenu (développement, architecture, structure, style et flux), et comparaison entre l'impression et le Web.
Guide de rédaction du contenu du site Canada.ca: Comprend les lignes directrices sur la rédaction, la qualité du langage, la terminologie, le langage clair et simple et les produits connexes.

Conception et mise en page

Les composantes suivantes ont été documentées. Elles comprennent ce qui suit :

Éléments structurels HTML (en-têtes, listes, tableaux, images et ainsi de suite)
Fonctions visant à améliorer la conception de sections individuelles d'une page (onglets, alertes, panneaux et ainsi de suite)
Solutions destinées à prendre en charge les anciens navigateurs avec des fonctions natives des navigateurs modernes (afficher et cacher, barre de progrès et ainsi de suite)
Fonctions visant à améliorer la fonctionnalité d'une page (Ajax, expiration de la session et ainsi de suite)

Consultez : Exemples pratiques pour plus de détails.

Éléments de conception
Option de conception	Description	Mots clés	Exemple	Relatif à	Catégorie	Fonctions
Positionnement absolu	L'utiliser pour positionner un élément de contenu par-dessus un autre élément de contenu.	Balises : Liens	Lien au-dessus de l'image	Style CSS	Structure et mise en forme	Positionnement absolu
Ajax	L'utiliser pour permettre à des parties d'une page Web d'être chargées ou mises à jour sur une seconde page Web (réutilisation de contenu).	Balises : Technologie, Dynamique	Aucune prévisualisation rapide n'est disponible. Pour voir cette fonction en action, allez à sa page thématique.	Plugiciels
Alertes	L'utiliser pour fournir des messages de rétroaction contextuelle pour les actions typiques des utilisateurs. Choisir parmi quelques messages d'alerte disponibles et flexibles.	Balises : Couleur	Alerte Info Avertissement Danger	Style CSS	Mise en évidence	Alertes
Alignement	L'utiliser pour aligner le texte à gauche, au centre ou à droite. Ou bien, l'utiliser pour aligner un bloc de contenu ou une image au centre.	Balises : Position	Texte aligné à gauche Texte ou image alignés au centre Texte aligné à droite	Style CSS	Structure et mise en forme	Alignement
Information archivée	L'utiliser pour aider les utilisateurs à déterminer les pages Web qui ont été archivées en ligne.	Balises : Contenu superposé, Invisible, Visible, Montrer, Caché, Fermer, Sortir	Aucune prévisualisation rapide n'est disponible. Pour voir cette fonction en action, allez à sa page thématique.	Plugiciels
Badges	Utiliser les badges (indicateurs numériques) pour mettre en surbrillance le nombre de mises à jour et les éléments nouveaux ou non lus qui sont associés à un lien.	Balises : Liens	Texte de lien 42 Texte de lien 20 Texte de lien 5	Style CSS	Mise en évidence	Badges
Bordures	Les utiliser pour ajouter une ou plusieurs bordures à des éléments de conception afin de séparer ou d'attirer l'attention sur des éléments de contenu. Les utiliser aussi pour retirer les bordures par défaut ou rendre plus nets les coins qui apparaissent dans des composantes de conception comme le « well » (puit).	Balises : Règle horizontale (hr)	Bordure de gauche Bordure de droite Bordure du haut Bordure du bas	Style CSS	Effets de base	Bordures
Boutons	Utilisez les boutons pour créer un appel à l'action qui incite l'utilisateur à présenter du contenu à partir d'un formulaire. De plus, utilisez les boutons pour emmener les utilisateurs vers une page Web qui présente des renseignements supplémentaires.	Balises : Couleurs, Liens		Style CSS	Effets de base,Menu et navigation,Mise en évidence	Boutons
Calendrier d'événements	Utilisez l'interface du calendrier d'événements pour explorer une liste chronologique d'événements.	Balises : Tableaux	Aucune prévisualisation rapide n'est disponible. Pour voir cette fonction en action, allez à sa page thématique.	Plugiciels
Carrousel	Utiliser un carrousel pour parcourir des éléments de contenu à l'aide d'onglets ou passer d'un élément à l'autre dans un format de diaporama.	Balises : Onglets, Invisible, Montrer, Cacher, Visible, Images, Barre de défilement, Liens, Détails, Sommaire, Afficher	Aucune prévisualisation rapide n'est disponible. Pour voir cette fonction en action, allez à sa page thématique.	Plugiciels
Graphiques	Les utiliser pour générer dynamiquement des graphiques à partir d'un tableau.	Balises : Tableaux	Aucune prévisualisation rapide n'est disponible. Pour voir cette fonction en action, allez à sa page thématique.	Plugiciels
Code	L'utiliser pour émuler le code source et l'afficher dans une police de caractères à espacement fixe.	Balises : Codage	`<div class="container-fluid"> <div class="row"> ... </div> </div>`	Style CSS	Effet textuel	Code
Code « prettify »	L'utiliser pour fournir une syntaxe et mettre en surbrillance des extraits de code source dans une page HTML.	Balises : Codage	`<div class="container-fluid"> <div class="row"> ... </div> </div>`	Plugiciels
Couleur	Utilisez la couleur comme élément de présentation à des fins décoratives dans le but de transmettre des renseignements.	Balises : Arrière-plan	Muet Primaire Primaire Succès Succès Info Info Avertissement Avertissement Danger Danger	Style CSS	Effets de base	Couleur
Identificateur de pays	Utilisez un identificateur de pays, un enveloppeur simple pour AjaxLoader, afin d'insérer du contenu téléchargé via Ajax, selon le pays d'un visiteur (déterminé par Free Geo IP (disponible en anglais seulement) (lien externe)).	Balises : Lieu	Aucune prévisualisation rapide n'est disponible. Pour voir cette fonction en action, allez à sa page thématique.	Plugiciels
Data inview	Utilisez Data inview pour afficher une superposition lorsqu'une section se déplace en dehors de l'espace d'affichage.	Balises : Contenu superposé, Invisible, Visible, Montrer, Caché, Fermer, Sortir	Aucune prévisualisation rapide n'est disponible. Pour voir cette fonction en action, allez à sa page thématique.	Plugiciels
Data picture	L'utiliser pour permettre à une page Web de préciser des sources d'images différentes à afficher, selon les requêtes de médias.	Balises : Images	Aucune prévisualisation rapide n'est disponible. Pour voir cette fonction en action, allez à sa page thématique.	Plugiciels
DataTables	L'utiliser pour enrichir un tableau de données et permettre le tri, le filtrage, la recherche, la pagination et d'autres fonctions du genre.	Balises : Paginer	Aucune prévisualisation rapide n'est disponible. Pour voir cette fonction en action, allez à sa page thématique.	Plugiciels
Datalist (saisie automatique)	L'utiliser pour ajouter une fonction de saisie automatique à des zones de saisie particulières; affiche dynamiquement une liste de mots qui correspondent à un élément « datalist ».	Balises : Formulaires	( Astuce : Tapez « w », et des municipalités s'afficheront.) Municipalité	Plugiciels
Datalist (saisie automatique) − Dynamique	L'utiliser pour mettre à jour le contenu d'un élément « datalist » de façon dynamique, selon la saisie de l'utilisateur.	Balises : Formulaires	Aucune prévisualisation rapide n'est disponible. Pour voir cette fonction en action, allez à sa page thématique.	Plugiciels
Sélecteur de date	L'utiliser pour fournir une interface permettant de sélectionner une date dans un formulaire.	Balises : Saisie, Formulaires	Aucune prévisualisation rapide n'est disponible. Pour voir cette fonction en action, allez à sa page thématique.	Plugiciels
Contenu écartable	L'utiliser pour rendre du contenu écartable par les utilisateurs. Il ne s'agit pas de la même chose que la fonction Afficher/masquer, puisque le contenu disparaît jusqu'à ce que l'utilisateur supprime les témoins de son navigateur.	Balises : Visible, Invisible, Montrer, Cacher,	Contenu écartable A Contenu statique régulier Contenu écartable B Contenu statique régulier	Plugiciels
Égalisation (égalisation des hauteurs)	L'utiliser pour appliquer la même hauteur à des cellules de grille. Fait en sorte que les éléments intérieurs (panneaux, wells et ainsi de suite) héritent de la hauteur de la grille parent.	Balises : Panneaux, Wells, Bordures	Colonne 1 Colonne 1 Colonne 2 Colonne 2 Colonne 2	Plugiciels
Agrandir et dissimuler « affichable/masquable »	L'utiliser pour créer des widgets affichages et masquables repliables qu'un utilisateur peut sélectionner pour montrer ou cacher du contenu.	Balises : Basculer, Liens	Exemple 1 Le contenu va ici Exemple 2 Le contenu va ici	Plugiciels
Favoricône	Utilisez ce plugiciel pour avoir la capacité d'ajouter et de mettre à jour un favoricône pour une page Web.	Balises : Branding	Aucune prévisualisation rapide n'est disponible. Pour voir cette fonction en action, allez à sa page thématique.	Plugiciels
Formulaire de rétroaction	Utilisez cette composante pour permettre aux utilisateurs de soumettre leur rétroaction sur une page Web particulière ou sur le site Web en général.	Balises : Formulaires, Saisie, Soumettre	Aucune prévisualisation rapide n'est disponible. Pour voir cette fonction en action, allez à sa page thématique.	Plugiciels
Fils de syndication	Utilisez un widget de fil de syndication pour regrouper et afficher les entrées d'un ou plusieurs fils de syndication sur une page Web. Les formats pris en charge sont Atom, RSS et Media RSS.	Balises : Listes, Liens	Aucune prévisualisation rapide n'est disponible. Pour voir cette fonction en action, allez à sa page thématique.	Plugiciels
Éléments flottants	Utilisez un élément flottant pour changer le flux normal d'un élément. Repoussez l'élément à gauche ou à droite de son contenu, où le texte et les éléments incorporés l'enveloppent.	Balises : Alignement	Flottement à gauche Flottement à droite	Style CSS	Structure et mise en forme	Éléments flottants
Notes de bas de page	Utilisez une note de bas de page pour indiquer une référence, une citation ou un commentaire qui expose des détails à propos de quelque chose sur cette page. Il s'agit de contenu non critique qui se rapporte au texte principal, et il figure toujours en bas de page.	Balises : Liens	Le corps du texte ici ^{note de bas de page 1}. Note de bas de page 1 Exemple d'une note de bas de page standard. Retour au point d'accès de la note de bas de page 1	Plugiciels
Formulaires	Les utiliser pour recueillir et transmettre, dans un format prédéfini, de l'information venant d'utilisateurs.	Balises : Saisie, Étiquette, Bouton, Soumettre, Bouton radio, Boîtier de sélection, Zone de texte, Taille	Adresse de courriel Mot de passe	Style CSS	Effets de base	Formulaires
Validation des formulaires	L'utiliser pour fournir des messages de validation et d'erreur génériques qui portent sur les formulaires Web.	Balises : Saisie, Étiquette, Bouton, Soumettre, Validation	Adresse de courriel (requis) Mot de passe (requis)	Plugiciels
Géocarte	Utilisez une géocarte pour afficher une carte dynamique et superposer de l'information venant de sources supplémentaires.	Balises : Emplacement, Dynamique	Aucune prévisualisation rapide n'est disponible. Pour voir cette fonction en action, allez à sa page thématique.	Plugiciels
Grilles	Utilisez un système de grilles (une série de rangées et de colonnes qui abritent du contenu) pour créer des mises en page.	Balises : Réactif	3/4 1/4 1/2 1/2 1/3 1/3 1/3	Style CSS	Structure et mise en forme	Grilles
En-têtes	Utilisez un en-tête pour appliquer un titre à une section de contenu qui la suit immédiatement. Les en-têtes sont de gros caractères gras qui sont concis et de nature hiérarchique.	Balises : Taille	h1 en-tête h2 en-tête h3 en-tête h4 en-tête h5 en-tête h6 en-tête	Style CSS		En-têtes
Icônes	Utilisez l'un des deux ensembles d'icônes, Glyphicons ou Font Awesome, à des fins décoratives. Les icônes sont des glyphes – des polices fondées sur une image, de façon semblable à Wingdings. Contrairement aux polices traditionnelles, elles ne transmettent aucun sens. Par conséquent, du vrai texte doit accompagner l'icône pour veiller au respect des exigences en matière d'accessibilité. Rendez le texte visible ou invisible, pourvu qu'il soit présent.	Balises : Glyphicons, Font Awesome, Couleur	... et des centaines d'autres	Style CSS	Effets de base	Icônes
Images	Utilisez des images pour représenter visuellement un nom (une personne, un lieu ou une chose) ou un verbe (une action). Une image est un artéfact visuel à deux dimensions statique qui est un type de contenu non textuel. Elle est classifiée comme un élément décoratif, simple ou complexe, ou encore comme une image de texte.	Balises : Miniatures, Réactif, Photos		Style CSS	Effets de base	Images
Jumbotron	A lightweight, flexible component that can optionally extend the entire viewport to showcase key content on your site.	Balises : Couleur, Alertes	Bonjour le monde	Style CSS	Mise en évidence	Jumbotron
Contenu invisible et visible	Utilisez-le pour montrer ou cacher du contenu – tout dépend de ce que vous voulez accomplir. Il y a des styles propres aux technologies adaptées (aide aux utilisateurs de lecteur d'écran), à la conception réactive (vue à partir d'appareils petits ou grands), à l'usage général (utilisation d'onglets de basculement) et à l'impression (impression de l'information nécessaire seulement).	Balises : Impression, Réactif, Caché	Aucune prévisualisation rapide n'est disponible. Pour voir cette fonction en action, allez à sa page thématique.	Style CSS	Effets de base	Contenu invisible et visible
Touches de clavier	Les utiliser pour imiter les touches d'un clavier d'ordinateur.	Balises : Code	Appuyez sur `Maj` Appuyez sur `Ctrl` Appuyez sur `Entrée`	Style CSS	Effet textuel	Touches de clavier
Étiquettes	Utilisez l'étiquette appropriée pour décrire et mettre en surbrillance l'information textuelle (non numérique).	Balises : Couleur	Texte Défaut Texte Primaire Texte Succès Texte Info Texte Avertissement Texte Danger	Style CSS	Mise en évidence	Étiquettes
Liens	Utilisez un lien (texte et/ou image) pour emmener un utilisateur à une autre page Web, pour passer à un autre emplacement dans la même page Web ou pour exécuter une fonction de contrôle par l'utilisateur déterminée par le langage de script côté client (JavaScript).	Balises : Hyperlien	Texte de lien	Style CSS	Effet textuel	Liens
Regroupement de liste	Utilisez des composantes regroupement de liste pour contenir des éléments de contenu connexes.	Balises : Liens, Badges, Couleur	14 Texte de lien 2 Texte de lien Texte de lien (élément actif) Texte de lien	Style CSS	Menu et navigation	Regroupement de liste
Listes	Les utiliser pour afficher un nombre d'éléments reliés de façon consécutive. Habituellement, les éléments d'une liste s'affichent l'un en dessous de l'autre.	Balises : Ordonné, Désordonné, Définition	Élément Élément Sous-élément Élément Élément Sous-élément Élément Description de l'élément	Style CSS	Effet textuel	Listes
MathML	L'utiliser pour afficher des formules mathématiques (et non des variables dans une phrase) à l'aide de MathML.	Balises : Calculs	$x = \frac{- b \pm \sqrt{b^{2} - 4 a c}}{2 a}$ ou $3 x 4 = 12$	Plugiciels
Pills	Utiliser pour styliser une liste de navigation et pour apporter de l'attention sur un lien actif.	Balises : Liste	Aucune prévisualisation rapide n'est disponible.	Style CSS	Menu et navigation	Pills
Proximité des marges	L'utiliser pour augmenter ou diminuer la proximité d'un objet par rapport à un autre. Cela vient modifier les espaces blancs entre deux éléments afin d'indiquer si les éléments sont liés ou non. De plus, ces classes permettent à des éléments de contenu figurant et ne figurant pas dans une grille d'exister dans la même rangée.	Balises : Espacement	Proches l'un de l'autre Proches l'un de l'autre Éloignés l'un de l'autre Éloignés l'un de l'autre	Style CSS	Structure et mise en forme	Proximité des marges
Meter	L'utiliser pour afficher une valeur dans une gamme lorsqu'il y a une valeur minimale et une valeur maximale connues (par exemple, la hauteur de quelque chose).	Balises : Couleur, Alertes, Barre de progrès	75 % (normal) 90 % (trop haut) 15 % (trop bas)	Plugiciels
Fenêtre modale (lightbox)	Utilisez une fenêtre modale pour de l'information qui reste devant la fenêtre originale.	Balises : Liens, Boutons, Invisible, Montrer, Cacher, Visible, Fermer, Sortir	Lancer la fenêtre modale Titre Contenu ici	Plugiciels
Lecteur multimédia	L'utiliser pour fournir un lecteur multimédia accessible afin d'intégrer du contenu vidéo et audio à des pages Web.	Balises : Vidéo, Audio, YouTube	Aucune prévisualisation rapide n'est disponible. Pour voir cette fonction en action, allez à sa page thématique.	Plugiciels
Opacité	L'utiliser pour modifier l'opacité d'un élément.	Balises : Images		Style CSS	Effets de base	Opacité
Contenu superposé	L'utiliser pour positionner un élément devant un autre.	Balises : Liens, Boutons, Invisible, Montrer, Cacher, Visible, Fermer, Sortir	Lancer la superposition Panneau de gauche Bonjour! Je suis une superposition et je peux m'afficher à gauche, en haut, en bas ou à droite.	Plugiciels
Pagination	Utilisez un index de pagination pour les documents longs qu'il est préférable de diviser en plusieurs pages. Un utilisateur peut sélectionner une page particulière dans un document à l'aide des fonctions « Suivant » ou « Précédent », ou (s'ils sont présents) des hyperliens de navigation numériques.	Balises : Buttons, Liens, Couleur	Précédent 1 2 3 Suivant Précédent Suivant	Style CSS	Menu et navigation	Pagination
Panneaux	Les utiliser pour créer un groupement visuel de contenu. Les panneaux ont des options de couleur par thème, en plus d'offrir un en-tête et un pied de page distincts.	Balises : Couleur, Alerte	Titre primaire Contenu Titre de succès Contenu Titre d'info Contenu Titre d'avertissement Contenu Titre de danger Contenu	Style CSS	Mise en évidence	Panneaux
Barre de progrès et mesure	La barre de progression est utilisée pour fournir une rétroaction à jour sur la progression d'un flux de travail ou d'une action. Le compteur est utilisé pour afficher une valeur dans une plage lorsqu'il existe une valeur minimale et maximale connue (mesure scalaire).	Tags:	Aucune prévisualisation rapide n'est disponible.	Style CSS	Mise en évidence	Barre de progrès et mesure
Barre de progrès	L'utiliser pour afficher les progrès d'une tâche.	Balises : Couleur, Alertes, Meter	22 % 66 %	Plugiciels
Citations	Utilisez les citations pour reprendre un groupe de mots prononcés par quelqu'un d'autre que l'auteur ou le conférencier d'origine.	Balises : Blockquote	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Quelqu'un de connu dans Titre source	Style CSS	Effet textuel	Citations
Redistribution du contenu autour de grilles	L'utiliser pour redistribuer et envelopper du contenu qui ne figure pas dans une grille autour et en dessous d'une cellule de grille (boîte de contenu).	Balises : Grilles, Éléments flottants, Alignement	Flottement à droite Redistribution du contenu autour de grilles. Redistribution du contenu autour de grilles. Redistribution du contenu autour de grilles. Redistribution du contenu autour de grilles. Redistribution du contenu autour de grilles. Redistribution du contenu autour de grilles. Redistribution du contenu autour de grilles.	Style CSS	Structure et mise en forme	Redistribution du contenu autour de grilles
Secondary Menu	Provides an interactive secondary menu.	Tags: Menu, List groups, Links/td>	No quick preview available. To see this feature in action, go to its topic page.	Plugins
Expiration de la session	L'utiliser pour offrir une fonctionnalité d'expiration de session et d'expiration en raison de l'inactivité.	Balises : Fermer, Sortir	Aucune prévisualisation rapide n'est disponible. Pour voir cette fonction en action, allez à sa page thématique.	Plugiciels
Widget partager	L'utiliser pour permettre aux utilisateurs de partager rapidement du contenu avec leurs réseaux.	Balises : Liens, Icônes, Twitter, YouTube		Plugiciels
Redimensionnement	L'utiliser pour écraser la taille par défaut d'un élément de texte (rendre le texte grand ou petit).	Balises : En-têtes	Taille h1 Taille h2 Taille lead Taille h3 Taille h4 Taille h5 Taille h6 Petite taille	Style CSS	Effet textuel	Redimensionnement
Barre coulissante (gamme)	L'utiliser pour afficher une barre coulissante.	Balises : Saisie		Plugiciels
Validateur de tableau	Utilisez cet outil d'édition Web pour produire des tableaux qui se conforment à Règles pour l'accessibilité des contenus Web 2.0. Cet outil contribue à déterminer les erreurs de relations dans un tableau complexe.	Balises : Validation	Aucune prévisualisation rapide n'est disponible. Pour voir cette fonction en action, allez à sa page thématique.	Plugiciels
Tableaux	Les utiliser pour organiser les données en rangées et en colonnes afin de créer des cellules de données.	Balises : Tabulaire, Zébrures, Survol, Couleur, Réactif	Aucune prévisualisation rapide n'est disponible. Pour voir cette fonction en action, allez à sa page thématique.	Style CSS	Effet textuel	Tableaux
Onglets	Les utiliser pour montrer plusieurs aspects d'éléments de contenu connexes dans des panneaux différents, côte à côte.	Balises : Invisible, Montrer, Cacher, Visible, Liens Détails, Sommaire, Afficher	Onglet 1 Contenu 1 Onglet 2 Contentu 2 Onglet 3 Contenu 3	Plugiciels
Effet d'édition de texte	On les utilise pour indiquer les éditions de texte sur une page. Nouveau	Balises : Éditions de texte	Ceci est du texte marqué. Ceci est du ~~texte supprimé~~. Ceci est du ~~texte barré~~. N'utilisez pas le texte inséré. N'utilisez pas le texte souligné.	Style CSS	Effet textuel	Édition de texte
Mise en surbrillance de texte	L'utiliser pour mettre du texte en surbrillance dans une section prédéfinie qui correspond à des critères de recherche non sensibles à la casse, précisés dans la chaîne de requête de l'URL.	Balises : Couleur	Aucune prévisualisation rapide n'est disponible. Pour voir cette fonction en action, allez à sa page thématique.	Plugiciels
Thème : Base	Utilisez le modèle de thème de base pour faciliter la création de nouveaux thèmes.	Balises : Core	Aucune prévisualisation rapide n'est disponible. Pour voir cette fonction en action, allez à sa page thématique.	Thèmes
Thème : Canada.ca	Utilisez le modèle de thème du Canada.ca pour répondre aux exigences en matière de mise en page et de mise en forme pour les pages Canada.ca.	Balises : Gouvernement du Canada	Aucune prévisualisation rapide n'est disponible. Pour voir cette fonction en action, allez à sa page thématique.	Thèmes
Thème : Intranet du gouvernement du Canada	Utilisez le modèle de thème d'intranet du gouvernement du Canada pour adapter le thème de convivialité du gouvernement du Canada aux sites intranet.	Balises : Gouvernement du Canada	Aucune prévisualisation rapide n'est disponible. Pour voir cette fonction en action, allez à sa page thématique.	Thèmes
Thème : Plate-forme de gouvernement ouvert (PGO)	Utilisez le modèle de la Plate-forme de gouvernement ouvert (PGO) pour prendre en charge le thème de la PGO.	Balises : India, États-Unis	Aucune prévisualisation rapide n'est disponible. Pour voir cette fonction en action, allez à sa page thématique.	Thèmes
Thème : Boîte à outils de l'expérience Web (BOEW)	Utilisez le modèle du thème de la Boîte à outils de l'expérience Web pour donner un exemple d'un thème de base mis en œuvre.	Balises : Core	Aucune prévisualisation rapide n'est disponible. Pour voir cette fonction en action, allez à sa page thématique.	Thèmes
Galerie de miniatures et de photos (lightbox)	L'utiliser pour afficher des images dans une lightbox, individuellement ou dans le cadre d'une galerie.	Balises : Images, Invisible, Montrer, Cacher, Visible, Liens	Une image Galerie	Plugiciels
Basculer	L'utiliser pour faire basculer des éléments entre les états activé et désactivé, avec une seule section de développée à la fois, la section précédente se repliant automatiquement.	Balises : Afficher, Cacher, Visible, Invisible, Montrer, Cacher, Accordéon	Exemple 1 Contenu Exemple 2 Contenu Exemple 3 Contenu	Plugiciels
Transitions	Les utiliser pour créer une transition de contenu avec des états facultatifs (apparition et disparition en fondu, glissement à droite ou glissement à gauche).	Balises : Effets	Aucune prévisualisation rapide n'est disponible. Pour voir cette fonction en action, allez à sa page thématique.	Plugiciels
Chronologie intégrée Twitter	L'utiliser pour mettre en oeuvre et intégrer des chronologies Twitter.	Balises : Widget Partager	Aucune prévisualisation rapide n'est disponible. Pour voir cette fonction en action, allez à sa page thématique.	Plugiciels
Variables	Les utiliser lorsque l'on fait référence à une variable comme « x », « n » ou « y » dans une phrase (expression non mathématique). Nouveau	Balises : Calculs	Sur `n` années, l'augmentation des paiements est de `x`.	Style CSS	Effet textuel	Variables
Variante : Drupal	L'utiliser pour adapter la BOEW afin d'être utilisée avec Drupal.	Balises : Technologie	Aucune prévisualisation rapide n'est disponible. Pour voir cette fonction en action, allez à sa page thématique.	Variants
Variante : Jekyll	L'utiliser pour adapter la BOEW afin d'être utilisée avec Jekyll.	Balises : Technologie	Aucune prévisualisation rapide n'est disponible. Pour voir cette fonction en action, allez à sa page thématique.	Variants
Variante : PHP	L'utiliser pour adapter la BOEW afin d'être utilisée avec PHP.	Balises : Technologie	Aucune prévisualisation rapide n'est disponible. Pour voir cette fonction en action, allez à sa page thématique.	Variants
Variante : SSI	L'utiliser pour adapter la BOEW afin d'être utilisée avec SSI.	Balises : Technologie	Aucune prévisualisation rapide n'est disponible. Pour voir cette fonction en action, allez à sa page thématique.	Variants
Variante : WordPress	L'utiliser pour adapter la BOEW afin d'être utilisée avec WordPress.	Balises : Technologie	Aucune prévisualisation rapide n'est disponible. Pour voir cette fonction en action, allez à sa page thématique.	Variants
Boîte grisonné	Les utiliser pour mettre un élément de contenu en évidence en le plaçant dans une case de couleur gris clair.	Balises : Couleur, Alertes	Regardez, je suis dans un puits! Regardez, je suis dans un petit puits!	Style CSS	Mise en évidence	Boîte grisonné
Envelopper et tronquer le texte	Les utiliser pour empêcher que du texte retourne à la ligne suivante.	Balises : Break	Défaut : Lorem ipsum dolor sit amet, consectetur 30 avril. Avec `.nowrap` : Lorem ipsum dolor sit amet, consectetur 30 avril. Avec `.wb-elps` : Lorem ipsum dolor sit amet, consectetur 30 avril.	Style CSS	Effet textuel	Envelopper et tronquer le texte
Zébrures (technique avancée)	L'utiliser afin de fournir des rayures blanches et grises de remplacement pour des rangées de tableau dans des directions horizontales ou multiples. Cela contribue à relier visuellement des données horizontales à des données verticales.	Balises : Tables	Aucune prévisualisation rapide n'est disponible. Pour voir cette fonction en action, allez à sa page thématique.	Plugiciels