Maîtriser le HTML sémantique avec la balise Article

Introduction

Le HTML sémantique est un concept important dans le développement web car il aide les moteurs de recherche et les technologies d'assistance à mieux comprendre le contenu d'un site web. L'un des éléments qui peut être utilisé pour créer du HTML sémantique est la balise <article>. Dans ce laboratoire, nous allons apprendre à utiliser la balise <article> et comment elle contribue à la création de pages web accessibles.

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/text_head("Text and Headings") html/TextContentandFormattingGroup -.-> html/lists_desc("Lists and Descriptions") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") subgraph Lab Skills html/basic_elems -.-> lab-70702{{"Section d'article HTML"}} html/head_elems -.-> lab-70702{{"Section d'article HTML"}} html/text_head -.-> lab-70702{{"Section d'article HTML"}} html/lists_desc -.-> lab-70702{{"Section d'article HTML"}} html/doc_flow -.-> lab-70702{{"Section d'article HTML"}} html/inter_elems -.-> lab-70702{{"Section d'article HTML"}} end

Ajoutez la structure HTML5

Créez un fichier index.html dans votre éditeur de texte favori et enregistrez-le.

Ajoutez la structure HTML5 de base au fichier index.html. Cela inclut la déclaration <!DOCTYPE html>, l'élément <html>, l'élément <head> et l'élément <body>.

<!doctype html>
<html>
  <head>
    <title>Ma page web</title>
  </head>
  <body>
    <!-- Ajoutez le contenu ici -->
  </body>
</html>

Ajoutez une balise `<article>`

À l'intérieur de l'élément <body>, ajoutez une balise <article>. Cette balise contiendra le contenu principal de votre page web. La balise <article> a une balise d'ouverture et de fermeture.

<article>
  <!-- Ajoutez le contenu principal ici -->
</article>

Ajoutez le contenu de l'article

À l'intérieur de la balise <article>, ajoutez du contenu qui représentera le contenu principal de la page web. Cela peut être n'importe quoi, comme un article, un billet de blog ou une description de produit.

<article>
  <h1>Mon incroyable article</h1>
  <p>
    Ceci est le contenu principal de ma page web. C'est un article vraiment
    incroyable que tout le monde devrait lire.
  </p>
  <p>Voici quelques raisons pour lesquelles :</p>
  <ul>
    <li>Il est bien écrit</li>
    <li>Il est informatif</li>
    <li>Il est amusant</li>
  </ul>
</article>

Ajoutez la balise `<footer>`

À l'intérieur de la balise <article>, ajoutez une balise <footer> pour fournir des informations supplémentaires sur le contenu.

<article>
  <h1>Mon incroyable article</h1>
  <p>
    Ceci est le contenu principal de ma page web. C'est un article vraiment
    incroyable que tout le monde devrait lire.
  </p>
  <p>Voici quelques raisons pour lesquelles :</p>
  <ul>
    <li>Il est bien écrit</li>
    <li>Il est informatif</li>
    <li>Il est amusant</li>
  </ul>
  <footer>
    <p>
      Publié le <time datetime="2022-09-15">15 septembre 2022</time> par
      <a href="#">John Doe</a>
    </p>
  </footer>
</article>

Enregistrez le fichier index.html et ouvrez-le dans un navigateur web pour voir la page web finale avec les informations de contact.

Sommaire

Utiliser la balise <article> est un moyen simple de créer un HTML sémantique et de rendre votre site web plus accessible. En utilisant la balise <article>, vous pouvez fournir des informations supplémentaires sur le contenu principal de votre page web, ce qui peut aider les moteurs de recherche et les technologies d'assistance à mieux comprendre votre site web. N'oubliez pas de toujours valider votre code HTML pour vous assurer qu'il est exempt d'erreurs et répond à tous les standards nécessaires.

Section d'article HTML