Éléments

Tout le contenu de votre page est construit à partir d'éléments — des blocs de construction HTML qui structurent, regroupent et affichent le contenu.

Les éléments proviennent du panneau Blocs dans la barre latérale gauche. Glissez n'importe quel bloc sur le canevas pour l'ajouter. Chaque bloc crée un élément HTML avec une balise par défaut (par ex., <div>, <p>, <img>). Après avoir placé un élément, vous pouvez changer sa balise avec le menu déroulant Tag name : sélectionnez l'élément, puis ouvrez les réglages de l'élément (icône engrenage en haut du panneau de droite). Par défaut, ce panneau affiche les styles : le Tag name n'apparaît qu'une fois les réglages ouverts.

Considérez les éléments à la fois comme un outil visuel (ils apparaissent sur votre page) et un outil sémantique (ils indiquent aux navigateurs et aux lecteurs d'écran quel type de contenu ils contiennent). Utiliser le bon type d'élément rend votre site accessible aux technologies d'assistance et améliore la compréhension de votre contenu par les moteurs de recherche.

Ajouter des éléments

Pour ajouter un élément à votre page :

1. Ouvrez le panneau Blocs dans la barre latérale gauche
2. Glissez un bloc sur le canevas
3. Déposez-le où vous le souhaitez (directement sur le canevas ou dans un conteneur existant pour l'imbriquer)
4. Ajustez sa taille, son style et son contenu selon vos besoins

Vous pouvez ensuite changer la balise de l'élément en utilisant le menu déroulant Tag Name dans les réglages de l'élément (icône engrenage). Cela ne supprime pas l'élément ni ne perd de contenu — cela change uniquement la balise HTML.

Éléments conteneurs

Les conteneurs sont des éléments qui contiennent d'autres éléments. Ils constituent l'ossature structurelle de vos mises en page.

Container (div) — Le conteneur le plus flexible. Glissez le bloc « Container » depuis les Basiques. Il commence avec une hauteur minimale de 100px pour être visible sur le canevas.

N'importe quel conteneur peut être changé en l'une de ces balises sémantiques via le menu déroulant Tag Name :

Balise	Quand l'utiliser
div	Regroupement générique sans signification sémantique. À utiliser quand aucune autre balise ne convient.
section	Regroupement thématique de contenu, généralement avec un titre. Pour les sections de votre page.
article	Contenu autonome qui pourrait exister seul : article de blog, actualité, fiche produit.
nav	Un groupe de liens de navigation (menus, fil d'Ariane).
aside	Contenu indirectement lié au contenu principal : barres latérales, encadrés, liens connexes.
header	Contenu d'introduction ou aides à la navigation pour une page ou une section. Contient généralement le logo, le slogan ou la navigation.
footer	Contenu de pied de page : copyright, coordonnées, plan du site, liens sociaux.
main	Le contenu principal de la page. À utiliser une seule fois par page.
address	Coordonnées de l'auteur ou de l'organisation (adresse, téléphone, email).
blockquote	Un bloc de texte cité depuis une autre source. Devrait inclure une citation.
pre	Texte préformaté avec espaces et retours à la ligne préservés. Pour les blocs de code ou la poésie.
details	Un widget de divulgation (boîte dépliable) que les visiteurs peuvent ouvrir et fermer.
summary	Le titre visible d'un élément details. Toujours le placer comme premier enfant de details.

Voir HTML sémantique pour des conseils détaillés sur les conteneurs sémantiques et quand utiliser chacun.

Éléments de texte

Les éléments de texte contiennent du contenu lisible. Le bloc Text crée un div : changez sa balise en p pour un paragraphe, ou en titre.

Balise	Usage
p	Un paragraphe de texte courant.
h1	Le titre principal de la page. À utiliser une seule fois par page.
h2	Un titre de section majeure. Pour les sections de premier niveau.
h3	Un titre de sous-section sous un h2.
h4	Une sous-section sous un h3.
h5	Un titre mineur.
h6	Le plus petit niveau de titre.
span	Conteneur de texte en ligne. Pour styliser un mot ou une phrase dans un paragraphe sans créer de retour à la ligne.
label	Un libellé pour un champ de formulaire. Liez-le au champ en utilisant le champ For des réglages de l'élément.
button	Un bouton cliquable. Utile pour la soumission de formulaire ou le déclenchement d'interactions.

Pour ajouter du texte : glissez le bloc Text depuis le panneau Blocs. Il inclut 10px de Padding par défaut. Pour le transformer en titre, sélectionnez-le, puis utilisez le menu déroulant Tag Name dans les réglages de l'élément (icône engrenage) et choisissez dans le groupe « Headings ».

Voir HTML sémantique pour les bonnes pratiques sur la hiérarchie des titres.

Connecter les labels aux champs

Quand vous changez la balise d'un élément texte en label, un champ For apparaît dans les réglages de l'élément (icône engrenage). Entrez l'ID du champ de formulaire que ce label décrit. Cette connexion est essentielle pour l'accessibilité — les lecteurs d'écran annoncent « ce label appartient à ce champ », aidant les visiteurs à comprendre à quoi sert chaque champ.

Éléments de lien

Il n'y a pas de bloc Link : un élément devient un lien par le champ Link des réglages de l'élément (icône engrenage). Sélectionnez un Text, ou un Container pour rendre cliquable un groupe d'éléments, puis choisissez son Type et la destination :

• URL — site externe (par ex., https://example.com)
• Email — lien email (génère une URL mailto:)
• Page — lien interne vers une autre page de votre site (génère une URL relative ./nom-de-page.html)

L'élément devient un élément a (ancre).

Utilisez toujours le type Page pour les liens internes, pas une URL tapée à la main. Ainsi, si vous renommez une page, tous les liens se mettent à jour automatiquement.

Voir Pages pour les règles détaillées sur les liens internes.

Éléments médias

Les éléments médias affichent des images, vidéos, audio et contenu intégré.

Balise	Usage
img	Affiche un fichier image (PNG, JPG, SVG, WebP). Toujours inclure un texte alternatif.
video	Intègre un lecteur vidéo. Peut être en lecture automatique, muet, en boucle.
audio	Intègre un lecteur audio. Idéal pour les podcasts ou la musique.
iframe	Intègre une page externe ou un widget : cartes, vidéos, flux de réseaux sociaux.
embed	Intègre du contenu externe. Moins courant que iframe.
canvas	Une surface de dessin pour les scripts. Usage avancé uniquement.

Glissez les blocs Image, Video ou Map depuis le panneau Blocs. Voir Images et médias pour des conseils détaillés sur le texte alternatif, Object-Fit et la configuration des médias.

Éléments de liste

Les listes regroupent des éléments apparentés. Utilisez-les pour les menus de navigation, les listes de fonctionnalités, les instructions étape par étape, ou tout contenu logiquement groupé.

Balise	Usage
ul	Liste non ordonnée (à puces). Quand l'ordre n'a pas d'importance.
ol	Liste ordonnée (numérotée). Quand l'ordre est significatif (étapes, classements).
li	Un élément de liste à l'intérieur de ul ou ol.

Pour créer une liste :

1. Ajoutez un bloc Container
2. Changez sa balise en ul (ou ol pour une liste ordonnée)
3. Ajoutez des conteneurs enfants à l'intérieur
4. Changez chaque enfant en li
5. Ajoutez du texte ou autre contenu dans chaque li

Éléments de formulaire

Les formulaires collectent les saisies des visiteurs. Un formulaire est un élément form qui contient des éléments de saisie.

Balise	Usage
form	Un conteneur pour les contrôles de formulaire et la soumission. Définit l'action/méthode pour le traitement.
input	Champ texte sur une ligne, case à cocher, bouton radio, email, nombre, date, et plus.
textarea	Champ texte multi-lignes. Idéal pour les messages longs ou les commentaires.
select	Un menu déroulant. Contient des éléments option comme choix.
option	Un choix unique dans un menu déroulant select.
button	Soumet le formulaire ou déclenche du JavaScript. À placer dans le form.

Pour créer un formulaire :

1. Glissez le bloc Form depuis la catégorie Forms du panneau Blocs (form n'est pas dans la liste Tag name). Il arrive avec des champs d'exemple (Name, Email, Gender, Message) et un bouton Send : gardez ceux dont vous avez besoin, supprimez les autres.
2. Ajoutez d'autres champs avec les blocs Label, Input, Textarea, Select, Checkbox et Radio
3. Donnez à chaque champ un ID dans les réglages de l'élément (icône engrenage), et mettez cet ID dans le champ For de son label
4. Sélectionnez le bouton et mettez son Type à submit : le bouton du bloc Form est de type button, qui n'envoie pas le formulaire

Voir Publication : formulaires pour la soumission et la validation des formulaires.

Changer la balise d'un élément

Sélectionnez n'importe quel élément sur le canevas. Le panneau de droite s'ouvre sur les styles : ouvrez les réglages de l'élément (icône engrenage) pour trouver le menu déroulant Tag name. Les balises sont groupées par catégorie :

• Containers : div, span, p
• Headings : h1, h2, h3, h4, h5, h6
• Main document structure : main, section, article, nav, aside, header, footer
• Content grouping : address, blockquote, pre, time
• Lists : ul, ol, li
• Interactive/form : button, label, details, summary

Si un élément a une balise qui n'est pas dans ces groupes (comme form ou input), elle apparaît dans un groupe « Other ».

Changer la balise ne perd NI le contenu NI les styles. L'élément conserve son texte, ses enfants, ses styles et sa position. Seule la balise HTML change. Cela affecte la sémantique (comment les navigateurs et lecteurs d'écran interprètent l'élément) mais pas l'apparence visuelle.

Code personnalisé et shortcodes

Le bloc Custom code vous permet de coller du HTML, CSS ou JavaScript brut. Utilisez-le pour :

• Les codes d'intégration tiers (cartes, calendriers, widgets sociaux)
• Les scripts analytics
• Les styles ou fonctionnalités personnalisées que Silex n'offre pas comme bloc intégré

Le bloc Shortcode est destiné à l'intégration avec build awesome (propulsé par Eleventy). Il insère des shortcodes build awesome qui sont traités lors de la construction. Utilisez-le uniquement si votre site utilise le pipeline de publication build awesome.

Exemple pratique : construire une liste de fonctionnalités

Vous voulez trois fonctionnalités affichées côte à côte, chacune avec une icône et une description.

1. Créer la mise en page :
2. Ajoutez un Container, définissez la balise sur section
3. À l'intérieur, ajoutez un autre Container pour la rangée de fonctionnalités

4. Sélectionnez la rangée et, dans les styles, réglez Display sur flex (secteur Layout), puis Flex-direction sur row et Flex-wrap sur wrap (secteur Flexbox, qui apparaît une fois Display à flex)

5. Créer une carte de fonctionnalité :

6. Ajoutez un Container dans la rangée, définissez la balise sur article
7. Dans la zone du sélecteur, en haut du panneau de droite, cliquez sur + et tapez feature-card : la classe est ajoutée et devient la cible de vos styles
8. Tout de suite, réglez le Flex-basis de .feature-card sur 200px et son Flex-grow sur 1 (secteur Flexbox). Avant cela, l'article vide n'a aucune largeur dans la rangée flex et on ne peut rien y déposer. Si vous n'arrivez pas à le cliquer sur le canevas, sélectionnez-le dans le panneau Calques.
9. Ajoutez un bloc Image dans l'article pour l'icône (le gestionnaire d'images s'ouvre : téléversez ou choisissez votre icône)
10. Ajoutez un bloc Text en dessous, changez la balise en h3

11. Ajoutez un autre bloc Text pour la description et changez sa balise en p (un bloc Text commence en div)

12. Espacer la carte :

13. Ajoutez du Padding sur .feature-card (secteur Size)

14. Sur la rangée, réglez Column gap et Row gap (secteur Effects : il n'y a pas de champ gap unique)

15. Dupliquer la carte :

16. Sélectionnez l'article, cliquez sur Copy puis deux fois sur Paste dans la barre du haut (ou Ctrl+C, Ctrl+V), ou utilisez l'icône de duplication (deux carrés) de la petite barre au-dessus de l'élément sélectionné, ou Ctrl+D. Les copies ont la classe feature-card, elles partagent donc ses styles.

17. Mettez à jour l'icône (double-clic sur l'image), le titre et la description dans chacune

18. Vérifier la sémantique :

19. Section regroupe les fonctionnalités thématiquement
20. Chaque article est une fonctionnalité autonome
21. h3 fournit un titre clair pour chaque fonctionnalité

Erreurs courantes

• Utiliser div quand une balise sémantique conviendrait mieux. section, article, nav, header et footer aident les lecteurs d'écran et le SEO. Utilisez-les.
• Oublier le texte alternatif sur les images. Chaque image a besoin d'un texte alternatif descriptif. Si vous l'oubliez, les utilisateurs de lecteurs d'écran manquent complètement l'image.
• Imbriquer un h1 dans un h2. La hiérarchie des titres compte : h1 -> h2 -> h3. Ne sautez pas de niveaux.
• Créer des listes sans les balises ul/ol et li. Du texte stylisé qui ressemble à une liste perturbe les lecteurs d'écran. Utilisez les bonnes balises de liste.
• Ne pas labelliser les champs de formulaire. Les champs sans labels sont déroutants. Ajoutez toujours un label avec son champ « For » lié à l'ID du champ.

En savoir plus

• HTML sémantique — HTML sémantique et bonnes pratiques pour les titres
• Images et médias — texte alternatif, Object-Fit, configuration des médias
• Le modèle de boîte — espacer les éléments avec Margin et Padding
• Mise en page Flexbox — disposer les éléments côte à côte
• Améliorations de l'accessibilité — sur la feuille de route pour plus de fonctionnalités d'accessibilité intégrées

---

Avancé : éléments et composants GrapesJS

Chaque élément sur le canevas est un composant GrapesJS. Le panneau Blocs définit les types de composants disponibles. Silex enregistre un bloc « Container » (catégorie Basiques) qui crée un composant de type container avec la classe CSS par défaut silex-default-container pour le style de hauteur minimale. Les blocs « Text », « Image », « Video » et « Map » proviennent de grapesjs-blocks-basic ; Silex remplace les styles en ligne par des classes CSS.

Le menu déroulant Tag Name est un attribut personnalisé ajouté par le plugin sémantique à chaque type de composant. Cela permet à n'importe quel élément de changer sa balise. Les composants Image ont un traitement spécial : les attributs href et tag-name sont supprimés car les images doivent garder la balise img. Un attribut personnalisé src gère l'URL de l'image à la place.

Référence : toutes les balises dans le sélecteur Tag Name

Groupe	Balises
Containers	DIV, SPAN, P
Headings	H1, H2, H3, H4, H5, H6
Main document structure	MAIN, SECTION, ARTICLE, NAV, ASIDE, HEADER, FOOTER
Content grouping	ADDRESS, BLOCKQUOTE, PRE, TIME
Lists	UL, OL, LI
Interactive/form	BUTTON, LABEL, DETAILS, SUMMARY

Si un élément utilise une balise qui n'est pas dans ces groupes (par ex., FORM, INPUT, TEXTAREA, SELECT), elle apparaît sous un groupe « Other ».

---

Quiz

Q1 : Vous voulez une barre latérale avec des liens connexes à côté de votre contenu principal. Quelle balise le conteneur de la barre latérale devrait-il avoir ?

• A) div
• B) section
• C) aside

Réponse

C) aside — cela marque un contenu indirectement lié au contenu principal. Utilisez le menu déroulant Tag Name pour changer un conteneur de div à aside.

Q2 : Vous avez glissé un bloc Text sur le canevas et vous voulez qu'il soit un titre de section. Comment le changer ?

• A) Double-cliquez dessus et tapez votre titre
• B) Sélectionnez-le et changez le Tag Name de div à h2 dans les réglages de l'élément (icône engrenage)
• C) Supprimez-le et glissez un autre bloc

Réponse

B) Sélectionnez-le et changez le Tag Name de div à h2 dans les réglages de l'élément (icône engrenage) — le menu déroulant Tag Name s'y trouve, dans le groupe Headings.

Q3 : Vous avez un formulaire avec un champ email, mais les lecteurs d'écran n'annoncent pas de label. Que manque-t-il ?

• A) Le champ a besoin d'un attribut placeholder
• B) Un élément label avec son champ « For » lié à l'ID du champ
• C) Le champ a besoin du type email

Réponse

B) Un élément label avec son champ « For » lié à l'ID du champ — les lecteurs d'écran utilisent cette connexion pour annoncer « ce label appartient à ce champ ».

Q4 : Vous voulez intégrer une carte Google Maps. Quel bloc utilisez-vous ?

• A) Le bloc Map du panneau Blocs
• B) Le bloc Custom code avec le code d'intégration
• C) Les deux fonctionnent

Réponse

C) Les deux fonctionnent — le bloc Map crée un élément iframe, ou utilisez Custom code pour coller directement le code d'intégration Google Maps.

Q5 : Vous avez changé un élément de div à nav. Avez-vous perdu du contenu ou des styles ?

• A) Oui, changer la balise supprime l'élément
• B) Non, changer la balise conserve le contenu, les styles et la position — seule la balise HTML change
• C) Uniquement si vous n'avez pas sauvegardé avant

Réponse

B) Non, changer la balise conserve le contenu, les styles et la position — seule la balise HTML change — cela affecte la sémantique pour les lecteurs d'écran et le SEO, mais pas l'apparence.