Outils de développement · Éditeur HTML WYSIWYG
Les titres ne sont pas en gros caractères gras : pourquoi les niveaux de titres sont importants dans le contenu Web
· Pourquoi c'est important
html accessibilité Codes temporels édition de texte
Explique pourquoi h1 à h6 forment un plan de document sur lequel s'appuient les utilisateurs de lecteurs d'écran et les moteurs de recherche, et comment vérifier que les titres visuels sont de véritables titres.
L'article sans titre — s'ouvre sur une page où chaque titre apparent est un paragraphe en gras
Une ligne agrandie et mise en gras par CSS peut ressembler à un en-tête de section tout en restant un paragraphe dans l'arborescence du document. Les lecteurs voyants peuvent déduire la division à partir de la typographie, mais le logiciel ne reçoit aucun élément de titre pour identifier, collecter ou parcourir. L’apparence seule ne crée pas de hiérarchie.
ToolAcre évite les contrôles de style et fournit des choix de blocs explicites pour h1 à h4. Un rédacteur peut donc encoder un titre plutôt que d’en simuler un avec un texte fort. La liste verte accepte également h5 et h6 dans la source, bien que la barre d'outils n'annonce pas de contrôles pour ces niveaux.
Ce qu'un élément de titre fait au-delà de sa taille : explique le plan, les raccourcis de navigation et la structure qu'il fournit
Un élément de titre étiquette le contenu qui suit et contribue à la structure du document navigable. Les navigateurs exposent ce rôle via des API d'accessibilité, et de nombreux outils d'assistance peuvent présenter une liste de titres ou se déplacer entre eux. L'élément reste identifiable lorsqu'une feuille de style est absente ou remplacée.
Un paragraphe en gras n'offre rien de ce signal structurel. Cela peut toujours être une prose utile, mais elle ne doit pas remplacer une limite de section. Testez le document final avec un outil d'inspection de plan ou d'accessibilité, car l'aperçu local ne signale pas les relations de titre et ne valide pas l'organisation de l'auteur.
Les niveaux sont imbriqués, pas les tailles – explique pourquoi passer de h2 à h4 confond les lecteurs et les outils
Les niveaux expriment l'imbrication, pas un menu de tailles de caractères. Un h2 introduit normalement une section sous le contexte principal de la page ; un h3 introduit une sous-section de ce h2. Sélectionner h4 simplement parce que sa police par défaut semble correcte peut impliquer une structure intermédiaire manquante.
ToolAcre conservera h1 à h6 et ne rejettera pas les niveaux ignorés. Le filtre applique le vocabulaire, pas la logique éditoriale. Créez le plan sur papier ou dans la source, puis utilisez CSS à la destination pour contrôler l'apparence sans changer de niveau pour rechercher une échelle visuelle préférée.
Choisissez le titre de la page en contexte ; cet éditeur n'applique pas de règle one-h1
Le classeur prescrit un h1, mais la mise en œuvre n'a pas de règle de ce type et cet article n'en invente pas en tant que loi universelle. Les modèles de page, les fragments incorporés et les conventions de document déterminent si le contenu doit fournir son titre principal ou commencer sous celui fourni par l'hébergeur.
Inspectez la destination complète, pas le fragment seul. Si le CMS affiche déjà le titre de l'article sous la forme h1, le contenu du corps collé peut raisonnablement commencer par h2. ToolAcre ne peut pas voir ce modèle externe, donc son option h1 est une fonctionnalité plutôt qu'une recommandation pour chaque brouillon.
Exemple concret : comparer un paragraphe en gras avec un élément de titre dans la source
Créez `<p><strong>Installation</strong></p>` et `<h2>Configuration</h2>`. Les deux peuvent paraître importants dans le bac à sable, mais la source révèle que seule Configuration est un en-tête. Une inspection de l'arborescence d'accessibilité sur la page publiée doit également identifier uniquement le h2 comme en-tête.
Modifiez l'installation au niveau correct via le sélecteur de bloc ou le mode source. Vérifiez ensuite si les deux titres sont pairs ou parent et enfant. Le désinfectant préserve les deux formes mais ne peut pas décider de la relation à partir de leurs mots. Ce jugement appartient à l’auteur du document et au contexte de la page.
Styliser les titres sans abuser des niveaux – explique que CSS, et non le choix du niveau, devrait contrôler l'apparence
L'apparence du titre appartient au CSS. Un site peut rendre h2 modeste et h3 visuellement distinctif tout en conservant des niveaux logiques, à condition que la conception communique toujours la hiérarchie. Styliser un h2 correct est plus sûr que de remplacer h4 simplement pour obtenir une valeur par défaut plus petite du navigateur.
La feuille de style de l'aperçu est volontairement simple et légère. Il ne s'agit pas du thème de votre produit, ses dimensions de titre par défaut ne constituent donc pas une bonne preuve de la conception de la destination. Copiez le fragment sémantique, appliquez-y les styles approuvés et examinez le comportement réactif sans réécrire le plan pour satisfaire une vue isolée.
Ce que cela ne couvre pas : les éléments de section tels que <section> et <article>, ou le référencement au-delà de la structure
Cet article ne couvre pas les éléments de section et d'article, les rôles de titre ARIA, les conseils de référencement complets ou chaque lecteur d'écran. Il ne prétend pas non plus que ToolAcre valide les niveaux ignorés, les titres en double ou la qualité du texte de titre. La barre d'outils fournit des éléments ; les auteurs fournissent une structure cohérente.
Une sortie nettoyée ne constitue pas automatiquement une publication non fiable et sécurisée. Le bac à sable d'aperçu limite l'exécution dans ToolAcre, tandis que le balisage copié laisse cette protection. Utilisez des tests d’assainissement et d’accessibilité côté destination. Un arbre de titre correct est une dimension de qualité, et non un contrôle de sécurité ou un audit complet.
À retenir : la structure d'abord, le style ensuite – résume la règle et comment l'éditeur HTML WYSIWYG de ToolAcre vous permet de confirmer si le balisage derrière un titre visuel est un élément de titre.
La structure d'abord, le style ensuite. Décidez quels sujets sont des sections et des sous-sections, attribuez des niveaux à partir de cette relation, puis inspectez les éléments h réels émis par ToolAcre. Un titre doit rester significatif lorsque les polices, les couleurs et les espacements disparaissent.
Enfin, placez le fragment dans son modèle réel et examinez la hiérarchie combinée. L'éditeur local ne peut pas connaître le titre d'une page externe ou le shell de navigation. Sa valeur est la transparence : le formatage visuel et la source sont côte à côte, ce qui facilite la détection des faux titres avant la publication.