L'essentiel du HTML5

Se baser sur la sémantique

Testez gratuitement nos 1247 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
En parallèle de la structure, il est très important de penser sémantique. Donnez un sens à l'imbrication des balises HTML employée. Vous pouvez en préciser les éléments de navigation, de contenu, d'information ou de complément d'information.
03:51

Transcription

En parallèle donc de la structure, il est très important de pouvoir penser sémantique. Alors, si je regarde le code source de cette page que l'on vient de mettre en place, on voit ici des balises nav, des balises header, des balises main, article, header, une structure qui va contenir le contenu. et surtout ce qui est important, c'est de pouvoir donner un sens à chacune de ces bribes de contenu. C'est à dire s'agit-il d'un titre, d'un article? S'il y a une section qui est imbriquée dans l'article, forcément on va avoir un degré de granularité qui va se mettre en place, et ici, rien ne nous l'indique en façade. Donc c'est important de pouvoir le visualiser d'un point de vue structurel, visualiser ce sens sémantique d'un point de vue structurel. Pour cela, il exixte des extensions, par exemple ici, sur Firefox on a HeadingsMap qui est un outil qui va nous permettre de visualiser en temps réel chacune des pages, au niveau de cette imbrication et de cette structuration. Donc ici, une fois que j'ai affiché le contenu de ma page, je vais pouvoir aller dans le menu affichage, panneau lattéral, et demander à HeadingsMaps d'intervenir. Et vous voyez, qu'instantanément, on va pouvoir voir ici qu'on est dans un document, Le titre de ce document, la balise titre, c'est "Sortir à Graz". On a une navigation qui n'a pas d'en-tête qui n'a pas d'information autre que la navigation. Ici on a un article, avec un titre. Cet article contient une section, ici qui a un titre elle-même, ici à l'intérieur, ici une autre section, puis elle a un aside, au même niveau que les premiers, ici. Donc on arrive à pouvoir décortiquer cette imbrication. Et à la comprendre, à voir qu'il s'agit d'un article, d'une section, d'un élément de complément d'information, et cetera. Si je viens dans Chrome, maintenant, On a exactement le même type d'outil dans Chrome, qui existe. Sous la forme par exemple ici de HTML5 Outliner, ici. Donc dès l'instant où on va pouvoir récupérer notre contenu, on va visualiser ici, également, et là vous voyez on retrouve exactement le même type d'information, avec les degrés d'imbrication, et de bien comprendre, donc, qu'il y a un sens sémantique à cela. Alors on pourrait très bien ici, si on reprends le code source directement dans la page, Control A Control C, je le copie. On pourrait très bien avoir exactement le même type de service en ligne, par exemple sur le site HTML5 Outliner. On pourrait pointer sur l'URL et avoir l'information, ou venir coller directement le HTML dans cette partie-là, et puis visualiser le résultat, en cliquant sur le bouton, voilà. Alors là, on voit un petit problème d'encodage des caractères, avec le à accent, et le é de complémentaire. Et vous voyez que l'imbrication est bien reconnue également ici. On retrouve toutes ces types d'informations nécessaires. Alors, on pourrait penser de se dire "oui mais c'est cohérent, si je le faisais avec du div ou pas du div, ça serait pareil" Alors justement, regardez, rappelez-vous, dans le premier chapitre on avait crée une classe, enfin un document qui était structuré mais qui n'avait pas de sémantique, donc c'étaient que des div class article, div class header, div class titre, et cetera. Et on avait fait le même document après, mais en utilisant des balises HTML5. Regardez ce qui se passe si je vais dans un document ici; pour le visualiser on va le visualiser dans Chrome. Ici si on regarde le premier document, donc si je regarde le code source ici, on voit bien qu'on est dans le pseudo sémantique, c'est à dire ce sont des classes qui viennent jouer le rôle de signification de chacune de ces balises div, ici. Si je regarde au niveau du Outliner ici, j'ai rien qu'un seul élément. D'accord. Aucune information n'a été donnée, sémantiquement, sur la structure-même. Alors que si je prends le 2ème document, celui qu'on avait construit au travers de balises HTML5, ici donc si je l'affiche c'est exactement le même visuel au niveau des yeux. Si je regarde d'un point de vue structurel cette fois, on a l'information qui est bien donnée, qui est récupérée. Alors on n'a pas tout à fait la même structure parce qu'on n'est pas calqués sur le même degré degré d'implication ici, si vous regardez. Voilà, ici on a une section, un header, un footer, et cetera, mais vous avez compris le principe, C'est pas parce qu'on va mettre une imbrication structurelle que d'un coup, les outliners vont pouvoir définir que sémantiquement on a défini des articles, des sections, des imbrications qui ont un sens. Voilà donc toujours penser à la sémantique, et pas forcément qu'à la structure.

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 !