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, son utilisation a une certaine signification: "Ceci est un en-tête, un niveau important, de premier niveau" et ainsi de suite. Certains analyseurs utilisent également les balises hx (et d’autres) pour créer un aperçu de la structure du document qui peut être utilisé pour tout, du traitement de données à l’accessibilité (par exemple, les lecteurs d’écran passant à la question suivante de la page d’accueil des webmasters en passant 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 la même apparence que h1, par exemple: <span style="font-weight:bold;font-size:2em">Whatever</span>mais cela ne fait toujours pas de cette balise span 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 ce que votre contenu est - ceci est un titre, ceci est une liste, etc.

CSS indique à quoi doit ressembler votre contenu - les titres doivent être en bleu, les listes doivent être en retrait autant, le menu doit être à 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'efforts 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 <a>élément et obtenir tout cela gratuitement, sans code supplémentaire à télécharger, car les navigateurs savent déjà quoi faire et ont la logique implémentée dans un code natif rapide. De 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 a <button>pour les actions cliquables, <label>pour étiqueter <input>et <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, il 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. . Attendu que <h1>Turtle Groomer 5000</h1>indique clairement aux moteurs de recherche que vous avez un produit qui facilite l’hygiène du testitudinal.

Pensez également aux personnes ayant une déficience qui (par exemple) doivent utiliser un lecteur de braille. Dans ce cas, les balises html ont une importance beaucoup plus grande 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 .

Sommaire:

Utilisez-le <b>lorsque vous souhaitez que le texte ait un style différent sans importance contextuelle, mais <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 <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>c’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 de la même manière qu'un sosie ne le 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 d'une <h1>balise 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 concentreront uniquement sur le code HTML, où une balise comme <em>est 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 toujours mis en forme. <em>pourrait également indiquer qu’il est censé mettre l’accent sur le mot, alors que l’italique seul peut aller de l’intitulé d’un titre de film à la création d’une légende différente du texte normal. 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 en ligne de la <div>balise, et peut éventuellement vous éviter de taper une classe supplémentaire (avec cela, voulez-vous vraiment utiliser à la <span class="italic">place de <i>chaque instance en italique Cela rend le code plus difficile à lire, moins normalisé (dans l'hypothèse générale selon laquelle la majorité des gens utiliserait le dernier par rapport au premier), et n'améliorera en aucune manière le document.

<p>est également utile pour les personnes handicapées, car il garantit que le texte peut être divisé en paragraphes gérables d'une manière qui <br />ne le peut 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 non <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é.)