Articles
Introduction à HTML
Balises liées au texte

Balises liées au texte

Cet article explique les balises liées au texte.

L'explication est divisée en balises sémantiques et non sémantiques.

YouTube Video

Créer du CSS pour l'aperçu

html-tags.css 
  1body {
  2    font-family: Arial, sans-serif;
  3    line-height: 1.6;
  4    margin: 20px 20px 20px 20px;
  5    background-color: #f4f4f9;
  6    color: #333;
  7}
  8
  9header h1 {
 10    font-size: 24px;
 11    color: #333;
 12    text-align: center;
 13    margin-bottom: 20px;
 14}
 15
 16h2, h3 {
 17    color: #555;
 18}
 19
 20h2 {
 21    font-size: 20px;
 22    border-bottom: 2px solid #ccc;
 23    padding-bottom: 5px;
 24}
 25
 26h3 {
 27    font-size: 18px;
 28    margin-top: 20px;
 29}
 30
 31p, pre {
 32    margin: 10px 0;
 33    padding: 0;
 34}
 35
 36ul, ol, dl, menu {
 37    margin: 0;
 38}
 39
 40pre {
 41    background-color: #f0f0f0;
 42    border-left: 4px solid #ccc;
 43    padding: 10px;
 44    overflow-x: auto;
 45}
 46
 47p.sample, .sample {
 48    background-color: #e7f4e9;
 49    padding: 10px;
 50    border-left: 4px solid #7bbd82;
 51    color: #333;
 52}
 53
 54p.sample-error, .sample-error {
 55    background-color: #f4e7e7;
 56    padding: 10px;
 57    border-left: 4px solid #bd827b;
 58    color: #333;
 59}
 60
 61p.sample-warn, .sample-warn {
 62    background-color: #f4f1e7;
 63    padding: 10px;
 64    border-left: 4px solid #bda97b;
 65    color: #333;
 66}
 67
 68code {
 69    padding: 2px 4px;
 70    border-radius: 4px;
 71    font-family: monospace;
 72}
 73
 74span {
 75    font-weight: bold;
 76}
 77
 78main {
 79    padding-bottom: 100px;
 80}
 81
 82article {
 83    background-color: white;
 84    padding: 20px;
 85    margin-bottom: 10px;
 86    border-radius: 8px;
 87    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 88}
 89
 90section {
 91    margin-bottom: 20px;
 92}
 93
 94table {
 95    width: 100%;
 96    border-collapse: collapse;
 97}
 98
 99th, td {
100    border: 1px solid #ddd;
101}

Balises de base liées au texte

Balise <div>

This is a division of content.
1<div>This is a division of content.</div>

  • La balise <div> est un élément de niveau bloc utilisé pour créer des divisions dans le HTML.

  • La balise <div> est une balise non sémantique.

    En mettant l'accent sur le HTML sémantique, des balises significatives (comme <section>, <article>) peuvent être utilisées. Cela aide les moteurs de recherche et les lecteurs d'écran à mieux comprendre le contenu de la page.

  • En le combinant avec CSS et JavaScript, vous pouvez contrôler l'apparence et le comportement de la page.

    La balise <div> est utilisée pour regrouper du contenu sur une page en tant qu'élément de niveau bloc. Elle est principalement utilisée en combinaison avec CSS et JavaScript pour ajuster la mise en page de la page, le style, et manipuler les éléments.

Balise <p>

This is a paragraph of text.

1<p>This is a paragraph of text.</p>
  • La balise <p> est un élément utilisé pour définir un paragraphe en HTML. La balise <p> représente un paragraphe et est principalement utilisée pour regrouper et afficher du texte. Elle aide à rendre le contenu plus lisible en séparant visuellement les sections de texte.
  • Vous ne pouvez pas placer d'autres éléments de niveau bloc comme une autre balise <p> ou une balise <div> à l'intérieur d'une balise <p>. Cela est interdit par la spécification HTML. Si vous le faites, le navigateur fermera automatiquement la balise et elle ne s'affichera pas correctement.

Balise <a>

Go to codesparklab.com 
1<a href="https://codesparklab.com" title="Code Spark Lab">Go to codesparklab.com</a>

  • La balise <a> est utilisée pour créer des liens.

    La balise <a> est utilisée pour créer des liens vers d'autres pages, des sites externes ou des fichiers. L'attribut href est utilisé pour spécifier la destination du lien.

  • Il peut être utilisé pour des liens textuels ou d'image, et utiliser target="_blank" ouvrira le lien dans un nouvel onglet.

  • L'attribut target est utilisé pour spécifier comment la destination liée sera affichée.

    • _self (par défaut) : Ouvre le lien dans la fenêtre ou l'onglet actuel.
    • _blank : Ouvre le lien dans une nouvelle fenêtre ou un nouvel onglet.
    • _parent : Ouvre le lien dans le cadre parent.
    • _top : Ouvre le lien dans la fenêtre entière, en ignorant tous les cadres.

  • L'attribut title est utilisé pour afficher une info-bulle sur un lien. Lorsqu'un utilisateur survole le lien, le titre spécifié est affiché.

1<a href="#section1">Go to Section 1</a>
2
3<h2 id="section1">Section 1</h2>
4<p>This is Section 1 content.</p>
  • La balise <a> est également utilisée pour accéder à des emplacements spécifiques au sein de la même page. Pour ce faire, vous définissez un attribut id sur l'élément cible et utilisez cet id dans l'attribut href du lien.

Balise <span>

Here is some highlighted text 
1Here is some <span style="color: red;">highlighted text

  • La balise <span> est un élément en ligne.

    La balise <span> est un élément en ligne, elle ne provoque donc pas de saut de ligne lorsqu'elle est utilisée entre du texte, des liens, des images ou d'autres éléments en ligne. Elle s’intègre naturellement dans le flux de la page.

  • Vous pouvez appliquer des styles spécifiques partiellement.

    Lorsque vous souhaitez appliquer un style uniquement à une partie du document, vous pouvez utiliser la balise <span> pour attribuer une classe ou un ID CSS et appliquer des styles à une plage spécifique.

  • La balise <span> est un élément non sémantique.

    Comme la balise <span> n'a pas de signification ou de rôle structurel spécifique, elle est utilisée uniquement à des fins de style ou de script. Lorsque l'emphase sémantique est nécessaire, il est plus approprié d'utiliser des balises sémantiques comme <strong> ou <em>, qui seront introduites plus tard.

Balise <br>

Here is some text with a
line break. 
1Here is some text with a <br> line break.

  • La balise <br> est un élément en ligne.

    La balise <br> est un élément en ligne, elle n'occupe donc pas tout le bloc, mais elle crée un saut de ligne dans le texte à l'endroit où elle est placée. Alors que la balise <p> ajoute une marge au-dessus et en dessous pour séparer les paragraphes, la balise <br> crée un saut de ligne sans ajouter de marge.

  • C'est une balise auto-fermante, donc une balise de fermeture (</br>) n'est pas nécessaire.

  • Il est préférable de ne pas en abuser et d'utiliser des balises <p> ou du CSS pour les sauts de paragraphe ou les ajustements de mise en page.

    Lors de l'organisation du texte en paragraphes, il est plus approprié d'utiliser la balise <p>. Il est également recommandé d'utiliser le CSS pour les ajustements de mise en page. Par exemple, l'utilisation de la propriété white-space en CSS peut afficher les sauts de ligne et les espaces dans le texte tels qu'ils apparaissent.

Balise <hr>

This is some text.
This is another section of text. 
1This is some text.<hr>This is another section of text.

  • La balise <hr> est un élément de niveau bloc.

    La balise <hr> est utilisée pour insérer une ligne horizontale afin de séparer visuellement des sections de contenu. Elle peut également être utilisée pour signaler une rupture thématique, lui conférant un sens basé sur le contexte.

  • C'est une balise auto-fermante, donc une balise de fermeture (</hr>) n'est pas nécessaire.

  • Vous pouvez personnaliser sa couleur, sa longueur et son épaisseur à l'aide du CSS.

Balises textuelles sémantiques

De la balise <h1> à la balise <h6>

Main Heading

Subheading

Sub-subheading

1<h1>Main Heading</h1>
2<h2>Subheading</h2>
3<h3>Sub-subheading</h3>

  • Les balises <h1> à <h6> sont des balises de titre utilisées en HTML.

    La balise <h1> représente le titre le plus important et est généralement utilisée comme titre principal de l'ensemble de la page. Il est courant d'utiliser une seule balise <h1> par document HTML.

    La balise <h2> est le titre le plus important après <h1> et est utilisée pour les titres de sections ou de chapitres au sein de la page.

    La balise <h3> représente des sous-titres ou des sections plus petites sous <h2>.

    Les balises <h4>, <h5>, et <h6> représentent des titres de niveau inférieur, utilisées pour des éléments plus détaillés ou des titres de section.

  • Les balises de titre indiquent l'importance du texte et aident à créer la structure logique d'une page. Les moteurs de recherche utilisent également les balises de titre pour comprendre le contenu de la page.

Balise <strong>

Important text to emphasize significance. 
1<strong>Important text</strong> to emphasize significance.

  • La balise <strong> est une balise HTML utilisée pour indiquer l'importance ou l'emphase d'un texte et est généralement affichée en gras.

  • La balise <strong> est une balise sémantique, et son objectif principal est d'ajouter du sens.

    Elle peut indiquer que le texte est contextuellement important. Par exemple, elle peut montrer l'importance du texte aux moteurs de recherche, ce qui la rend utile pour le référencement. Elle transmet également l'importance du texte aux utilisateurs avec des lecteurs d'écran. En revanche, la balise <b>, qui sera présentée plus tard, est simplement une balise pour mettre le texte en gras et ne fournit pas d'emphase sémantique.

Balise <em>

Emphasized text for italics and emphasis. 
1<em>Emphasized text</em> for italics and emphasis.

  • La balise <em> est une balise HTML utilisée pour indiquer l'importance ou l'emphase d'un texte et est généralement affichée en italique.

  • La balise <em> est une balise sémantique, et son objectif principal est de fournir du sens.

    Comme la balise <strong>, elle peut indiquer que le texte est contextuellement important. La balise <strong> est généralement affichée en gras, tandis que la balise <em> est typiquement affichée en italique. Les deux sont reconnues par les lecteurs d'écran et les moteurs de recherche pour l'emphase sémantique, mais <strong> indique une plus grande importance, tandis que <em> transmet une emphase émotionnelle. De plus, la balise <i>, qui sera présentée plus tard, met simplement le texte en italique et ne fournit pas d'emphase sémantique.

Balise <mark>

Highlighted text for attention. 
1<mark>Highlighted text</mark> for attention.
  • La balise <mark> est utilisée pour indiquer qu'un texte spécifique est contextuellement important. Elle est utile pour mettre en évidence les résultats de recherche ou les points clés.
  • Par défaut, le texte inclus dans la balise <mark> est affiché avec un fond jaune, soulignant visuellement son importance.

Balise <del>

Deleted text shows removed content. 
1<del>Deleted text</del> shows removed content.

  • La balise <del> est utilisée pour indiquer qu'un texte a été supprimé ou modifié. Cette balise est utile pour montrer l'historique des modifications ou des révisions d'un texte.

  • Le texte encadré par la balise <del> est généralement affiché avec une barre. Cela indique visuellement le contenu supprimé.

    Le texte encadré par la balise <del> est également reconnu comme supprimé par les lecteurs d'écran. Cela permet de comprendre le contenu qui n'est pas visuellement apparent.

Balise <ins>

Inserted text shows added content. 
1<ins>Inserted text</ins> shows added content.

  • La balise <ins> est utilisée pour indiquer un texte nouvellement ajouté ou modifié dans un document. Cette balise est utile pour montrer l'historique des ajouts ou des révisions de texte.

  • Dans les navigateurs, le texte entouré par la balise <ins> est généralement affiché avec un soulignement. Cela indique visuellement le contenu ajouté.

    Le texte entouré par la balise <ins> est également reconnu comme nouvellement ajouté par les lecteurs d'écran. Cela permet de comprendre le contenu qui n'est pas visuellement apparent.

Balise <abbr>

WHO 
1<abbr title="World Health Organization">WHO</abbr>
  • La balise <abbr> est un élément en ligne utilisé pour indiquer des abréviations ou des acronymes. Utiliser cette balise fournit la signification complète des abréviations et contribue à améliorer le SEO et l'accessibilité. Cela aide particulièrement les lecteurs qui ne sont pas familiers avec l'abréviation et les utilisateurs de lecteurs d'écran à mieux comprendre son contenu.

Balises liées à la décoration du texte

Balise <b>

Bold text without semantic emphasis. 
1<b>Bold text</b> without semantic emphasis.
  • La balise <b> est un élément en ligne utilisé pour mettre le texte en gras. Comme les autres balises que nous allons introduire, elle est utilisée pour l'accentuation visuelle mais pas pour l'accentuation sémantique.

Balise <i>

Italic text for style. 
1<i>Italic text</i> for style.
  • La balise <i> est un élément en ligne utilisé pour mettre le texte en italique.

Balise <u>

Underlined text for decoration. 
1<u>Underlined text</u> for decoration.
  • La balise <u> est un élément en ligne utilisé pour souligner le texte.

Balise <small>

This is small text. 
1<small>This is small text.</small>
  • La balise <small> est un élément en ligne utilisé pour afficher le texte dans une taille plus petite. Elle est couramment utilisée pour représenter des informations supplémentaires ou des annotations secondaires par rapport au contenu principal.

Balise <s>

Strikethrough text 
1<s>Strikethrough text</s>
  • La balise <s> est un élément en ligne utilisé pour rayer le texte avec une ligne.

Balise <sub>

H2O 
1H<sub>2</sub>O
  • La balise <sub> est un élément en ligne utilisé pour afficher le texte en indice.

Balise <sup>

E = mc2 
1E = mc<sup>2</sup>
  • La balise <sup> est un élément en ligne utilisé pour afficher le texte en exposant.

Vous pouvez suivre l'article ci-dessus avec Visual Studio Code sur notre chaîne YouTube. Veuillez également consulter la chaîne YouTube.

YouTube Video

Éléments HTML de niveau bloc et en ligneBalises relatives à l'affichage de code, aux citations et aux listes