Balise HTML | Tutoriels de développement web

Introduction

La balise HTML  est utilisée pour regrouper des éléments à des fins de mise en forme. On peut la considérer comme un conteneur générique pour le contenu de type phrasé. La balise  est très similaire à la balise <div>, mais elle est un élément en ligne contrairement à <div> qui est un élément de niveau bloc. La balise  n'a pas intrinsèquement de signification. Dans ce laboratoire, vous allez apprendre à utiliser la balise  pour regrouper des éléments à des fins de mise en forme.

Note: Vous pouvez pratiquer la programmation dans index.html et apprendre Comment écrire du HTML dans Visual Studio Code. Veuillez cliquer sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez rafraîchir l'onglet Web 8080 pour prévisualiser la page web.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/TextContentandFormattingGroup(["Text Content and Formatting"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/TextContentandFormattingGroup -.-> html/para_br("Paragraphs and Line Breaks") html/LayoutandSectioningGroup -.-> html/nav_links("Navigation and Links") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/LayoutandSectioningGroup -.-> html/access_cons("Accessibility Considerations") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") html/AdvancedElementsGroup -.-> html/custom_attr("Custom Data Attributes") subgraph Lab Skills html/basic_elems -.-> lab-70839{{"Mise en forme d'éléments avec la balise HTML "}} html/head_elems -.-> lab-70839{{"Mise en forme d'éléments avec la balise HTML "}} html/para_br -.-> lab-70839{{"Mise en forme d'éléments avec la balise HTML "}} html/nav_links -.-> lab-70839{{"Mise en forme d'éléments avec la balise HTML "}} html/doc_flow -.-> lab-70839{{"Mise en forme d'éléments avec la balise HTML "}} html/access_cons -.-> lab-70839{{"Mise en forme d'éléments avec la balise HTML "}} html/inter_elems -.-> lab-70839{{"Mise en forme d'éléments avec la balise HTML "}} html/custom_attr -.-> lab-70839{{"Mise en forme d'éléments avec la balise HTML "}} end

Ajout du code HTML

Dans le fichier index.html, ajoutez le code suivant à l'intérieur de la balise <body> :

<p>This is a <span>simple</span> example of using the span tag.</p>

Ici, nous avons créé un paragraphe avec le mot "simple" entouré par la balise . Cela nous aidera à comprendre l'utilisation de cette balise dans la pratique.

Mise en forme de l'élément ``

Maintenant, voyons comment mettre en forme le contenu qui est entouré par la balise . Par exemple, si nous voulons ajouter une couleur au mot "simple", nous pouvons utiliser la propriété color en CSS.

Ajoutez le code CSS suivant à l'intérieur de la balise <head> :

<style>
  span {
    color: red;
  }
</style>

Ce code CSS change la couleur de tout le contenu entouré par la balise  en rouge. Comme nous avons entouré le mot "simple" par la balise , il sera imprimé en rouge.

Utilisation de `` avec d'autres balises HTML

La balise  peut également être utilisée avec d'autres éléments HTML. Voyons comment vous pouvez l'utiliser avec la balise <a>.

Ajoutez le code HTML suivant à l'intérieur de la balise <body> :

<p>
  This is a <span><a href="#">link</a></span> example.
</p>

Cela crée un paragraphe avec le mot "lien" entouré par la balise  et lié à l'URL #.

Mise en forme du texte lié

Maintenant, voyons comment nous pouvons mettre en forme le texte lié. Ajoutez le code CSS suivant à l'intérieur de la balise <head> :

<style>
  span a {
    color: green;
    text-decoration: none;
  }
</style>

Ce code CSS définit la couleur du texte à l'intérieur de la balise <a> en vert sans soulignement.

Ajout d'attributs d'événement

La balise  prend en charge à la fois les attributs globaux et les attributs d'événement. Voyons comment nous pouvons utiliser l'attribut global class pour appliquer des styles.

Ajoutez l'attribut class à la balise  qui entoure le mot "simple" comme indiqué ci-dessous :

<p>
  This is a <span class="example"><a href="#">link</a></span> example.
</p>

Ajoutez le code CSS suivant à l'intérieur de la balise <head> :

<style>
  .example {
    font-size: 20px;
  }
</style>

Ce code CSS augmente la taille de police du contenu à l'intérieur de la balise  qui a la classe example.

Utilisation des balises `` pour la sémantique

Bien que la balise  n'ait pas de sens intrinsèque, elle peut être utilisée pour exprimer la sémantique du texte qu'elle entoure. Par exemple, vous pourriez l'utiliser pour entourer une date ou un pourcentage pour indiquer que le texte à l'intérieur a un sens particulier.

Par exemple, ajoutez le code suivant au fichier index.html :

<p>My final score is <span class="score" aria-label="90 percent">90</span>.</p>

Dans cet exemple, 90 est entouré par la balise  et a reçu un nom de classe score. En le faisant, nous avons exprimé que le texte à l'intérieur de la balise  a un sens particulier. De plus, nous avons ajouté l'attribut aria-label pour fournir des informations d'accessibilité à un lecteur d'écran.

Récapitulatif

Dans ce laboratoire, vous avez appris à utiliser la balise HTML  pour regrouper des éléments en vue de la mise en forme. Vous avez également appris comment styler le contenu entouré par la balise , comment l'utiliser avec d'autres balises HTML, comment utiliser les attributs globaux et d'événement, et comment utiliser la balise  pour exprimer une sémantique.

Mise en forme d'éléments avec la balise HTML <span>

Introduction

Skills Graph

Ajout du code HTML

Mise en forme de l'élément `<span>`

Utilisation de `<span>` avec d'autres balises HTML

Mise en forme du texte lié

Ajout d'attributs d'événement

Utilisation des balises `<span>` pour la sémantique

Récapitulatif

Mise en forme d'éléments avec la balise HTML <span>

Introduction

Skills Graph

Ajout du code HTML

Mise en forme de l'élément <span>

Utilisation de <span> avec d'autres balises HTML

Mise en forme du texte lié

Ajout d'attributs d'événement

Utilisation des balises <span> pour la sémantique

Récapitulatif

Mise en forme de l'élément `<span>`

Utilisation de `<span>` avec d'autres balises HTML

Utilisation des balises `<span>` pour la sémantique