Introduction à la Sémantique des Balises HTML5

Balises pour du sens dans un texte (1)
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 :
1. Comprendre les différentes balises de texte en HTML5.
2. Apprendre à utiliser correctement les balises de titre et de paragraphe.
3. Savoir utiliser des balises spécifiques comme ADDRESS, DFN et TIME pour enrichir la sémantique de vos pages.

Ce tutoriel explore la sémantique des balises HTML5, leur utilisation correcte et leur impact sur la structure sémantique des pages web.

Dans cette leçon, nous abordons la sémantique des balises HTML5. Nous commençons par examiner un document contenant toutes les balises en HTML5, puis nous nous concentrons sur celles relatives au texte. Vous apprendrez à utiliser les balises de titre H1 à H6 pour structurer vos documents, ainsi que des balises spécifiques telles que ADDRESS, DFN, TIME et autres. Nous discuterons de l'importance de la sémantique dans le développement web moderne et de la manière dont elle aide les moteurs de recherche et les outils d'accessibilité à comprendre le contenu de vos pages. Enfin, vous découvrirez des balises comme BR pour les retours de ligne, tout en apprenant à éviter les styles implicites générés par certaines balises pour mieux séparer le fond et la forme.

Voir plus
Questions réponses
Quelle est la balise utilisée pour décrire l'adresse du webmaster?
La balise ADDRESS est utilisée pour spécifier l'adresse du webmaster.
Pourquoi est-il déconseillé d'utiliser la balise <code>BR</code> de manière excessive?
Il est déconseillé d'utiliser la balise BR de manière excessive car cela inclut des styles implicites, et il est préférable de séparer le fond et la forme en utilisant des propriétés CSS pour la mise en page.
Que signifie la balise <code>DFN</code>?
La balise DFN est utilisée pour indiquer que le texte contenu est une définition.
Dans ce tutoriel, nous allons aborder la sémantique des balises, enfin en tout cas un début de sémantique de balises. Nous allons ouvrir tout d'abord le fichier que vous pouvez consulter également, qui se situe dans le dossier concernant cette leçon, qui s'appelle balises.pdf. Dans ce fichier, nous avons l'ensemble des balises du HTML5. Il y en a donc une petite centaine. Ces balises sont rapertoriées par ordre alphabétique, ce qui était plus pratique pour les retrouver facilement. Mais nous allons, dans cette leçon, aborder les balises qui concernent essentiellement le texte. Nous avons déjà vu les balises H. Nous allons voir ensuite de nouveau la balise P, la balise DFN, la balise KBD, la balise ADDRESS, ainsi que la balise TIME, par exemple. C'est un premier début pour voir la signification des balises et les utiliser dans les bonnes conditions. Je referme ce document et je reprends la page de base que nous avons créée précédemment. Nous allons commencer par la balise. Je vous rappelle que vous devez utiliser les balises H1 pour différents niveaux de titre. Donc H1, niveau 1. Je vais remettre l'ensemble de ces balises. H2. Niveau 2. H3. H4. Et enfin, notre H6. Nous allons ensuite écrire un paragraphe. Paragraphe, tout simplement. Qui peut être sur plusieurs lignes, sur autant de lignes que vous le souhaitez. Et puis, ces balises ne servent qu'à faire des titres et des paragraphes. Il existe une balise qui permet de spécifier l'adresse du webmaster. C'est la balise qui se nomme ADDRESS. Ici, l'adresse web du webmaster. Cette balise ne sert pas à écrire l'adresse postale de votre société. C'est uniquement, normalement, l'adresse du webmaster. Nous allons voir également une autre balise. Qui permet de réaliser, à l'intérieur d'un paragraphe, un retour de ligne. Alors, je vais copier-coller simplement ce paragraphe. Et puis, j'ajoute ici une balise qui s'appelle BR. Qui va permettre d'imposer un retour à la ligne à l'intérieur du paragraphe. Donc, nous sommes toujours dans le même paragraphe. Mais, il va y avoir un retour de ligne. Alors, évitez d'utiliser trop cette balise. Car, elle met déjà en forme. Et la philosophie générale de la conception de pages web aujourd'hui est de séparer bien le fond et la forme. Donc là, nous sommes dans le fond. C'est-à-dire, nous créons les balises HTML. La forme sera réalisée avec les propriétés CSS. Je vais de nouveau coller mon paragraphe. Et je vais ajouter d'autres balises qui portent une certaine signification. Alors, par exemple, on va écrire une petite phrase. On ne doit pas écrire. Donc, le mot écrire s'écrit bien avec un accent directement. Écrire. DEL. Qui va permettre de signifier que ce mot a été effacé. Adresse. Donc, fin de DEL. On va voir tout de suite dans le navigateur ce que ça peut donner. Une balise INS. Qui signifie que ce sont des choses qui ont été insérées. Ni. Adresse. Avec deux D, R, E, deux S. Voici, j'enregistre. Et nous allons regarder dans un navigateur. Donc, nous avons nos six niveaux de titre. Alors, vous pouvez remarquer qu'ils ont déjà une certaine mise en forme. Mais surtout, ne vous attachez pas à cette mise en forme. N'utilisez pas une balise H1 parce que sa graisse et son niveau de corps vous semblent intéressants. Utilisez-la parce que c'est un premier niveau. Uniquement. Nous verrons par la suite comment gérer cette mise en forme, cette graisse et ce corps. Ensuite, notre paragraphe. Ensuite, ici, nous avons l'intérieur de la balise ADDRESSE. Qui, pour la même raison, ne doit pas être prise parce que c'était écrit en italique. Mais bien parce qu'il s'agit d'une adresse du webmaster. Et notre paragraphe, ensuite, avec son retour de ligne. Avec le petit BR que nous avons inséré. Ensuite, les deux balises nouvelles que nous avons écrites. Qui est DEL. Donc, qui permet de définir ce que nous avons inséré. Qui est DEL. Qui permet de dire ce mot a été écrit mais ensuite a été effacé. Et ensuite, celui-là. Qui nous permet de dire nous avons inséré celui-là. Celui-là s'écrit avec le barré à l'intérieur du mot. Celui-là s'écrit avec une barre située en dessous. Celui-là, DEL, permet de dire qu'il a été effacé. Celui-là permet de dire qu'il a été inséré. Et enfin, celui-là est tout simplement la bonne écriture à l'intérieur du P. Donc, au niveau sémantique, il est très important de bien utiliser la bonne balise au bon endroit. Pour ça, au niveau de l'adresse et au niveau du paragraphe ainsi que des différentes lignes. Nous allons terminer par voir deux autres balises. Alors, une balise qui se situe à l'intérieur du paragraphe. Et qui est une balise qui permet de dire, attention, à partir de là, il s'agit d'une définition. Donc, des FN. Par exemple, la balise adresse. Puisque nous avons travaillé là-dessus depuis le début. Balise d'adresse. Je referme, des FN. Donc ça, c'est le titre de notre définition à l'intérieur du paragraphe. Et je continue par une description. La balise, adresse, etc. Et fin de paragraphe. Donc, nous avons défini ici le titre d'une définition. Avec des FN. Nous allons poursuivre. Par exemple, un paragraphe qui signifie que nous souhaitons donner la date de la dernière mise à jour de notre site. Donc, date de la mise à jour. Et la date, deux petits points. Par exemple, 30 mai. Alors, pour écrire cette date, il est intéressant de l'insérer à l'intérieur d'une balise. Ce qui va donner une indication au moteur de recherche, par exemple. Et nous utiliserons la balise time. Avec un attribut. Puisque nous avons vu déjà les attributs. Update. Égal. Et nous l'écrivons en système international. Alors, 2014. Le mois. Donc, le mois de mai, 05. Avec un petit tiret entre les deux. Et le jour, 30. Le tout, entre guillemets, parce qu'il s'agit d'un attribut. Et je ferme ce chevon. Voilà, donc nous avons une date. Qui est le 30 mai 2014. Qui a été signifiée pour un moteur de recherche, ou pour tout autre type de navigateur. Que nous sommes bien à l'intérieur d'une date, grâce à la balise time. Donc, encore une fois, il s'agit de donner du sens aux différentes balises. J'actualise. Et nous avons ici nos différentes nouvelles balises. Notamment la date, qui n'a pas changé d'aspect, malgré le fait que l'on l'ait mise à l'intérieur de cette balise time.
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