L'essentiel du HTML5

Étudier la sémantique et la structure

Testez gratuitement nos 1266 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Retenez un des bases fondamentales en partant sur une base structurelle solide et un sens sémantique natif. Comprenez-en alors les raisons.
06:41

Transcription

Revenons à la racine de html. Donc à son niveau structurel vient s'ajouter une couche sémantique extrêmement forte dans l'environnement html 5. Alors si on regarde sur le w3c, sur le chapitre html 5, différence avec html 4, on va voir un peu toutes ces différences qu'il peut y avoir. C'est très important de bien les prendre en considération. Donc si je vais dans la partie plus proche, c'est à dire l'echange d'éléments, des éléments qui ont été modifiés, on s'aperçoit que les éléments qui étaient déjà existants ont un autre sens en html 5. Y compris les attributs qui vont compléter ces balises. On reverra tout ça, bien entendu, dans les étapes ultérieures, mais déjà, je vous invite à venir vous pencher là-dessus et à prendre en considération tous ces éléments-là. Si je viens du côté de Wikipédia, sur la partie html 5, on a à peu près de nouveaux éléments qui sont apparus, à peu près la même chose avec une section article, side. À quoi ça correspond ? Quelles sont toutes ces balises ? Alors, j'ai chois ces deux sites, simplement parce qu'ils permettent de les lister, d'avoir deux opinions différentes et de voir un peu leurs sensibilités. Et surtout, se sensibiliser à ce qui se dégage derrière le simple fait d'utiliser une balise. Alors, avant d'aller dans un exemple, qui date presque du début des balbutiements du html 5 dans la communauté des développeurs de sites. où John Allsopp parlait de sémantique et expliquait que c'était très bien d'avoir de nouvelles balises structurelles et sémantiques Moi, ce qui m'intéresse, dans la partie de son article, c'est ici une simple phrase où il dit : cette personne est fantastique. C'est un paragraphe. Mais, c'est vrai que sémantiquement parlant et structurellement parlant, on va savoir qu'il s'agit d'un paragrpahe et qu'on va pouvoir acter en tant que tel sur ce contenu. Mais, ici, il y a un attribut réthorique, qui n'existe pas mais qui aurait pu exister, qui disait : mais attention, c'est de l'ironie. Donc, de pouvoir donner encore un sens plus fort au contenu qui va être lu soit par l'utilisateur, soit par des robots, soit par des feuilles de style, soit par une mise en forme particulière en fonction du contenu et de la matière de ce contenu. Alors, pour aller plus loin dans cette notion de structure et de sémantique, prenons un simple exemple. Si je prends un contenu de page web lu par un navigateur, là j'ai du lorem ipsum au kilomètre. Qu'est ce que j'ai ? J'ai un texte. Mes yeux me disent qu'il s'agit d'un texte. Que me dit le code ? Alors là, je rentre dans la partie code. Dans la partie code, j'ai un texte qui n'est pas du tout qualifié. Je suis à l'intérieur de la balise body. Alors, c'est vrai qu'on n'a toujours pas vu la balise body mais on va y venir, ne vous inquiétez pas Restons focalisé donc, sur cette partie uniquement intérieure à la balise body. J'ai du kilomètre de texte qui va de lorem ipsum jusqu'à porro quod à la fin. Aucune distinction, aucun découpage ou valeurs sémantique qui peut être identifié. Alors, venons découper ce texte, ici, par des balises. Et ici, je vais utiliser des balises complètement neutres, qui seront des divisions, qui vont me permettre de diviser le contenu. Et chaque balises vont s'imbriquer les unes dans les autres pour découper encore plus ce contenu. Et puis des balises de paragraphes qui vont venir tout simplement découper ces divisions sous forme de paragraphes, en disant : ici, j'ai une grosse division qui contient 3 petites divisions, ou 4, peut importe. Et chaque division contient des paragraphes. donc, qu'est ce que ça donne maintenant du point du navigateur ? Alors ici, on a vu le code à ce niveau là. Si je reviens dans mon navigateur, ici, je charge ma page, j'ai une découpe. Il n'y a rien qui va visuellement distinguer une division d'un paragraphe. J'ai simplement plusieurs lignes, qui sont découpées de différentes longueurs qui s'affichent comme ça dans le navigateur. Allons plus loin dans cette découpe maintenant. Je vais rentrer dans une troisième approche en disant : je vais utiliser les feuilles de style pour aller donner un style à ce contenu. Et en plus, je vais essayer de donner un sens sémantique à mes nommages. Simplement pour aller humainement les distinguer. Donc ici, je vais dire que ce gros div, ici, qui contient tout le monde, je lui place une classe de type article. Mon article sait analyser article, ah il s'agit d'un article, donc de quelque chose de complet. Ici, à l'intérieur, j'ai un div class header, ça veut dire que c'est l'en-tête, peut-être, de cet article. Et puis à l'intérieur, j'ai un paragraphe qui dit titre. Ah, ça, c'est un titre et ça c'est un simple paragraphe. Et puis, j'ai des sections, à l'intérieur, qui ont des titres. Donc, mon cerveau arrive à comprendre de quoi il s'agit. Et si je le cale sur une feuille de style css, puisqu'ici, on a calé une feuille de style css, je peux lui dire que la classe article a une marge, a un padding, a un border. La classe header, la classe footer, la classe section, toutes ces classes ont un stylage qui va me permettre de donner un rendu dans le navigateur. Donc, je retourne dans le navigateur, ici. Et si j'actualise ma page, je me retrouve avec une mise en forme visuelle qui permet à mon cerveau de comprendre qu'ici, j'ai un article qui est englobé par cette bordure. Ici, j'ai un en-tête, un chapeau qui était avec un titre et un paragraphe, qui est mis en valeur, etc... Alors, si je regarde directement la dernière page, j'ai exactement la même chose. Petit détail près, mais j'ai, en gros, la même chose qui se présente ici. Là, je vais ouvrir le capôt de la dernière. Qu'est-ce que j'ai ? Mais ici, j'ai simplement des balises qui sont article, header, h1, p. C'est à dire que j'ai utilisé non seulement des balises structurelles pour découper l'information, mais j'ai également utilisé des balises sémantiques, qui ont un sens direct et qui est compris par le navigateur. Parce qu'ici, dans ce cas-là, le navigateur ne comprendra pas qu'il s'agit d'un article, ne comprendra pas qu'il s'agit d'un header, ne comprendra qu'il s'agit d'un titre et encore moins, les lecteurs d'écran. Ce qui veut dire que mon information va pouvoir être falsifiée visuellement par des classes et des jeux de style. Mais ne sera structurellement pas sémantique ou ce ne sera pas du tout sémantique. Alors qu'ici, en utilisant html 5, et en utilisant des balises appropriées, je vais pouvoir obtenir le même résultat. Bien-entendu, vous verrez que dans les feuilles de style qu'on a utilisé, que la balise article utilise la même visualisation que la classe article, etc... Pour pouvoir porter cette ressemblance. Mais, j'espère que vous avez compris, en fait que le fond du sens structurel et sémantique c'est de pouvoir rendre une structure sémantique de manière standard et compris par l'ensemble des lecteurs qu'ils soient humains ou qu'ils soient machine, pour pouvoir parcourir ce contenu. Alors, peut-être qu'on est allé un peu vite si vous ne connaissez pas et vous n'avez jamais utilisé le html. On est allé dans des balises, dans des attributs, dans des classes dans tout un système d'utilisation de ce langage. Alors, je vous invite à continuer de parcourir la formation et si besoin était, de revenir sur ce chapitre pour mieux l'appréhender une fois qu'on aura vu les balises, les attributs et les classes.

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 !