L'essentiel du HTML5

Parcourir les diverses balises

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Concernant les balises HTML, comprenez leur rôle et le type de balises qu'elles peuvent contenir. Une page du W3C sert de référence et il est toujours de bon ton d'aller la consulter.
05:26

Transcription

Concernant les balises, que celles-ci soient utilisées dans la partie head ou dans la partie body dès qu'elles sont dans un document HTML, les balises vont être ouvrantes et fermantes. La seule différence entre l'ouvrante et la fermante c'est que l'ouvrante va être simplement un label contenu entre deux chevrons, ouvrant et fermant. Et la balise de fermeture va être la même balise exactement, mais avec un slash devant le label. Faites attention de ne pas ouvrir une autre balise qui serait par exemple « a » ici, et de venir l'enchevêtrer comme ça. Ça ce n'est pas permis, on ne peut pas imbriquer des balises ouvrantes et fermantes de manière anarchique. Ici on dit que la dernière ouverte est la première fermée, toujours. Par contre ça m'empêche pas d'aller en placer une à l’intérieur, je pourrai venir placer la balise « i » , ici, à condition que la balise « i » soit fermée avant que la balise « a » se ferme. Ensuite il y a des questions de syntaxes qui disent : attention quand une balise est ouverte, par exemple comme la balise « IMG » , on va devoir la fermer, puisqu'il n'y a pas de balise fermante pour la « IMG », c'est une balise solo. Et bien à ce moment-là soit on la ferme avec un slash à l’intérieur et à la fin de la balise courante, soit on ne le fait pas, HTML5 ne nous oblige pas. Et même on est pas obligé de fermer des balises comme la balise « il » , ici alors, si je prends la balise « ul » , on n'est pas obligé de fermer toutes les balise « li » qu'il va contenir. Voilà donc c'est à vous de voir qu'est-ce que vous préférez comme syntaxe. Personnellement et là je n'engage que ma perception, je préfère avoir une balise « li » fermante ici, parce que c'est beaucoup plus explicite quand on relit le code surtout si la balise « li » contient bien d'autres choses que simplement du phrasing content. Alors justement pour voir qu'est-ce que peut contenir une balise, je vous invite vraiment à vous projeter sur un site, qui est assez intéressant, qui est le site W3C. Et sur ce site on a l'intégralité des éléments HTML, alors pas tout à fait l’intégralité manquent, par exemple la balise main, il manque certaines balises. Et j'attends avec impatience que ce document soit mit à jour. Mais vous avez ici d’intégralité des balises et justement de voir ce qu'elles peuvent contenir. Alors si je prends par exemple la balise section, on va la chercher, « SA » section voilà, si je l'ouvre, qu'est-ce qu'elle peut contenir ? Mais le permitted content, ici voyez que c'est « zero or more style elements, followed by flow content ». Ça veut dire qu'il peut y avoir un élément de type style à l’intérieur d'une section, et ensuite on peut placer du flow content. Qu'est-ce que c'est que le flow content ? Je vais cliquer là dessus et on me dit le flow content ça consiste dans des flows elements avec ou pas des « normal character data ». Alors, les « normal character data », c'est quoi ? C'est tout simplement toutes les entités HTML, qu'on peut avoir ou du texte pur et dur. Les entités HTML, on y reviendra juste après. Et le flow element c'est quoi ? Mais ici les flows elements vous voyez que se sont des phrasing elements, c'est à dire les phrasing elements c'est les balises , « EM », « Strong », « Small » etc. Plus toutes les balises, qui ne seraient pas inclues là dedans. Faites attention il peut y avoir d'autres redondances, par exemple ici on voit que le « A » est cité ici, et ici. Mais ici on va avoir des balises de types « ul », on va avoir des balises de type « h6 », etc, que l'on n'aurait pas dans le phrasing elements ici, voyez ? Donc c'est très rapide de pouvoir venir consulter ce document, pour savoir ce qu'on peut placer à l'intérieur de nos balises. Par exemple ici je prends une balise à polémique qui est la balise « A » , ça m'est arrivé de dire : mais j'englobe toute une série d’élément. Certains utilisateurs n'aiment pas faire ça, et regardez le permitted content parent, c'est transparent. Qu'est-ce que veut dire transparent ? Ça veut dire que c'est soit du phrasing soit du flow et pas dans n'importe quel cas. C'est si le parent dans lequel le « A » est placé et un contenu à type prhasing. Le « A » sera un contenu à type phrasing. Donc si je suis dans une balise strong, par exemple que j'ai un élément « A » à l’intérieur, forcement dans mon « A » je ne pourrai mettre que des phrasing content. Par contre si je suis dans un élément de type header donc, de type à flow content dans mon élément de type « A », je peux avoir des éléments de types flow contents. Voilà donc c'est très important de venir, regarder et puiser l'information là dessus Vous avez les éléments de liste par là, je me souviens une fois d'une longue discussion ou la personne me maintenait qu'on pouvait mettre que du texte. Et en fait non, regardez dans le « li » élément on peut venir placer du flow content, donc c'est très important, on va pouvoir mettre des sections, on va pouvoir mettre des titres, des images, des paragraphes à l’intérieur d'un élément de type « li ». Ce qui rejoint ce que je vous disais juste avant, de penser à fermer la balise parce qu'après c'est beaucoup plus facile de pour voir où se termine cet élément. Et donc dès qu'on a adopté le syntaxe d'écriture, maintenez votre homogénéité d'écriture. Ça sera beaucoup plus souple à maintenir sur le thème. Allez, un dernier pour la route, pareil une fois sur l'élément « figure », la personne écrivait un tout ce qu'elle voulait à l’intérieur de « figure » et au milieu de tout ça il avait fig caption. Attention, regardez c'est bien clair ici, permitted content, « One fig caption element », Il doit y en avoir un, obligatoirement qui commence et qui est suivit par du flow content. Ou alors il y a du flow content et là à ce moment là le fig caption devient optionnel, n'est pas nécessaire. Mais si vous le mettez il terminera le flow content s'il n'a pas été au départ. On ne peut pas avoir un fig caption perdu au milieu de nos contenus. Donc c'est assez important, de venir faire un tour sur cette page, pour voir la manière dont on doit écrire nos balises, à quoi elles servent et qu'est-ce qu'elles peuvent contenir.

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 !