0
0
HTMLmarkup~30 mins

Aside element in HTML - Mini Project: Build & Apply

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Using the <aside> Element in HTML
📖 Scenario: You are creating a simple webpage for a blog article. You want to add a sidebar that contains extra information related to the article but separate from the main content.
🎯 Goal: Build a basic HTML page with a main article section and an &lt;aside&gt; element that holds related information. This will help you understand how to use the &lt;aside&gt; element semantically.
📋 What You'll Learn
Create a basic HTML5 page structure with <html>, <head>, and <body> tags
Add a <main> element containing a heading and a paragraph for the article
Add an <aside> element with a heading and a short paragraph for related info
Use semantic HTML elements properly
Include lang attribute in <html> and charset and viewport meta tags in <head>
💡 Why This Matters
🌍 Real World
Many websites use the <code>&lt;aside&gt;</code> element to show sidebars, related links, advertisements, or extra info that complements the main content.
💼 Career
Understanding semantic HTML elements like <code>&lt;aside&gt;</code> is essential for building accessible, well-structured web pages that are easy to maintain and improve.
Progress0 / 4 steps
1
Create the basic HTML5 page structure
Create a basic HTML5 page with <html lang="en">, <head> containing <meta charset="UTF-8"> and <meta name="viewport" content="width=device-width, initial-scale=1.0">, and an empty <body>.
HTML
Need a hint?

Start by writing the basic HTML5 page structure with the required lang and meta tags.

2
Add the main article content
Inside the <body>, add a <main> element. Inside <main>, add a heading <h1> with the text Blog Article and a paragraph <p> with the text This is the main content of the blog article..
HTML
Need a hint?

Use the <main> tag to wrap the main content. Add a heading and a paragraph inside it.

3
Add an <aside> element with related information
After the <main> element, add an <aside> element. Inside <aside>, add a heading <h2> with the text Related Info and a paragraph <p> with the text This sidebar contains extra information related to the article..
HTML
Need a hint?

The <aside> element is used for content related to the main content but separate from it. Add a heading and paragraph inside it.

4
Complete the HTML page with semantic structure
Ensure the HTML page includes the <html lang="en"> attribute, the <head> with charset and viewport meta tags, a <main> element with heading and paragraph, and an <aside> element with heading and paragraph. The page should be well-structured and ready to display in a browser.
HTML
Need a hint?

Make sure all tags are properly closed and the page is complete with semantic elements.