HTML5 - Aside Tag

First Page
Next Page

HTML5 Aside Tag

The aside element is new to HTML5 and it can be used in two different contexts. Basically, the context of the <aside> element is based on whether or not it inside or outside the article element.

In magazines you often see info-boxes pulled away from the actual content of the article, highlighting something with relevance to the article such as pull-quotes and when this is the scope of your aside element then it has to be placed inside the article element, because it has a relationship to the content of the article.

Here is an example of the <aside> element being used inside the <article> element.

Example

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML 5 Example by www.htmltpoint.com</title>
</head>
<body>
<article>
  <h1>Heading for Article</h1>
  <p>Text that appears under article</p>
</article>
<aside>
  <p>Text that appears under aside</p>
</aside>
</body>
</html>

Result

HTML 5 Example by www.htmltpoint.com

Heading for Article

Text that appears under article

In this HTML 5 Document example, we have created an <article> tag and following that an <aside> tag.

HTML 4.01 Transitional Document

You can not use the <aside> tag in HTML 4.01 Transitional.

XHTML 1.0 Transitional Document

You can not use the <aside> tag in XHTML 1.0 Transitional.

XHTML 1.0 Strict Document

You can not use the <aside> tag in XHTML 1.0 Strict.

XHTML 1.1 Document

You can not use the <aside> tag in XHTML 1.1.

First Page
Next Page