0
0
HTMLmarkup~20 mins

Aside element in HTML - Practice Problems & Coding Challenges

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Challenge - 5 Problems
🎖️
Aside Element Mastery
Get all challenges correct to earn this badge!
Test your skills under time pressure!
🧠 Conceptual
intermediate
2:00remaining
Purpose of the
What is the main purpose of the
ATo mark content that is tangentially related to the main content, like sidebars or pull quotes.
BTo define the main navigation links of a website.
CTo create a footer section at the bottom of the page.
DTo embed multimedia content like videos or audio.
Attempts:
2 left
💡 Hint
Think about content that supports but is not part of the main story.
📝 Syntax
intermediate
2:00remaining
Correct Usage of
Which of the following HTML snippets correctly uses the
A<main><article><p>Main content here.</p></article><aside><p>Related info.</p></aside></main>
B<aside><header>Header content</header><p>Main article text.</p></aside>
C<footer><aside><p>Footer related links.</p></aside></footer>
D<nav><aside><ul><li>Menu item</li></ul></aside></nav>
Attempts:
2 left
💡 Hint
The
❓ rendering
advanced
2:00remaining
Visual Result of
Given this HTML and CSS, what will the user see in the browser?
HTML
<style>
  aside {
    border: 2px solid #0077cc;
    padding: 1rem;
    background-color: #e0f0ff;
    max-width: 20rem;
  }
</style>
<main>
  <article>
    <p>This is the main article content.</p>
  </article>
  <aside>
    <p>This is a sidebar with related info.</p>
  </aside>
</main>
AThe aside content appears below the main article without any border or background.
BA main article paragraph with a blue-bordered, light blue background box on the side containing related info.
COnly the main article paragraph is visible; the aside content is hidden.
DThe entire page background turns light blue with no visible border around aside.
Attempts:
2 left
💡 Hint
Look at the CSS styles applied to the aside element.
❓ accessibility
advanced
2:00remaining
Accessibility Role of
What ARIA role is most appropriate to assign to an
Abanner
Bmain
Cnavigation
Dcomplementary
Attempts:
2 left
💡 Hint
Think about the role that describes supporting content related to the main content.
❓ selector
expert
2:00remaining
CSS Selector Targeting
Which CSS selector will style only
Amain + aside
Bmain aside
Cmain > aside
Daside > main
Attempts:
2 left
💡 Hint
The '>' symbol selects direct children only.