Aller au contenu

É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 en utilisant le sélecteur Tag Name dans le panneau Attributs à droite.

Le panneau Blocs listant tous les types d'éléments disponibles organisés par catégorie

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 le panneau Attributs (barre latérale droite). 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 Structure de la page 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 » par défaut utilise une balise p (paragraphe).

Balise Usage
p Un paragraphe de texte courant. La balise par défaut pour les blocs texte.
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 » dans les Attributs.
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 le panneau Attributs et choisissez dans le groupe « Headings ».

Voir Structure de la page 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 le panneau Attributs. 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

Le bloc Link crée un élément a (ancre). Les liens peuvent englober du texte, des images, des boutons entiers ou des groupes d'éléments.

Pour ajouter un lien : glissez le bloc Link depuis le panneau Blocs. Le panneau Attributs affiche une section Lien où vous définissez 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)

Utilisez toujours le menu déroulant Page pour les liens internes, pas des URL codées en dur. 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 nécessite un conteneur avec la balise form, plus des éléments de saisie à l'intérieur.

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. Ajoutez un Container et changez sa balise en form
  2. Ajoutez des éléments texte comme labels et changez leurs balises en label
  3. Ajoutez des éléments input et définissez le champ For de chaque label sur l'ID du champ correspondant
  4. Ajoutez un élément button et définissez optionnellement son type sur submit

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. Dans le panneau Attributs (barre latérale droite), trouvez 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
  • 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. Réglez la rangée sur Display: Flex, Flex-direction: row, Flex-wrap: wrap

  5. Créer une carte de fonctionnalité :

  6. Ajoutez un Container dans la rangée, définissez la balise sur article
  7. Ajoutez un bloc Image pour l'icône
  8. Ajoutez un bloc Text en dessous, changez la balise en h3

  9. Ajoutez un autre bloc Text pour la description (reste en p)

  10. Styliser la carte de fonctionnalité :

  11. Réglez Flex-basis sur 200px, Flex-grow sur 1 sur l'article

  12. Ajoutez du Padding et des gaps selon les besoins

  13. Dupliquer la carte :

  14. Copiez-collez l'article deux fois pour créer trois cartes de fonctionnalité

  15. Mettez à jour l'icône, le titre et la description dans chacune

  16. Vérifier la sémantique :

  17. Section regroupe les fonctionnalités thématiquement
  18. Chaque article est une fonctionnalité autonome
  19. 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

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 », « Link », « 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
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 p à h2 dans le panneau Attributs
  • C) Supprimez-le et glissez un autre bloc
Réponse

B) Sélectionnez-le et changez le Tag Name de p à h2 dans le panneau Attributs — le menu déroulant Tag Name se trouve dans le panneau Attributs de la barre latérale droite, 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.

Éditer cette page sur GitLab