Aside element

Hello, students! In this lesson, we will learn about the aside element.

Structural elements are HTML elements that provide information about the meaning of the content they contain.

The aside element is a top-level structural element that can be used to group related but non-essential content.

Topics

• What is the aside element?
• How to use the aside element?
• Code examples

What is the aside element?

The aside element is a top-level structural element that can be used to group related but non-essential content.

The aside element is usually used for complementary content, such as notes, comments, related links, or advertisements.

For example, a web page about a product may have an aside element with a list of links to other related products.

How to use the aside element?

To use the aside element, simply wrap it around the content you want to group.

Here is an example of code to use the aside element:

<aside>
  <h2>Notes</h2>
  <p>This is complementary content.</p>
</aside>

This code will create an aside element with a title and a paragraph.

Code examples

Here are some code examples to use the aside element:

<aside>
  <h2>Notes</h2>
  <p>This is complementary content.</p>
</aside>

<main>
  <h2>Main Content</h2>
  <p>This is the main content of the page.</p>
</main>

This code will create an aside element with a title and a paragraph, followed by a main element with a title and a paragraph.

Exercises

• Create a web page with an aside element containing a list of links to other related products.
• Include relevant content in the aside element.
• Save the document and open it in a browser.

Observe how the browser displays the page.

Good luck!

Conclusion

The aside element is a useful tool for grouping related but non-essential content.

Understanding how to use the aside element is essential for creating well-structured and informative web pages.

Ready to learn more?

In the next topic, we will learn about the article element.