Découvrez les nouvelles balises HTML5 header section nav footer

Des nouvelles balises HTML5 font leur apparitions pour simplifier la vie des développeurs 😉

Tout sur les balises header, section, nav et footer se trouve dans le cours vidéo ci-dessous. Vous avez même des balises moins connus mais pourtant très pratique comme progress, mark…

[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]

Découvrez les nouvelles balises HTML5 header section nav footer

Bonjour à tous et bienvenu sur Développement Facile.

Ce nouveau cours est toujours consacré à HTML 5, je vais vous présenter les nouvelles balises que vous allez voir directement, réutiliser dans votre code source. Vous avez des nouvelles balises HTML 5, les balises header, nav, footer, et aside. Pardon excusez-moi, désolé, il faut savoir que ces nouvelles balises sont très utiles au développeur, pour comprendre l’architecture de la page, souvent sur les gros sites Internet complexes il y a plusieurs développeurs qui travail sur des pages différentes, et ils s’échangent les pages en fonction des fonctionnalités ajoutées, pour ce repérer beaucoup plus rapidement, ces nouvelles balises ont été créées, donc la balise header regroupe tous les éléments en tête de la page, par exemple, la bannière, le menu. La balise nav regroupe les éléments d’un menu de navigation, si vous mettez un menu ici, vous le mettez dans la balise nav, la balise footer elle, elle regroupe les éléments du pied de page donc en bas si il y a un menu nous contacter etc. la balise nav et tout autour la balise footer, et la balise aside ça indique qu’il s’agit des d’éléments annexes complémentaires au contenu.

Les nouvelles balises HTML 5

Il faut savoir que le contenu principal est organisé en deux catégories, vous avez la balise section qui détermine une partie de contenu de la page qui se rapporte à un thème déterminé, et vous avez la balise article qui définit un contenu indépendant du document, qui possède une identité à part, ça peut être l’article d’un blog, un post sur un forum ou un produit dans un site e-commerce. Les sections pour le thème du site et la balise article pour un contenu indépendant tout simplement, c’est ça à retenir.

Pensez à utiliser ces balises HTML 5, comme je vous l’ai dit, ça va vous permettre d’organiser votre page HTML, et qu’elle soit compréhensible par d’autres développeurs. La balise hgroup elle peut contenir un groupe de balises h, donc si vous définissez une balise h1 avec le titre de l’article, une balise h2 avec les sous-titres, mettez-les dans une balise group et dans la balise header, en principe le titre de la page, il y a la bannière, le menu, le titre de la page, c’est l’entête de votre page Web.

Vous avez également la balise mark qui met en surligné sur fond jaune du texte, ça permet de mettre du texte en valeur avec le surlignage jaune, donc le HTML 5 dans un paragraphe p, le HTML 5 entre les balises mark, sera surligné sur fond jaune, c’est très pratique. Ca va vous permettre de mettre en valeur du texte dans votre page HTML, tout simplement.

Vous avez également la nouvelle balise HTML 5 progress, qui vous permet de faire une barre de chargement, en principe vous combinez cette balise avec du JavaScript, ça vous permet de mettre à jour l’état d’avancement en direct, vous avez deux attributs, l’attribut value pour indiquer la valeur de la progression en pourcentage et l’attribut max pour donner le maximum atteignable en pourcentage, tout en sachant qu’en principe on utilise de 0 à 100 % donc max sera toujours à 100, pour 100 %, votre balise progress et la value donc la balise value sera mise à jour automatiquement en JavaScript, avec le nombre, donc vous avez 80 et vous verrez une barre de défilement qui progresse, très intéressant pour mettre un peu d’interactions sur votre site Internet, lorsque vous mettez HTLM 5, vous rechargez uniquement des parties d’une certaine page Web, pensez à mettre une barre de progression, comme ça à l’utilisateur, il sait qu’il doit patienter et justement au lieu qu’il ferme la page directement en disant « ah ça bug j’ai cliqué sur le liens le contenu ne s’affiche pas » il va voir la progression et il va patienter, attendre que le contenu s’affiche.

Vous avez également la balise figure qui est utilisée pour regrouper des éléments comme des vidéos, des images et du texte, la balise figure, et la balise figcaption qui va avec, qui fournit une légende aux éléments regroupés, donc on utilise souvent la balise figure pour ajouter plusieurs images, vous avez un exemple qui s’affiche devant vous, avec figure l’image logo1, l’image logo2, et figcaption ça ajoute une légende pour ces deux images, les logos dev-facile, donc pensez à utiliser ces nouvelles balises HTML 5, elles vous seront très utiles.

Votre plan d’actions !

Comme d’habitude vous allez retrouver un code source disponible en téléchargement sous ce cours vidéo, je vous ai présenté les nouvelles balises HTML 5, il faut savoir que bien évidemment il y a en a d’autres mais moi je préfère pour que ce soit plus facile pour vous d’assimiler le contenu de faire des vidéos toujours de moins de 10 minutes donc entre 5 et 10 minutes, comme ça vous téléchargez le code source de la vidéo, vous l’appliquez directement dans votre site Internet, c’est très pratique, donc bien évidemment il y aura d’autres cours sur les nouvelles balises HTML 5. Si vous avez des questions, posez-les directement sous ce cours vidéo et moi je vous dis à très bientôt sur Développement Facile.

[/ppmtoggle][/ppmaccordion]

Téléchargez le code source HTML5

Retrouvez un exemple de code source HTML5 avec ces nouvelles balises.

Connaissiez-vous ces balises ?

Si vous les connaissiez déjà, dites-moi dans les commentaires, votre technique pour les utiliser.