Les Balises HTML Structurantes

Balises de structurantes
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Cours HTML5 et CSS3 / Part 1
Revoir le teaser Je m'abonne
5,0
Transcription

39,90€ Je commande

À partir de
27€ /mois
Je m'abonne à Elephorm

Description Programme Avis
5,0
39,90€ Je commande

À partir de
27€ /mois
Je m'abonne à Elephorm

Les objectifs de cette vidéo sont d'introduire les balises HTML structurantes et de montrer comment les utiliser pour organiser efficacement le contenu d'une page web.

Explorez les balises HTML structurantes comme header, section, article, aside et footer pour mieux organiser votre code.

Dans cette leçon, nous abordons en détail les balises HTML structurantes qui sont essentielles pour organiser le contenu de vos pages web. Nous examinerons les balises header, section, article, aside et footer, en expliquant leur utilisation et leur importance. Ces balises vous permettent de créer une structure cohérente et logique à votre code HTML, facilitant ainsi la maintenance et l'accessibilité de votre site web.

Par exemple, la balise header est utilisée pour définir l'en-tête d'un document ou d'une section, et peut contenir des éléments tels que le logo, le menu de navigation et autres informations introductives. La balise section définit une section générique dans un document, idéale pour grouper des contenus thématiques. L'article représente un contenu autonome, tel qu'un post de blog ou une nouvelle, tandis que aside désigne des contenus connexes comme des publicités ou des liens externes. Enfin, la balise footer est utilisée pour le pied de page de votre document.

Voir plus
Questions réponses
Quelle balise définit une section générique dans un document HTML?
La balise section est utilisée pour définir une section générique dans un document HTML.
Quelle est l'utilisation principale de la balise <em>aside</em>?
La balise aside est utilisée pour représenter des contenus connexes au contenu principal, tels que des publicités, des liens externes ou des informations supplémentaires.
Pourquoi utiliser la balise <em>header</em>?
La balise header sert à définir l'en-tête d'un document ou d'une section, contenant généralement des éléments tels que le titre, le logo et le menu de navigation.
Nous allons voir à présent un type de labelise que nous n'avons pas encore étudié, que nous allons regarder sur un visuel ci-dessous, mais que nous n'utiliserons pas encore tout de suite car elle marche forcément avec des styles CSS. Alors pour l'instant nous pourrions les utiliser mais le résultat ne serait pas directement visible à l'écran. Pour une telle page, donc ça c'est une page que nous réaliserons dans les prochains tutos, nous avons ici une page complète qui comprend une zone d'entête, une zone de contenu, un pied de page et puis différentes petites choses. Alors cette page, elle peut être structurée, pour l'instant nous avons réalisé des balises H1, P, d'autres systèmes de balises qui nous permettent de mettre en valeur certains types de textes, nous avons réalisé également des balises de formulaire, des balises de tableau. Mais pour réaliser une telle page, nous utilisons toujours les mêmes balises, mais nous utilisons en plus des balises structurantes. La grande zone qui est située en haut, finalement, c'est une zone d'entête et il existe une balise qui permet de dire ça c'est une zone d'entête, donc une balise qui s'appelle header. Donc nous incorporerions l'ensemble de toutes les balises qu'il y a dedans, donc par exemple le menu serait fait avec une balise de type list, de type ulli, et bien tout ça va être englobé dans une balise header. Ensuite, en vert, là, qui est apparu à ce niveau-là, et bien, c'est nos fameuses balises ul, dont je vous ai parlé, donc c'est notre menu, donc tout ça, c'est incorporé à l'intérieur. La zone qui vient de se créer, tout en bas, c'est une grande balise de section, c'est-à-dire qu'elle traite d'un sujet particulier, c'est le sujet, finalement, de notre site, sachant que des balises section, on peut en avoir autant que l'on souhaite, il peut y avoir des sections dans des sections, etc. Alors une section, normalement, se justifie par le fait que l'on ait besoin d'un titre, par exemple, ou c'est quelque chose de nouveau dans la page. Ici, à l'intérieur, au milieu, nous avons ce qu'on appelle un article. Alors un article est constitué d'un corps, donc c'est souvent du paragraphe, là, c'est du paragraphe et des images, et puis d'un titre, qui est situé en haut, donc l'Horaim Ipsum, pour le cas présent. Un article, il est très important d'avoir bien ça en tête, c'est que ça doit être autonome. A la limite, si je pourrais copier-coller, je pourrais extraire l'ensemble et le mettre sur un autre site, ou en mettre une partie sur un blog, par exemple. Donc un article doit être une section autonome. Par exemple, la zone située à gauche, ici, météo, ne peut pas être un article, puisque ce n'est qu'une partie. Il faut que je clique, il faut que j'aille voir autre chose, il faut que je fasse une action pour voir l'ensemble du contenu. Donc je n'ai pas tout, ça ne peut pas être un article. Ici, ça en est un, puisque on considère que nous avons l'ensemble de ce qui doit être dit. Dans la partie gauche, nous avons une balise qui s'appelle DIV, ça veut dire division. Donc c'est une balise qui sert quand on ne sait pas quoi mettre. Tout simplement, là, elle m'a servi à faire de la mise en forme. C'est tout à fait ça, de nous à vous. Ce sont des informations supplémentaires, finalement cela représente un second menu, nous avons le menu situé en haut avec un tas de choses, et puis un autre menu, peut-être vertical, un peu différent, qui nous permet d'accéder à d'autres informations. Enfin, sur la partie droite, nous avons une autre balise qui s'appelle ASIDE, qui permet de placer des éléments connexes au site. Alors nous aurions pu aussi pratiquement mettre ASIDE ici, bon, ce n'était pas l'objet par exemple de la démonstration, mais cela aurait pu être valable. Alors ASIDE, c'est forcément des éléments connexes, alors ici, moi j'ai mis une publicité, mais c'est tout à fait le cas. Tout ce qui est publicité, on va y mettre, mais on pourrait y mettre également des choses telles que météo, point de vente, calendrier, challenge du mois, donc ce n'est pas dans le site, ça n'a pas directement trait au site, mais ce sont des choses qui sont forcément qui se rapprochent au site. Donc ASIDE, ce sont des choses en plus. Parfois même, dans la partie ASIDE, il y a des liens qui sortent de votre site. Et enfin, dans la partie inférieure, footer. Alors tout ça, ce sont de véritables balises, donc un petit chevron, header, fin de header. Là, il y a le menu, div, fin de div, article, fin de article, side, fin de side, footer, fin de footer. Donc voilà, ce sont des balises déstructurantes, elles permettent d'organiser son code. Elles ne vont pas réaliser quelque chose immédiatement, donc c'est pour ça que nous ne les avons pas étudiées, c'est pour ça que nous ne les avons pas encore bien manipulées. Ce sera dans la seconde partie que nous allons aborder très vite, mais elles sont quand même importantes de les voir dès maintenant, puisqu'elles permettront de les découvrir ou de les redécouvrir de manière beaucoup plus simple.
8 commentaires
5,0
8 votes
5
4
3
2
1
Polyores
Il y a 11 months
Commentaire
Bravo et bravo encore. Belle méthodologie. Hâte de voir la suite de la démystification du Html
ralahoul
Il y a 1 year
Commentaire
Une formation très intéressante et très bien construite.
eric.gk78
Il y a 3 years
Commentaire
excellent, compréhensible pour les débutants
alexwebtv
Il y a 3 years
Commentaire
Très bonne formation .
gabamano85
Il y a 3 years
Commentaire
Très belle présentation et facile à comprendre même pour un novice.
olivier_89
Il y a 3 years
Commentaire
explication très organisée et simple de comprendre pour les débutants
a.platiau_1
Il y a 3 years
Commentaire
Super formation. Très claire et très bien organisée.
ezerrou
Il y a 3 years
Commentaire
est ce la 2éme partie existe sur ce cours?
Nos dernières formations XHTML/CSS
  • Créer un site web avec HTML/CSS
    Découvrir
    Avant d'apprendre à développer et mettre en ligne votre propre site Internet, il est important de bien connaître les bases du HTML et du CSS. Dans cette formation en vidéo et cours en ligne, vous découvrez ce qu'est le HTML et CSS ?&nbsp;Le fonctionnement des sites web ainsi que la structure d'une page HTML.&nbsp; Vous êtes guider pas à pas pour apprendre à intégrer des images, de l'audio et des vidéo. Vous apprenez à gérer et ajuster les polices en CSS, à comprendre&nbsp;la structure du CSS, les tableaux, boutons et formulaires en CSS.&nbsp; Vous suivez la&nbsp;méthodologie de mise en page CSS et à styliser une page web avec le CSS. Formation pratique vous créez et stylisez les éléments principaux d'un site web avant de&nbsp;mettre en ligne et indexer un site, d'ajouter des éléments graphiques en CSS et d'animer un site en CSS
    16h20 14 leçons
  • Apprendre CSS 3
    Découvrir
    14h58 172 leçons 4,50 / 5
  • Apprendre HTML 5 - Les fondamentaux
    Découvrir
    Maîtriser les fondamentaux du language HTML5.
    5h11 101 leçons 3,67 / 5
  • Maîtriser Materialize CSS - Le framework pour le Material Design
    Découvrir
    Maîtriser le framework Materialize CSS pour faire du Material Design
    2h22 20 leçons
  • Maîtrisez les Flexbox CSS - La mise en page responsive
    Découvrir
    Maîtriser la mise en page grâce à la flexbox issue du CSS 3
    46min 9 leçons 4,33 / 5