Nous mettrons à jour notre Politique de confidentialité prochainement. En voici un aperçu.

L'essentiel du HTML5

Définir les balises hiérarchiques de contenu

Testez gratuitement nos 1340 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Vous allez apprendre à découper votre contenu de manière hiérarchique. Appliquez les balises adaptées à vos besoins.
04:19

Transcription

Lorsque le texte devient plus important, celui-ci va s'organiser d'abord dans un premier temps sous forme de paragraphe, donc pour pouvoir représenter des paragraphes en HTML, et il suffit d'utiliser la balise « p » pour paragraphe et d'englober le contenu, on peut utiliser autant de balises paragraphe, que l'on veut au sein d'un contenu. Maintenant il est très important au même stade qu'on l'a découpé de manière structurelle et sémantique, de pouvoir découper ce contenu de manière hiérarchique. Et pour cela on va utiliser des balises d'entête, de niveau H1, H2, jusqu'à H6, comme ça. H1 étant la balise la plus grande, donc étant le titre de la page. Si je souhaite mettre un sous-titre sur cette page, alors ici on va dire que c'est un titre de niveau 1, ici. On va pouvoir placer un titre de niveau 2 par exemple en mettant une balise H2 tout simplement ici et là on aurait un titre de niveau 2. Voilà, on va pouvoir placer un autre type de niveau 2, quelque part ici dans la page. Et là donc on aurait une découpe hiérarchique maintenant de ce contenu par rapport à un ordre d'importance et en descendant dans une granularité plus fine. Titre Sous-titre Paragraphe. On pourrait ici maintenant s’arrêter là, mais si on regarde une certaine polémique sur le référencement notamment et depuis l'utilisation de ces balises de hiérarchie, c'est à dire de H1, H2 au sein d'un contenu. Si ici je place une section, et donc je vais utiliser l'englobement global de toute cette partie ici là. En disant qu'il s'agit d'une section, il est vrai que ce titre de niveau 2 maintenant se trouve au sein d'une section avec ce paragraphe, mais on pourrait très bien dire que c'est le titre de la section. Et donc ici je vais pouvoir revenir à un niveau de type H1. Alors si on regarde bien, ici je vais dire même qu'il s'agit d'un type de niveau 1 de section, voilà. Et voyez que c'est un titre de niveau 1, mais qui reste bien de la même taille d’écriture que le titre de niveau 2, ici le sous-titre de niveau 2 ici, voyez. Pourquoi ? Mais tout simplement, parce que je suis quand même imbriqué dans un enfant de body. Ici le H1 se trouve bien à la racine de mon document et ici à la racine du document au même niveau que H1, j'ai « section ». Et donc ce H1 se trouve imbriqué. La meilleure façon de le regarder va être d'appeler ce qu'on appelle La palette du DOM, qu'on peut avoir dans ce logiciel, mais voyez ici H1, il est bien au premier niveau. Si je regarde ma section ici le H1 est en second niveau. Alors beaucoup vont dire : il ne peut y avoir qu'un seul H1 par page, et Google le demande non, on peut mettre plusieurs H1 par page, à condition de respecter une logique d’imbrication et que ce H1 puisse donc ne pas être en conflit avec celui-ci. Alors pour quel raison c'est important de repartir ici du H1 ? Tout simplement parce que si vous mutualisez votre contenu, c'est à dire si vous prenez ce contenu, vous le coupez et vous allez le coller dans une autre page. Si ici vous aviez un H3, puisque ça correspondait à vos besoins dans votre page, ce n'est pas dit que maintenant le H3 correspond aux besoins de la page d’accueil, qui va recevoir ce contenu. Par contre en étant au niveau de titre 1 de cette section, ici, vous pourrez beaucoup plus facilement styler les contenus dans les pages d'accueil. Voilà donc, pensez à donner une hiérarchie au contenu, en passant du paragraphe aux niveaux de type H1, H2 en fonction de leur niveau d’imbrication. Alors, ici ce que je vous propose de faire également c'est de voir certaines découpes au sein de ce contenu. On a vu que chaque fois que je termine un paragraphe, je pouvais le découper et on avait donc deux paragraphes. Mais ici je pourrais très bien venir et décider de mettre une coupure, inter-paragraphe, et donc cette balise HTML va s'appeler la balise « br », pour BackReturn, et ici je vais avoir un retour-chariot, mais vous voyez je n'ai pas de saut de paragraphe, c'est simplement un retour au sein du paragraphe. Et dans le même sens on pourrait utiliser une balise de type « hr », pour horizontal rouleur, ici qui va me permettre d'avoir une séparation de contenu hiérarchique dans les contenus ici. Donc pensez que vous avez les paragraphes qui peuvent être découpés par les balises « br » placées au sein du contenu, et les balises « hr » qui peuvent être inter-contenues pour pouvoir faire des séparations inter-paragraphes.

L'essentiel du HTML5

Préparez la structure de vos sites web de manière évolutive, sémantique, et accessible à tous avec le HTML5. Abordez la gestion du texte, les balises et les attributs, etc.

5h13 (63 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Spécial abonnés
Date de parution :29 juin 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !