HTML - <aside> Tag

The <aside> is one of the HTML5 components that was added to designate a segment containing extra information about the content surrounding the aside element. It is typically used to improve an article by adding more details or emphasizing passages that the reader would find interesting. If you remove aside content from a web page, the main content will not be impacted because aside content is a separate, optional component of the page.

Information that can be contained within the <aside> element includes endnotes, remarks, lists of terms, reference data, a group of links, pull-quotes, etc.

Syntax

Following is the syntax of the <aside> tag −

<aside>.....</aside>

Example

The following program shows the usage of the HTML <aside> tag.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML aside tag</title>
</head>
<body>
   <!--create aside tag-->
   <p>Example of the HTML 'aside' element</p>
   <aside>Text within the 'aside' tag.</aside>
</body>
</html>

When we run the above code, it will generate an output consisting of the text displayed on the webpage.

Example

Following is another example of the HTML <aside> tag. Here, we are using the <aside> tag to mark up a paragram in an ‘article’ element. The paragraph is only indirectly related to the main article content.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML aside tag</title>
</head>
<body>
   <!--create aside tag-->
   <p>Example of the HTML 'aside' element</p>
   <article>
      <p>The HTML full form is Hyper Text Markup Language.</p>
      <aside>
         <p>The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser.</p>
      </aside>
   </article>
</body>
</html>

On running the above code, the output window will pop up, consisting of text displayed on the webpage.

Example

In the following program, we are using the HTML <aside> tag to represent a portion of an HTML document. We use CSS to style the created ‘aside’ element.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML aside tag</title>
   <style>
      aside {
         width: 200px;
         height: 100px;
         background-color: aquamarine;
         border-radius: 10px;
         color: rgb(161, 9, 9);
      }
   </style>
</head>
<body>
   <!--create aside tag-->
   <p>Example of the HTML 'aside' element</p>
   <h1>Frontend Technologies: </h1>
   <aside>
      <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
      <li>Angular</li>
      <li>React</li>
      </ul>
   </aside>
</body>
</html>

When we run the above code, it will generate an output displaying the list items with a CSS applied to it on the webpage.

html_tags_reference.htm
Advertisements