Maîtriser la balise <aside> HTML5

Introduction

Dans ce laboratoire étape par étape, vous allez apprendre à utiliser la balise <aside> d'HTML. Cette balise est utilisée pour afficher du contenu qui est lié au contenu principal, mais qui n'est pas essentiel à celui-ci.

Note: Vous pouvez pratiquer la programmation dans index.html et apprendre Comment écrire du HTML dans Visual Studio Code. Cliquez 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/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/TextContentandFormattingGroup(["Text Content and Formatting"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) 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/para_br("Paragraphs and Line Breaks") html/TextContentandFormattingGroup -.-> html/lists_desc("Lists and Descriptions") html/LayoutandSectioningGroup -.-> html/layout("Layout Elements") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") subgraph Lab Skills html/basic_elems -.-> lab-70703{{"Contenu HTML dans la balise

Configuration de la page HTML

Ouvrez votre éditeur de code et créez un nouveau fichier appelé index.html, puis ajoutez la structure HTML de base suivante :

<!doctype html>
<html>
  <head>
    <title>Tutoriel sur la balise HTML Aside</title>
  </head>
  <body></body>
</html>

Création du contenu principal

Dans la balise <body>, créons un peu de contenu principal. Ajoutez le code suivant :

<h1>Bienvenue sur mon blog!</h1>
<p>
  Dans cet article, nous allons explorer les avantages d'utiliser HTML5. HTML5
  est un langage de balisage utilisé pour structurer et présenter du contenu sur
  Internet.
</p>

Ajout du contenu dans la balise `<aside>`

Maintenant, ajoutons une balise <aside> qui contiendra des informations supplémentaires sur le contenu principal. Ajoutez ce code sous le paragraphe de l'étape 2 :

<aside>
  <h2>A propos de cet article</h2>
  <p>
    Cet article a été écrit par John Doe, un développeur web ayant plus de 8 ans
    d'expérience dans l'industrie. Il est passionné par le développement web et
    aime partager ses connaissances avec les autres.
  </p>
</aside>

En ajoutant le code ci-dessus, nous avons créé une balise <aside> qui contient des informations sur l'article. Ces informations sont liées au contenu principal, mais ne sont pas essentielles à celui-ci.

Stylisation de la balise `<aside>`

Maintenant, ajoutez le CSS suivant pour donner un style à la balise <aside> :

<style>
  aside {
    width: 300px;
    margin-left: 30px;
    padding: 10px;
    background-color: #f2f2f2;
    border: 1px solid #ccc;
  }
</style>

En ajoutant ce CSS, nous avons donné un style à la balise <aside>. La largeur est définie sur 300px, la marge est définie sur 30px, et elle a un fond gris clair avec une bordure.

Ajout de contenu supplémentaire à l'article

Ajoutons un peu plus de contenu à l'article pour mieux visualiser l'utilisation des balises <aside>. Ajoutez le code suivant sous la balise <aside> :

<p>
  HTML5 est une mise à jour importante du langage HTML. Elle offre de nouvelles
  fonctionnalités, rendant ainsi plus facile pour les développeurs de créer des
  pages web et des applications. Certaines des nouvelles fonctionnalités d'HTML5
  sont les suivantes :
</p>
<ul>
  <li>
    De nouvelles balises sémantiques telles que header, footer, article et
    section
  </li>
  <li>
    Une prise en charge améliorée des multimédias avec les balises video et
    audio
  </li>
  <li>Une meilleure accessibilité grâce aux balises nav et main</li>
</ul>

En ajoutant le code ci-dessus, nous avons ajouté du contenu supplémentaire au principal article. Il contient une liste non ordonnée avec des informations sur HTML5.

Récapitulatif

Dans ce laboratoire étape par étape, nous avons appris à utiliser la balise HTML <aside> pour ajouter du contenu supplémentaire lié au contenu principal d'une page web. Nous avons également appris à ajouter un certain style à la balise à l'aide de CSS. L'utilisation de la balise <aside> aide les moteurs de recherche et les navigateurs web à comprendre quel contenu est essentiel et quel contenu n'est pas essentiel.