Comprendre la Sémantique des Balises HTML

Balises pour du sens dans un texte (2)
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 comprennent :
- Comprendre l’utilisation de la balise pré pour conserver les espaces dans le texte.
- Apprendre à utiliser les balises sup et sub pour ajouter des exposants et indices.
- Améliorer la présentation et l’accessibilité du contenu HTML.

Apprenez comment utiliser les balises pré, sup et sub pour structurer et présenter correctement vos contenus HTML.

Dans cette leçon, nous explorons la sémantique de trois balises HTML importantes : la balise pré, la balise sup pour les exposants, et la balise sub pour les indices. La balise pré est particulièrement utile pour conserver les espaces dans le code, alors que les balises sup et sub permettent respectivement de signifier les exposants et les indices dans du texte. Par exemple, 100 m2 et H2O s'affichent correctement grâce à ces balises.

La balise pré permet de conserver les espaces et les retours à la ligne tels que définis dans le code, ce qui est utile pour afficher du texte formaté comme du code source ou des horaires de train. Cependant, il est crucial de bien fermer cette balise pour éviter des rendus incorrects sur le reste de la page.

La compréhension et l'utilisation correcte de ces balises améliorent non seulement l'accessibilité et la lisibilité du contenu mais aussi son interprétation par les moteurs de recherche, garantissant ainsi une structure sémantiquement solide.

Voir plus
Questions réponses
Qu'est-ce que la balise pré en HTML?
La balise pré est utilisée pour conserver les espaces et les retours à la ligne tels que définis dans le code source, affichant le texte dans une police à espacement fixe.
Comment utilise-t-on la balise sup en HTML?
La balise sup en HTML est utilisée pour spécifier du texte en exposant, comme dans 100 m2.
Pourquoi est-il important de fermer correctement une balise pré?
Il est important de fermer correctement une balise pré pour éviter que le navigateur traite tout le contenu suivant comme faisant partie de cette balise, ce qui pourrait altérer l'affichage de la page.
Dans cette leçon, nous allons continuer la sémantique de quelques balises, notamment avec la balise qui se nomme pré, les balises qui se nomment sup et pub. Alors, la balise pré est une balise dont on ne se sert pas très souvent malgré tout, mais qui permet de conserver les espaces que nous avons réalisés dans le code. Pour vous montrer cela, par exemple, je vais écrire une balise pré avec un mot, et puis je fais un grand espace ici, et puis un deuxième mot. Voilà, nous allons regarder ce que ça donne dans un navigateur. Dans un navigateur, en fait, cela s'affiche l'un à côté de l'autre. Le navigateur n'a pas pris en compte les différents espaces que j'ai pu écrire ici. Si je remplace cette balise pré par une balise qui se nomme pré, le navigateur prendra en compte mon espace. Je reprends le navigateur, j'actualise, et voilà. Nous avons ainsi la prise en compte de l'espace que j'ai écrit. En plus, le navigateur affiche ce texte dans une police que l'on appelle l'espacement fixe, qui est en l'occurrence du courrier sur mon ordinateur. Cette balise est parfois relativement intéressante, notamment pour pouvoir conserver des espaces que l'on aurait écrits. Par exemple, dans un petit tableau, si j'écris des horaires de train, par exemple, 6h12, tabulation, je vais écrire un petit lettre horizontal qui est fait sur ma Kintosh avec ALT majuscule L, qu'on appelle également pipe. Et puis, tabulation, encore ALT majuscule L. Et puis là, cette fois-ci, on va mettre 6h40. Je vais même réaliser une seconde ligne. Je vais faire simplement un copier-coller. Voici, on va mettre 7h à chaque fois. Voilà, nous allons regarder maintenant cette page dans le navigateur. J'enregistre au préalable, j'actualise, et nous avons bien une prise en compte de nos différents espaces, ce qui était assez intéressant. Nous verrons également dans de prochaines leçons. J'ai oublié la fin de la balise près, qui est relativement importante. Pour souligner cette erreur, je n'ai pas mis la fin de la balise près, le navigateur a correctement affiché, mais si j'avais continué ma page, le navigateur aurait continué à croire que j'étais toujours dans la balise près et aurait donc affiché de manière incorrecte différents éléments pour la suite de la page. Là, ça s'est bien affiché parce que j'étais sur la dernière balise de ma page. Je vais continuer avec une balise près et pour vous montrer comment il est possible de signifier au navigateur qu'il s'agit d'écrire un indice ou un exposant. Par exemple, une maison de 100 m². 100 m², je l'écris de manière basique de cette manière, mais avec une balise qui s'appelle sup, je vais pouvoir signifier qu'il s'agit d'un exposant. De la même manière, nous allons pouvoir écrire, alors j'écris sur un autre paragraphe, un indice, par exemple o, de petit point, h2o. Pour pouvoir placer cet élément en tant qu'indice et surtout le signifier de manière sémantique au navigateur, on écrit la balise sup pour insérer ce petit 2. Voici, de nouveau dans notre navigateur, nous avons bien 100 m² et puis h2o. Cela est relativement important déjà pour pouvoir afficher directement ce type d'élément, au carré et puis le petit indice, mais également permettra au navigateur, au moteur de recherche, de bien se retrouver et d'avoir une structure correcte de la page.
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 ? Le fonctionnement des sites web ainsi que la structure d'une page HTML.  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 la structure du CSS, les tableaux, boutons et formulaires en CSS.  Vous suivez la 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 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