Aside element in HTML - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a sidebar using the correct HTML element.

HTML

<[1]>This is a sidebar with extra information.</[1]>

Drag options to blanks, or click blank then click option'

Asection

Baside

Cdiv

Dfooter

Attempts:

3 left

💡 Hint

Common Mistakes

Using

instead of

loses semantic meaning.

Using

is for page footers, not side content.

The <aside> element is used to mark content aside from the main content, like a sidebar.

2fill in blank

medium

Complete the code to add a heading inside the aside element.

HTML

<aside>
  <[1]>Related Links</[1]>
  <ul>
    <li><a href="#">Link 1</a></li>
  </ul>
</aside>

Drag options to blanks, or click blank then click option'

Ah1

Bp

Ch2

Ddiv

Attempts:

3 left

💡 Hint

Common Mistakes

Using

instead of a heading tag for titles.

Using

which is usually reserved for main page title.

Use a heading tag like <h2> inside <aside> to label the sidebar content.

3fill in blank

hard

Fix the error in the code by choosing the correct closing tag for the aside element.

HTML

<aside>
  <p>Note: This is important info.</p>
</[1]>

Drag options to blanks, or click blank then click option'

Aaside

Bfooter

Cdiv

Dsection

Attempts:

3 left

💡 Hint

Common Mistakes

Closing with a different tag like

causes HTML errors.

Forgetting the slash in the closing tag.

The closing tag must match the opening tag <aside>, so it should be </aside>.

4fill in blank

hard

Fill both blanks to create an aside with a heading and a paragraph describing the content.

HTML

<aside>
  <[1]>Tips</[1]>
  <[2]>Remember to save your work often.</[2]>
</aside>

Drag options to blanks, or click blank then click option'

Ah3

Bh1

Cp

Ddiv

Attempts:

3 left

💡 Hint

Common Mistakes

Using

instead of semantic tags.

Using

inside aside which is usually for main titles.

Use a heading tag like <h3> for the title and a paragraph <p> for the text inside the aside.

5fill in blank

hard

Fill all three blanks to create an accessible aside with a heading, paragraph, and a link.

HTML

<aside aria-label="[1]">
  <[2]>Did you know?</[2]>
  <[3]>You can use the aside element for side notes.</[3]>
  <a href="#">Learn more</a>
</aside>

Drag options to blanks, or click blank then click option'

Asidebar

Bh4

Cp

Dnote

Attempts:

3 left

💡 Hint

Common Mistakes

Using generic aria-labels like 'note' that are less descriptive.

Using non-semantic tags for heading or paragraph.

The aria-label describes the aside as a sidebar for screen readers. Use <h4> for the heading and <p> for the paragraph.