Méthode 1 : Est-ce que cela a du sens ?
<span class="heading">Titre de l'article</span>
Bien que <span> puisse être une balise pratique dans certaines situations, elle ne transmet pas toute la signification du titre. L'un des avantages de l'utilisation de cette méthode est que nous pouvons lui attacher une règle CSS et lui attribuer une classe de titre pour que son texte apparaisse comme un titre.
.titre {
taille de police : 24 px ;
poids de la police : gras ;
couleur : bleu ;
}
OK, maintenant tous les titres sont marqués de la classe de titre en gros caractères gras et en bleu. merveilleux! Mais est-ce la bonne chose à faire ? Que se passe-t-il si quelqu'un le consulte avec un navigateur qui ne prend pas en charge CSS ?
Par exemple, que se passe-t-il si les règles de la feuille de style externe que nous définissons ne sont pas prises en charge par les anciennes versions des navigateurs ? Ou que se passe-t-il si une personne malvoyante utilise un lecteur d'écran pour lire cette page ? Ce qu'un visiteur voit (ou entend) par ces moyens ne doit pas être différent du texte normal sur la page.
Bien que class="heading" ajoute un peu de sens à la balise, <span> n'est encore qu'une balise ordinaire qui peut être modifiée par le style par défaut de la plupart des navigateurs.
Les moteurs de recherche ignoreront la balise <span> lors de l'exploration de cette page, comme si elle n'existait pas, et n'accorderont aucune attention particulière aux mots-clés qu'elle peut contenir. Nous parlerons plus tard de la relation entre les moteurs de recherche et les titres.
Enfin, puisque la balise <span> est un élément en ligne, nous devrons peut-être l'imbriquer dans un élément supplémentaire au niveau du bloc, tel qu'une balise <p> ou une balise <div>, afin de la faire former une ligne distincte. , ce qui encombrera davantage vos balises avec du code inutile. Ces balises supplémentaires sont nécessaires pour que les navigateurs qui ne prennent pas en charge CSS puissent afficher le même texte.
Méthode 2 : combinaison de <p> et <b>
<p><b>Titre de l'article</b></p>
L'utilisation d'une balise de paragraphe nous donnera un affichage au niveau du bloc et <b> mettra le texte en gras. Mais lorsque nous utilisons cette méthode pour marquer un titre important, nous sommes confrontés aux mêmes résultats dénués de sens.
Contrairement à la méthode A, la balise <b> peut mettre le texte en gras dans les navigateurs visuels, même dans les navigateurs qui ne prennent pas en charge CSS. Mais comme pour la balise <span>, les moteurs de recherche n'accorderont pas une priorité plus élevée simplement parce que quelque chose est en gras dans un paragraphe.
Difficile de styliser
L'utilisation de la combinaison ordinaire de <p> et <b> présente également un autre inconvénient : il est impossible de concevoir ce titre pour qu'il soit différent des autres paragraphes. Nous souhaiterons peut-être utiliser un style spécial pour mettre en évidence le titre afin de rendre le contenu de la page plus clair et plus structuré, mais cette méthode ne peut que le faire apparaître en gras.
Méthode 3 : Style et substance
<h1>Titre de l'article</h1>
Eh bien, quelle superbe définition de titre. La plupart des concepteurs de sites Web le connaissent. En fait, lorsqu'il est utilisé de manière appropriée, <Hn> peut fournir une structure flexible, indexable et stylisée pour le contenu de la page.
C'est aussi une façon intelligente de le définir, et vous constaterez que c'est assez simple. Aucune balise supplémentaire n'est plus nécessaire, et vous pourriez affirmer que cela n'économise qu'un tout petit peu plus d'octets que les deux autres méthodes, ce qui est négligeable, mais une économie compte.
<h1> à <h6> représentent six niveaux de titres, du plus important (<h1>) au moins important (<h6>). Ils sont eux-mêmes au niveau des blocs et ne nécessitent pas l’ajout d’autres éléments pour les aligner individuellement. Simple, efficace – juste un excellent outil.
Personnalisez facilement les styles
Étant donné que nous utilisons la balise <h1> de manière unique et que la balise <b> ou <p> est plus adaptée à une utilisation sur toute la page, nous pouvons utiliser diverses méthodes CSS pour la styliser.
De plus, une balise de titre peut indiquer clairement un titre, même sans avoir besoin de style ! Les navigateurs visuels affichent <h1> dans une police grasse plus grande. Une page sans style affichera la structure du document comme prévu, avec des balises de titre appropriées pour transmettre le sens.
Les lecteurs d'écran, les PDA, les téléphones portables et les navigateurs visuels et non visuels sauront tous quoi faire lorsqu'ils rencontrent une balise de titre, la géreront correctement et la traiteront plus sérieusement que le texte normal de la page. Avec la balise <span>, les navigateurs qui ne prennent pas en charge CSS ne la traiteront pas spécialement.
Styles par défaut ennuyeux
Dans le passé, les concepteurs auraient pu éviter complètement d’utiliser les balises de titre parce que les paramètres par défaut du navigateur étaient trop laids. Ou bien, évitez d'utiliser <h1> ou <h2> en raison de leurs énormes tailles par défaut, et utilisez plutôt des balises de titre de numéro plus élevé pour obtenir des tailles plus petites.
Cependant, il est important de souligner que nous pouvons facilement modifier ces balises de titre en utilisant CSS - par exemple, un < ;h1> ne doit pas nécessairement être une balise géante qui occupe la moitié de l'écran. Plus tard, je démontrerai à quel point il est simple de styliser les balises de titre avec CSS, ce qui, espérons-le, apaisera certaines de vos craintes accablantes.
convivial pour les moteurs de recherche
C’est un énorme avantage. Les moteurs de recherche adorent les balises de titre. D’un autre côté, une balise <span> ou une balise de paragraphe en gras ordinaire signifie quelque chose de moins. Marquer vos titres de manière appropriée avec <h1> à <h6> ne nécessite qu'un petit effort de votre part, mais facilite l'exploration de vos pages par les moteurs de recherche, afin que les internautes puissent finalement les trouver.
Les robots des moteurs de recherche accorderont une attention particulière aux balises de titre – c’est là que vous pourrez mettre des mots-clés. Tout comme <title> et <meta> sont récupérés, ils rechercheront dans la page le long de la balise de titre. Si vous n'utilisez pas ces balises, les mots-clés qu'elles contiennent ne seront pas considérés comme précieux et seront ignorés.
Ainsi, avec juste un petit effort, vous pouvez augmenter la probabilité que les internautes trouvent votre site en fonction du contenu de votre page. Ça a l'air bien, n'est-ce pas ?
À propos de l'ordre des titres
Dans l'exemple, ce titre particulier est le plus important sur la page car c'est le titre du document. Par conséquent, nous utilisons la balise de titre la plus importante, <h1>. Suivant la spécification du W3C, certains pensent que sauter plusieurs niveaux de titres est une mauvaise pratique. Par exemple, imaginez que nous sommes sur la page suivante :
<h1>Titre de l'article</h1>
Notre prochain titre (s'il n'est pas répété avec un autre <h1>) serait <h2>, puis <h3>, etc. Vous ne devriez probablement pas sauter un niveau après <h1> et passer directement à <h3>. J'ai tendance à être d'accord avec le point de vue ci-dessus et à maintenir la continuité des niveaux tout au long du texte pour construire une structure de mise en page. De cette façon, il est plus facile d'ajouter des titres et des styles à une page déjà existante et vous réduirez les erreurs causées par l'utilisation de numéros supplémentaires.
Comme mentionné précédemment, les concepteurs peuvent utiliser <h4> pour baliser le titre le plus important d'une page simplement parce que sa taille de police par défaut n'est pas aussi odieuse que <h1>. Mais n’oubliez pas : structurez d’abord, concevez ensuite. Nous pouvons toujours utiliser CSS pour styliser les titres selon la taille de texte de notre choix.