Pourquoi devrions-nous utiliser des balises telles que les balises p, span, hx alors que nous pouvons utiliser CSS à la place?
Pourquoi devrions-nous utiliser des balises telles que les balises p, span, hx alors que nous pouvons utiliser CSS à la place? Est-ce important du point de vue du référencement?
La version courte est que les différentes balises et CSS ont des buts différents.
<h1>Whatever</h1>, par exemple, a une certaine signification en même temps que son utilisation: "Ceci est un en-tête, un niveau important, de premier niveau" et ainsi de suite. Certains analyseurs utilisent également les balises hx (et autres) pour créer un contour de la structure du document, qui peut être utilisé pour tout, du traitement des données à l’accessibilité (par exemple, les lecteurs d’écran passant à la question suivante de la page d’accueil des webmasters en sautant au h3 suivant).
Vous ne pouvez pas ignorer les balises sémantiques en fonction de ce que vous pouvez faire avec CSS, et inversement.
Vous pouvez appliquer CSS à une autre balise pour lui donner l'apparence de la même manière que le h1, par exemple: <span style="font-weight:bold;font-size:2em">Whatever</span>, mais cela ne donne toujours pas cette durée. baliser un en-tête réel en termes de fonction et de sémantique. Dans ce cas, le contour que j'ai lié à ce qui précède serait quasiment impossible, car ces étendues ne sont pas des en-têtes, mais simplement du texte que vous avez arbitrairement rendu grand et audacieux.
Le balisage et la présentation sont différents
C'est un peu comme demander "pourquoi devrions-nous avoir des murs quand nous avons de la peinture?" :)
Les balises HTML indiquent le contenu de votre contenu - il s'agit d'un titre, d'une liste, etc.
CSS indique à quoi devrait ressembler votre contenu - les titres doivent être en bleu, les listes en retrait, le menu à gauche, etc.
Javsascript indique le comportement de votre page - animations, etc.
Donc, sans contenu HTML, CSS et Javascript n’ont vraiment rien à travailler.
Ces catégories ne sont pas à 100% en noir et blanc - par exemple, CSS peut spécifier des "transitions" à présent, qui sont des animations - mais ce sont des idées de base.
Veuillez consulter les discussions précédentes sur ce sujet sur StackOverflow ici et ici .
Un bon balisage permet d'économiser beaucoup d'effort et fonctionne mieux
Si vous voulez que quelque chose se comporte comme un lien, vous pouvez utiliser <span class="mylink"> et utiliser un tas de CSS et JS pour lui donner une apparence correcte. Ou vous pouvez simplement utiliser un élément <a> et obtenir tout cela gratuitement, sans code supplémentaire à télécharger, car les navigateurs savent déjà quoi faire. faire et avoir la logique implémentée dans le code natif rapide. Plus , il est beaucoup plus susceptible de fonctionner correctement pour les lecteurs d'écran, les navigateurs mobiles, les moteurs de recherche, les agrégateurs et autres cas d'utilisation auxquels vous n'avez pas pensé.
C'est aussi pourquoi vous devez utiliser un <button> pour les actions cliquables, un <label> pour étiqueter un <input> et un <main> pour la section principale de votre page.
Comment bon balisage impact sur le référencement
Fondamentalement, le référencement consiste à convaincre les moteurs de recherche que votre contenu correspond le mieux à un terme de recherche. De toute évidence, personne chez Google ne lit personnellement chaque page Web et ne la classe pas.
Par conséquent, pour que les moteurs de recherche sachent quel est votre contenu, un programme doit l’analyser.
Et hé, regarde! Nous avons tout ce langage appelé HTML conçu pour étiqueter votre contenu de manière à ce que les machines puissent le comprendre! :)
Alors oui, un balisage clair aidera les moteurs de recherche à mieux indexer vos pages.
Pour prendre un exemple extrême, si le titre de votre page était en fait une photo d’un titre de journal, cela pourrait sembler intéressant et les gens pourraient le lire très bien, mais pour un moteur de recherche, ce ne serait qu’une image dépourvue de sens. . Considérant que <h1>Turtle Groomer 5000</h1> indique clairement aux moteurs de recherche que vous disposez d'un produit facilitant l'hygiène testitudinale.
Pensez également aux personnes ayant une déficience qui (par exemple) doivent utiliser un lecteur de braille. Dans de tels cas, les balises html sont beaucoup plus importantes que les stylings css visuels.
Su a répondu à la partie sémantique. En ce qui concerne le référencement, vous constaterez que les moteurs de recherche accordent plus de poids à l'élément h1 qu'aux autres balises. Les balises h2/b/strong ont un peu plus de poids que le texte normal.
La plupart des autres balises sont à peu près égales, mais vous devez toujours utiliser la balise la plus appropriée pour le travail. Google a récemment commencé à analyser les tableaux lorsqu'il est utilisé pour des données tabulaires. Un autre code HTML utilisé de manière appropriée peut fournir des signaux pour lesquels le contenu est plus important que d'autres.
Pour HTML5, consultez gras et italique dans HTML5 .
Résumé:
Utilisez
<b>lorsque vous souhaitez que le texte ait un style différent sans importance contextuelle, mais utilisez<strong>lorsque vous souhaitez que le texte ait une importance supplémentaire du point de vue du contenu ou du référencement.Utilisez
<i>pour compenser l'ambiance du texte, mais utilisez<em>pour rendre le texte emphatique.
Aussi: n'oubliez pas l'importance de la sémantique pour les utilisateurs avec un handicap. Le logiciel Screenreader s'appuie sur cette sémantique pour présenter aux aveugles le contexte requis qui leur échappe en raison de leur handicap.
Tout d'abord, <hx> is est une balise assez importante, car elle définit les en-têtes, comme d'autres l'ont mentionné. Les titres sont très utiles, non seulement pour les apparences, mais parce qu'ils séparent les sections d'une manière qu'un sosie ne peut pas. Jetez un coup d'œil à Wikipedia par exemple. Certains programmes dépendent de ce type de balises pour "séparer" les documents ou même créer une table des matières automatique. Un moteur de recherche présumerait que le texte contenu dans une balise <h1> serait plus important puisqu'il s'agit d'un en-tête - d'un titre.
Ensuite, bien que les feuilles de style soient excellentes, certains périphériques les ignoreront et se focaliseront uniquement sur le code HTML, où une balise telle que <em> est très utile. Si les feuilles de style ont été désactivées ou en cas de problème de chargement (problèmes de connexion Internet, par exemple), le texte reste formaté. <em> peut également indiquer qu'il est censé mettre l'accent sur le mot, tandis que l'italique seul peut être n'importe quoi, du titre d'un film à la simple légende d'une légende. Cela peut être utilisé par ceux qui utilisent des outils de handicap, qui autrement ne parviennent pas à capturer l'accent en général.
<span>, d’autre part, est en grande partie une version intégrée de la balise <div>, et peut éventuellement vous éviter d’avoir à taper une classe supplémentaire (cela dit, vous voulez vraiment utiliser <span class="italic"> au lieu de <i> pour chaque exemple italique, cela rend le code plus difficile à lire, moins normalisé (dans l'hypothèse générale selon laquelle la majorité des gens utiliserait ce dernier plutôt que l'ancien) et n'améliore en aucune façon le document.
<p> est également pratique pour les personnes handicapées, car il permet de fractionner le texte en paragraphes gérables de manière que <br /> ne puisse pas.
Bien sûr, nous pouvons dire que HTML n'a pas été conçu pour le style, mais il existe une frontière délicate entre le design et le style; et franchement, je dirais que considérer cela comme une préférence de l'utilisateur. Que vous utilisiez <i> ou <span class="italic">, cela dépend de vous et ne changera rien au référencement. Après tout, pourquoi nous limiter à une seule façon de faire les choses? (comme comment nous pourrions choisir d'utiliser ou non des points-virgules à la fin des lignes en JavaScript - je les utilise toujours, alors que d'autres ne les utilisent jamais, et cela ne fait aucune différence pour la fonctionnalité.)