Mise en page avec HTML5 pour le référencement avec sens sémantique

De nombreux concepteurs utilisent html ou xhtml pour séparer ou regrouper des éléments en couches avec div. Le problème est que si nous avons 50 div séparés chacun avec sa classe définissant la structure de la page Web, cela aura du sens pour le concepteur ou le programmeur mais pas pour les moteurs de recherche car ils ne peuvent pas distinguer ce qu'est chaque classe s'il s'agit d'un en-tête , section , article, pied de page, etc.
Avantage HTML5 vs XHTMLHtml5 offre un avantage très important par rapport au xhtml traditionnel et c'est qu'il a des balises pour définir une structure sémantique.
Nous appelons ce code html sémantique html où la structure a du sens pour les moteurs de recherche et sert donc au positionnement SEO. Il s'agit pour chaque moteur de recherche de comprendre ce qu'est chaque partie d'une page Web, voire de supprimer tout le contenu.
XHTML n'a pas de balises permettant de définir des groupes ou des blocs d'éléments avec un sens sémantique.
HTML5 résout ce problème en proposant des éléments et des balises qui nous permettent de définir la sémantique de la page Web, certains d'entre eux sont headeR, footer, nav, hgroup, section et article, entre autres.
Ensuite, nous définirons le plus important au sens sémantique :

• entête: Définissez le bloc d'en-tête de la page Web et joignez le contenu de l'en-tête.
• navigation : définit un bloc qui représente un menu, donc les moteurs de recherche lorsqu'ils trouvent cette balise savent qu'il s'agit de la structure de navigation.
• groupe h : définir et regrouper les titres et ainsi donner une importance différente à chaque titre.
• rubrique et article : Les éléments précédents qui définissent les couches div> et sont remplacés par les balises section et article, qui ont un sens plus sémantique lors de la définition des sections et des articles dans les sections.
• de côté: définit et regroupe les éléments tangentiels de la page web. C'est-à-dire du contenu qui n'est pas le principal, comme les colonnes latérales ou la barre latérale du Web
• bas de page: définit et regroupe des éléments dans le pied de page de la page Web.

L'utilisation de HTML5 n'implique pas que XHTML n'est plus utilisé, ils sont toujours très bons pour organiser la structure et regrouper les éléments de la page Web ou invoquer Jquery, rappelez-vous que HTML5 sert à lui donner un sens sémantique mais dans le bloc, vous pouvez continuer d'utiliser une autre balise XHTML. Voyons un exemple ci-dessous

Sous-titre
logo web

Nous pouvons voir qu'avec les calques la structure a été définie et à l'intérieur de l'en-tête de l'en-tête et un hgroup ont été définis pour regrouper les titres, ainsi qu'un calque qui contient le logo.
Ainsi, les couches XHTML nous permettent de définir la structure de la page Web pour avoir une meilleure organisation pour le programmeur, puis XHTML nous aide à définir des blocs significatifs pour la structure et HTML5 nous permet de créer des blocs significatifs pour les moteurs de recherche et le référencement. Comment la balise de section est utilisée en HTML5 pour le référencement.
L'utilisation de la balise section est très similaire à l'utilisation d'une couche div, à la différence que la section fournit le sens sémantique et que tous les éléments inclus dans la section sont liés à la sémantique du Web. Il est important de ne pas utiliser de section pour regrouper des éléments dans un bloc, car nous devons regrouper des éléments absurdes pour attribuer des styles CSS ou un effet de programmation.
Si la raison de la création d'un bloc est d'appliquer du CSS ou de l'utiliser à partir de code avec un script, alors il serait préférable de ne pas utiliser HTML5, car le bloc n'a pas de contenu sémantique. Dans ce cas, nous devons créer un bloc avec la couche div de xhtml. Comme on le voit dans l'exemple ci-dessus, le logo n'a pas de sens pour utiliser HTML5 puisque CSS est utilisé pour afficher l'image.
Couche ou section DIVUne façon de réfléchir à la pertinence de chaque bloc pour déterminer s'il s'agit d'une couche div ou d'une section, si je suis le visiteur de la page web. Ce bloc me donne-t-il des informations utiles ? Si la réponse est oui, ce sera une section, sinon une couche.
Lorsque nous utilisons l'élément article, nous définissons un bloc qui a un sens sémantique et un contenu que les moteurs de recherche peuvent explorer. La balise article ne fait pas forcément référence à une note textuelle, il peut s'agir d'un produit, d'images ou d'un formulaire.
Voyons un exemple simple d'une page Web et de son code en HTML5 :

Honda Civic

Comme dans l'article, nous pouvons mettre des couches ou des paragraphes ou d'autres éléments xhtml dans certains cas, le contenu du site Web peut n'avoir qu'un seul article et dans le cas où la page contient des listes ou des catalogues, comme dans le cas précédent d'Autos Online, nous pouvons avoir un article pour chaque produit présenté et également son propre en-tête pour donner plus de pertinence aux titres.
Nous pouvons également appliquer des styles CSS aux éléments HTML5, voyons un exemple simple pour un blog en ligne avec HTML5 et CSS3.



 
Titre 1
Publié le 06 décembre 2014 par Sergio - 3 commentaires
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod tellus eu orci imperdiet nec rutrum lacus blandit. Cras enim nibh, sodales ultricies elementum vel, fermentum id tellus. Proin metus hate, ultricies eu pharetra dictum, laoreet id hate …

Titre 2
Publié le 1er décembre 2014 par Sergio - 20 commentaires
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod tellus eu orci imperdiet nec rutrum lacus blandit. Cras enim nibh, sodales ultricies elementum vel, fermentum id tellus. Proin metus hate, ultricies eu pharetra dictum, laoreet id hate …

Cela montre qu'ils ne sont pas seulement des éléments sémantiques, mais qu'ils peuvent également faire partie de la conception et de la structure de la page Web.
Cet élément sert à définir un bloc secondaire au sein de la structure de la page web, c'est du contenu ou des données que l'on veut montrer au visiteur mais ce n'est pas un contenu principal.
Nous pouvons associer la balise side aux colonnes latérales ou communément appelées Sidebar qui auront le contenu du menu de navigation secondaire, des liens vers d'autres pages Web, des formulaires de connexion. Nous pouvons également créer un aparté dans un article, cela signifie que ce qui est à l'intérieur est un complément au contenu de l'article mais ne fait pas directement partie de ce contenu, par exemple si nous avons un article sur certaines ventes et que dans un aparté nous publions des statistiques .
Enfin, rappelez-vous l'objectif de la mise en page :
Qu'est-ce que la mise en page d'une page Web ?La mise en page d'une page Web consiste à amener la conception graphique au code html, css localisant chaque élément correspondant grâce au code sur la page Web.Avez-vous aimé et aidé ce tutoriel ?Vous pouvez récompenser l'auteur en appuyant sur ce bouton pour lui donner un point positif