1. html
  2. /tags
  3. /aside

<aside>

Definition

The HTML aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. The aside element is typically used to provide additional information or related content to an article or other main content.

Examples

<!DOCTYPE html>
<html>
	<head>
		<title>HTML Aside Element Demo</title>
	</head>
	<body>
		<h1>HTML Aside Element Demo</h1>
		<p>
			This is the main content of the page. It contains a summary of the article and provides an overview of its key points.
		</p>
		<aside>
			<h2>Related Content</h2>
			<p>
				This is the content of the aside element. It provides additional information or related content to the main content of the page. It could include a sidebar, a pull quote, a footnote, or other tangentially related content.
			</p>
		</aside>
	</body>
</html>

Attributes

This element makes use of the global attributes.

Best Practices

Best practices for the aside element include:

  • Use the aside element to mark up content that is tangentially related to the main content of the page, such as a sidebar or a pull quote.
  • Use the aside element to mark up content that could be considered separate from the main content of the page, such as a footnote or a disclaimer.
  • Use the aside element to mark up content that is not essential to understanding the main content of the page, such as an advertisement or a widget.
  • Use the aside element to create a visually distinct section of content on the page, such as a callout box or a highlighted quote.

Accessibility Considerations

Accessibility considerations for the aside element include making sure that the content of the aside element is properly labeled and organized, so that it is clear to users of assistive technology what the relationship is between the aside content and the main content of the page. It is also important to ensure that the aside element is focusable and can be easily accessed by keyboard users, as well as by users of screen readers and other assistive technology.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesYesYesYes