Mise en Valeur des Textes en HTML

Balises de mise en valeur
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 de comprendre l'importance des balises HTML pour la mise en valeur du texte, d'apprendre à utiliser les balises EM, Strong, B, I et Mark efficacement, et d'optimiser le contenu pour les moteurs de recherche.

Cette leçon explore les différentes balises HTML pour mettre en valeur du texte, y compris EM, Strong, B, I et Mark, et leur impact sur la sémantique et le SEO.

Dans cette leçon, nous allons examiner comment mettre en valeur certains textes en HTML en utilisant des balises spécifiques telles que EM, Strong, B, I et Mark. La mise en valeur du texte à l'intérieur d'un paragraphe permet de conférer une importance particulière à certains mots ou groupes de mots. Par exemple, la balise EM permet de donner une importance particulière en affichant le texte en italique, tandis que la balise Strong affiche le texte en gras pour indiquer une importance accrue.

Nous examinerons les différences entre les balises inline et block. Les balises inline comme EM, Strong, B, I et Mark n'introduisent pas de retour à la ligne dans le texte, contrairement aux balises block comme P ou H1. En utilisant ces balises, nous pouvons non seulement améliorer la mise en forme de notre contenu mais aussi optimiser sa sémantique pour les moteurs de recherche.

De plus, nous aborderons le rôle des balises B et I dans HTML5, leur retour en vigueur et leur utilisation pour mettre en évidence des mots-clés ou des noms de produits dans un document. Enfin, nous discuterons de l'impact de ces balises sur les moteurs de recherche et leur utilisation optimale pour améliorer le référencement de votre contenu.

Voir plus
Questions réponses
Quelles sont les balises in-line abordées dans cette leçon ?
Les balises in-line abordées sont EM, Strong, B, I et Mark.
Quel est l'impact de la balise Strong sur le texte ?
La balise Strong affiche le texte en gras et indique une importance particulière pour les moteurs de recherche.
Pourquoi est-il important de distinguer les balises in-line des balises block ?
Il est important de distinguer les balises in-line des balises block car elles n'introduisent pas de retour à la ligne, ce qui affecte la structure et la mise en page du contenu.
Dans cette leçon, nous allons travailler la mise en valeur de certains textes. Pour cela, j'ai ouvert notre page de base, ainsi qu'un petit texte que je vais copier-coller directement dans ma page. La mise en valeur d'un texte permet, à l'intérieur d'un paragraphe, de placer certains mots entre des balises qui leur confèrera un intérêt particulier. Par exemple, nous avons la première mise en valeur que nous allons utiliser, c'est la balise EM. EM est une balise qui permet de donner une importance particulière à la lettre, aux mots ou au groupe de mots, tel que nous allons le faire ici. Il y a un second, nous allons en travailler un deuxième tout de suite, c'est par exemple Ile-de-France, qui est Strong. Je travaille les deux en même temps, parce que leur intérêt est semblable. Nous allons regarder dans quelques instants la mise en forme dans un navigateur, bien que cette mise en forme n'ait pas un intérêt capital par rapport à ce que nous souhaitons faire. Voici cette page affichée dans le navigateur. Les mots qui sont insérés dans la balise EM s'affichent en italique, et les mots qui sont insérés entre la balise Strong s'affichent en gras. Ne choisissez pas EM ou Strong pour l'intérêt du italique ou du gras, mais seulement par rapport à la sémantique. EM et Strong permettront, par exemple, au moteur de recherche de lui signifier que ces groupes de lettres, que ces groupes de mots, sont nettement plus importants que les autres. Ce qui fait qu'ils seront placés dans un endroit particulier de la base de données des moteurs de recherche. Lorsqu'un internaute recherchera le mot Ile-de-France, il aura plutôt, et que ce mot étant entre Strong à l'intérieur de votre page, et bien vous aurez entre guillemets plus de chances d'arriver en tête des résultats du moteur de recherche. C'est du guillemet parce qu'il n'y a pas que ces critères qui vont être pris en compte par rapport au moteur de recherche, malheureusement. C'est la même chose pour la balise EM. Alors, dans une moindre mesure, puisque EM présente un caractère un peu moins fort que la balise Strong. Ces deux balises vont permettre à la fois de faire une pseudo-mise en forme et également de donner un caractère particulier au mot. Alors, je vais ajouter cette fois une autre balise B, qui était un petit peu désuète en HTML4 et en XHTML, enfin XHTML plutôt, qui est revenue avec le HTML5. Cette balise permet d'afficher le contenu en gras également. Au niveau sémantique, la balise B permettra d'afficher un caractère particulier à ce texte, alors peut-être un mot-clé dans un document ou un nom de produit dans un article. Donc, c'est une chose assez intéressante. Ça confère au contenu une signification particulière. L'aspect visuel sera également en gras. De même, pour faire pendant à la balise EM, nous avons une balise I, qui initialement signifie italique et qui permet de donner une importance, une emphase particulière à cette portion de texte. Nous allons enfin aborder une autre balise, qui permettra de manière visuelle de faire un surlignage de la partie du texte entre cette balise. Alors, une portion de texte placée entre la balise marque n'a pas de signification particulière pour un moteur de recherche, et c'est un mot-clé. Une portion de texte placée entre la balise marque n'a pas de signification particulière pour un moteur de recherche. Il précise simplement que ce texte est surligné, comme si on le surlignait avec un marqueur fluo. Donc voilà, nous avons vu les principales balises de mise en valeur. Alors, petite précision, ces balises EM, Strong, Marque, I sont nommées des balises in-line. C'est une notion que nous n'avons pas encore abordée, mais les balises de type in-line n'introduisent pas de retour à la ligne. J'enregistre, et nous regardons. Voilà, nous avons bien le surligné, le RER D qui est écrit en italique. Donc, les caractères de ces balises n'introduisent pas de retour à la ligne, contrairement aux balises P ou aux balises H1. Le transport en Ile-de-France n'a pas de balise. Donc, il est pour l'instant directement placé dans la page. L'ensemble du texte est placé dans un paragraphe, et malgré tout, nous avons un retour de paragraphe ici. Ceci est dû au fait que la balise P a un espace, un retour, une marge, que nous allons voir un peu plus tard, qui est située juste avant et juste après. De même, si nous avions écrit le texte à l'intérieur de la balise H1, nous aurions eu sensiblement la même chose. Voilà, enregistré, et puis voilà. Alors effectivement, l'aspect est un peu différent, puisque H1 confère au contenu en texte un caractère gras, et puis un corps encore beaucoup plus important. Mais il faut bien distinguer ces deux types de balises. Toutes les balises H, la balise P, la balise adresse, que nous avons déjà vue, sont des balises de type bloc, c'est-à-dire qu'elles introduisent un retour à la ligne, alors que les balises quelques E, M, Strong, Mark, la majorité des balises en fait, sont des balises de type inline, donc qui n'introduisent pas de bloc. Nous verrons cela plus amplement, plus en détail, dans la construction de pages, mais cette première approche est malgré tout très importante.
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