HTML - La balise <aside>

Par : TutorialsGrey, le 27 Janvier 2022

Cet article sur le HTML explique comment utiliser la balise <aside> en présentant sa syntaxe d'utilsation et des exemples.

 

Description

La balise HTML <aside> est un élément HTML5 qui définit une section qui est indirectement liée au contenu qui l'entoure dans un document HTML.

La balise HTML <aside> fournit des informations sur le contenu principal. Selon la définition du W3C, l'élément <aside> représente le contenu qui forme le flux textuel principal d'un document HTML.

L'élement HTML <aside> est une nouvelle balise introduite en HTML5.

 

Syntaxe

En HTML, la syntaxe de la balise <aside> est la suivante :

<body>
<aside>
  <p>Textebcontenu dan la balise aside</p>
</aside>
</body>

 

Attributs

Seuls les attributs globaux s'appliquent à la balise <aside>. Il n'y a pas d'attributs spécifiques à la balise <aside>.

 

Remarques

  • L'élément HTML <aside> est un élément HTML5 qui doit être inséré dans la balise <body>.
  • La balise <aside> peut être utilisée pour l'un des cas suivants : publicité, définition de glossaire, biographie de l'auteur, informations sur le profil ou liens connexes.
  • Pour les navigateurs Internet Explorer (IE) antérieurs à Internet Explorer 9, utilisez HTML5shiv qui est une solution de contournement javascript pour fournir un support pour les nouveaux éléments HTML5 tels que : <header>, <main>, <article>, <section>, <aside>, <nav>, <footer>.

 

Compatibilité avec les navigateurs

La balise <aside> est compatible avec les navigateurs suivants :

  • Chrome 5+
  • Android 2.2+
  • Firefox 4.0+ (Gecko 2.0+)
  • Firefox Mobile 4.0+ (Gecko 2.0+)
  • Internet Explorer 9.0+ (IE 9.0+)
  • Téléphone IE 9.0+
  • Opéra 11.10+
  • Opéra Mobile 11.0+
  • Safari 4.1+ (WebKit)
  • Safari Mobile 5.0+ (iOs 4.2+)

 

Exemples

Dans cette section, nous allons voir quelques exemples d'utilisation de la balise <aside> en HTML5 et en HTML 4.01 Transitional.

Document HTML5

Si vous avez créé un nouveau document en HTML5, votre balise <article> pourrait ressembler à ceci :

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>HTML5 - Balise <aside></title>
</head>

<body>
    <article>
        <h1>Titre de l'article</h1>
        <p>Texte contenu dans la balise article.</p>
    </article>
    <aside>
        <p>Texte contenu dans la balise aside.</p>
    </aside>
</body>

</html>

Dans cet exemple de document HTML5, nous avons créé une balise <article> suivie d'une balise <aside>. Le résultat de ce bout de code se présente comme dans l'image ci-dessous :

Balise Aside

 

Document HTML 4.01 Transitional  

Vous ne pouvez pas utiliser la balise <aside> en HTML 4.01 Transitional, car il s'agit d'un élément spécifique à HTML5.