HTML: aside tag

HTML: <aside> tag

In this series of learning HTML, we will teach you how to use HTML aside tag with proper syntax and lots of examples. Let’s start on the HTML aside tag.

Description of HTML aside tag

The HTML “aside” tag is used to define a section of content that is related to the main content of the page but not directly part of it. The “aside” tag is typically used for content such as sidebars, supplementary information, or related links.

Here is an example of how to use the “aside” tag in HTML:

<article>
<h2>Article Title</h2>
<p>Article content goes here...</p>

<aside>
<h3>Related Links</h3>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</aside>
</article>

In the example above, the “aside” tag is used to contain a list of related links that are associated with the main content of the article. The “aside” section is visually distinguished from the main content of the page, typically by being displayed in a sidebar or in a separate column.

The “aside” tag can also be used in other contexts, such as in a blog post to provide additional information about the author or in a product page to display reviews or ratings. The “aside” tag is a useful tool for organizing and presenting related content in a clear and logical way.

Syntax of HTMLaside tag

The HTML <aside> tag is used to define content that is not directly related to the main content of a web page, but rather tangentially related or supplementary to it. The syntax of the <aside> tag is as follows:

<aside>
<!-- content goes here -->
</aside>

Here, the opening tag <aside> is used to indicate the start of the aside content, and the closing tag </aside> is used to indicate the end of the aside content. The content that goes within the tags should be related to the main content, but not necessary for its understanding.

Example:

<article>
<h1>Article Title</h1>
<p>Article content goes here.</p>
<aside>
<h2>Related Links</h2>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</aside>
</article>

In this example, the <aside> element contains a list of related links that are not directly part of the main article content, but rather provide supplementary information for the reader. The aside element is placed within the <article> element to show its association with the main content.

Event Attributes

In HTML, event attributes are used to attach JavaScript functions to events that occur on HTML elements. The <aside> tag in HTML supports a number of event attributes, which can be used to trigger JavaScript functions in response to various events that occur on the <aside> element.

Here are some of the event attributes that can be used with the <aside> tag:

• onclick: This event attribute is triggered when the user clicks on the <aside> element. You can use it to attach a JavaScript function that will run when the <aside> element is clicked.
• onmouseover: This event attribute is triggered when the user moves their mouse over the <aside> element. You can use it to attach a JavaScript function that will run when the user hovers over the <aside> element.
• onmouseout: This event attribute is triggered when the user moves their mouse out of the <aside> element. You can use it to attach a JavaScript function that will run when the user stops hovering over the <aside> element.
• onkeydown: This event attribute is triggered when the user presses a key while the <aside> element has focus. You can use it to attach a JavaScript function that will run when the user types a key while the <aside> element is selected.
• onkeyup: This event attribute is triggered when the user releases a key while the <aside> element has focus. You can use it to attach a JavaScript function that will run when the user releases a key while the <aside> element is selected.
• onload: This event attribute is triggered when the <aside> element and its contents have finished loading. You can use it to attach a JavaScript function that will run when the <aside> element has finished loading.

These are just a few examples of the event attributes that can be used with the <aside> tag. By using event attributes, you can add interactivity to your web pages and make them more engaging for users.

Other Attributes

Notes on HTML aside tag

Here are some important notes to keep in mind when using the <aside> tag in HTML:

• The <aside> tag should be used to contain content that is tangentially related to the main content of a web page. This might include sidebars, callouts, or infoboxes that provide additional information or context.
• The <aside> tag can be positioned alongside the main content of a page using CSS. You can use the float property to position the <aside> element to the left or right of the main content, or you can use the position property to position it in a specific location on the page.
• The content within an <aside> element should be related to the main content of the page, but it should not be essential to the understanding of that content. The main content of the page should be able to stand alone without the <aside> content.
• The <aside> tag can be used in combination with other HTML tags such as <article>, <section>, and <main> to create a structured and semantically meaningful web page.
• When using the <aside> tag, it is important to ensure that the content within the <aside> element is accessible to all users, including those using screen readers or other assistive technologies. This means using descriptive and meaningful text for any links or images within the <aside> content.

Overall, the <aside> tag is a useful tool for creating well-structured web pages that provide additional information and context for users. By using this tag effectively, you can create more engaging and informative web content that is accessible to a wide range of users.

Examples of HTMLaside tag

We will discuss the <aside> tag below, exploring examples of how to use the <aside> tag in HTML5, HTML 4.01 Transitional, XHTML 1.0 Transitional, XHTML 1.0 Strict, and XHTML 1.1.