Balise HTML <aside>
La balise <aside> est l'un des éléments HTML5 utilisé pour définir une section contenant du contenu lié de manière tangentielle au contenu principal. Elle est généralement utilisée pour enrichir un article d'informations supplémentaires ou mettre en évidence des parties qui peuvent intéresser l'utilisateur. Le contenu dans <aside> est une partie autonome et non essentielle de la page web, et si vous le supprimez, le contenu principal ne sera pas affecté.
Les notes de fin, commentaires, listes de termes, informations de référence, une collection de liens, citations isolées, etc. sont des exemples d'informations qui peuvent se trouver dans l'élément <aside>.
TIP
Ne confondez pas l'élément <aside> avec une barre latérale. La barre latérale est simplement un élément visuel, et la balise <aside> ne ressemble pas systématiquement à une barre latérale.
DANGER
N'utilisez pas l'élément <aside> pour du texte entre parenthèses, car il est destiné à un contenu tangent plutôt qu'à du texte en ligne ou supplémentaire dans le flux principal.
Vous pouvez utiliser cet élément pour des effets typographiques sur le contenu séparé du contenu principal de la page. Par exemple, il peut être utilisé pour une bibliographie, des citations isolées, des commentaires d'informations supplémentaires, etc.
Syntaxe
La balise <aside> s'utilise par paire. Le contenu est écrit entre les balises d'ouverture (<aside>) et de fermeture (<​/aside>).
Exemple de la balise HTML <aside> :
Balise HTML <aside>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>I like watching Game of Thrones.</p>
<aside>
<h4>Game of Thrones</h4>
<p>Game of Thrones is an American fantasy drama television series created by David Benioff and D. B. Weiss. It is an adaptation of A Song of Ice and Fire, George R. R. Martin's series of fantasy novels</p>
</aside>
</body>
</html>Result
Example of the HTML <aside> tag with the HTML <article> tag:
Example of the HTML <aside> tag with the <article> tag
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Example of the aside tag</h1>
<aside>
<h2>Here is some heading</h2>
<p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
</aside>
<article>
<h3>Game of Thrones</h3>
<p>Game of Thrones is an American fantasy drama television series created by David Benioff and D. B. Weiss. It is an adaptation of A Song of Ice and Fire, George R. R. Martin's series of fantasy novels</p>
</article>
</body>
</html>The difference between the <aside> and <div> tags
The <div> element is a generic container with no semantic meaning, while the <aside> element provides semantic meaning by indicating that its content is tangentially related to the main content. This distinction affects accessibility and SEO.
Attributes
The <aside> tag supports the Global Attributes and the Event Attributes.
Example with a global attribute:
<aside class="sidebar-note" id="extra-info">
<p>Additional context goes here.</p>
</aside>How to style an HTML <aside> Tag
aside {
background-color: #f9f9f9;
border-left: 4px solid #ccc;
padding: 10px;
}Practice
Quelle est l'utilisation correcte et les caractéristiques de la balise HTML <aside> selon l'article sur W3Docs ?