En bref. Framer attribue les balises au moyen des styles de texte et permet de redéfinir le rôle sémantique d’un calque sélectionné dans le panneau Accessibility.

Définition : Dans Framer, une balise HTML sémantique attribue à un calque de texte ou à un cadre (frame) un rôle structurel dans la page publiée, par exemple un titre, un paragraphe, une zone de navigation ou un pied de page. Framer attribue les balises au moyen des styles de texte et permet de les redéfinir pour des instances précises dans le panneau Accessibility.

Points clés

Le guide SEO de Framer indique qu’une page doit comporter un titre principal clair et que les balises sémantiques des titres et des images peuvent être ajustées manuellement. Le guide des fonctionnalités SEO de Framer le précise dans la rubrique « Semantic text and elements ».
Les styles de texte reçoivent automatiquement des balises correspondant à des titres, des paragraphes ou des éléments span. La documentation de Framer sur les styles de texte et les balises sémantiques indique que ces balises peuvent être redéfinies pour des instances précises dans le panneau Accessibility.
Un cadre peut recevoir une balise structurelle depuis la section Accessibility. Le guide de Framer sur la navigation et les pieds de page présente nav pour un calque contenant des liens de navigation et footer pour le calque du pied de page.
Le guide des balises HTML de Framer décrit article, aside et main comme des zones sémantiques de la page, et section comme un bloc logique.

Comment Framer attribue-t-il les balises aux calques de texte ?

La documentation de Framer sur les styles de texte indique que la création d’un style de texte lui attribue automatiquement une balise sémantique telle que h1, h2, p ou span. Les propriétés visuelles du style et son rôle HTML font donc partie de la même définition de style réutilisable. Le guide distinct « Using text styles » indique que la création d’un style passe par Assets, puis Text, avant de choisir le niveau de titre ou le type de paragraphe approprié.

La même documentation décrit la possibilité de redéfinir la balise pour chaque instance. Il faut sélectionner l’instance de texte concernée, ouvrir le panneau Accessibility et modifier sa balise lorsque le rôle sémantique par défaut ne correspond pas au contenu. Le niveau de titre exprime la hiérarchie du document : les recommandations de Framer commencent donc par un h1 pour le titre principal, puis utilisent h2 et h3 pour les titres des niveaux suivants.

Text style: heading or paragraph type
Instance override: Accessibility panel

Comment attribuer une balise structurelle à un cadre ?

Le guide de Framer sur la navigation et les pieds de page applique les balises directement aux cadres. Pour une zone de navigation, il faut sélectionner le calque contenant les liens de navigation, ouvrir Accessibility dans le panneau Properties, puis choisir nav dans la liste déroulante Tag. Pour un pied de page, il faut sélectionner le calque qui remplit ce rôle et choisir footer dans la même liste.

Properties panel > Accessibility > Tag > nav
Properties panel > Accessibility > Tag > footer

Le guide décrit le résultat comme une section de navigation ou un pied de page dont la structure a un sens pour les lecteurs d’écran et les moteurs de recherche. Le réglage s’applique au calque sélectionné : le contenu du calque et le rôle attribué doivent donc correspondre.

Quelles balises correspondent aux éléments de la page ?

Le guide des balises HTML de Framer présente les rôles suivants. main désigne le contenu principal de la page, à l’exclusion de la navigation et des éléments répétitifs. article convient à un article de blog, à une étude de cas ou à une description de produit qui forme un ensemble autonome. aside correspond à une barre latérale, à des liens connexes ou à un encadré distinct du flux principal. section délimite un bloc logique, comme les services ou les fonctionnalités mises en avant, et footer accueille la navigation secondaire, les informations de droit d’auteur ou un formulaire d’inscription.

Le même guide réserve button aux actions telles que l’envoi d’un formulaire ou l’ouverture et la fermeture d’un menu, et décrit nav comme le conteneur des liens de navigation dans les en-têtes, les pieds de page ou les barres latérales. Un div reste un conteneur général destiné à la mise en forme ou aux fonctionnalités JavaScript. Ces choix décrivent la fonction et la structure du contenu : la taille du texte ou son traitement visuel ne suffit donc pas à déterminer la balise.

Termes associés

Questions fréquentes

La modification d’un style de texte change-t-elle la balise HTML ?

Framer indique que les styles de texte reçoivent automatiquement des balises sémantiques et que les modifications d’un style se répercutent partout où il est utilisé. La balise d’une instance précise peut être redéfinie dans le panneau Accessibility.

Sélectionnez le cadre, ouvrez Accessibility dans le panneau Properties et utilisez la liste déroulante Tag. Le guide de Framer indique nav pour les liens de navigation et footer pour le pied de page.

Un calque de texte de grande taille doit-il toujours être un titre ?

Non. Choisissez un niveau de titre lorsque le texte représente un titre dans la structure de la page. Les recommandations de Framer distinguent la hiérarchie des titres de leur présentation visuelle en préconisant un h1 clair, suivi de titres h2 et h3 lorsque cela convient.

Sources

Vérifiez comment une page se lit pour les moteurs de réponse. Ouvrir l’analyseur de score GEO

Comment attribuer des balises HTML sémantiques aux calques Framer ?