Nested elements in HTML - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

What is the visual output of nested

and

elements?

Consider this HTML code snippet:

<section>
  <article>
    <h2>Title</h2>
    <p>Paragraph inside article.</p>
  </article>
  <p>Paragraph inside section but outside article.</p>
</section>

What will the browser display?

HTML

<section>
  <article>
    <h2>Title</h2>
    <p>Paragraph inside article.</p>
  </article>
  <p>Paragraph inside section but outside article.</p>
</section>

A A heading 'Title' followed by two paragraphs: 'Paragraph inside article.' and 'Paragraph inside section but outside article.'

B Only one paragraph with text 'Paragraph inside section but outside article.' is shown, the article content is hidden.

C Two headings 'Title' and 'Paragraph inside article.' are shown, but no paragraphs.

D Only the heading 'Title' is shown, paragraphs are ignored.

💡 Hint

Remember that nested elements inside

and

are all displayed unless hidden by CSS or scripts.

The

contains an

with a heading and paragraph, plus another paragraph outside the article but inside the section. All these elements render in order.

❓ selector

intermediate

Which CSS selector targets only paragraphs inside

elements nested in

?

Given this HTML structure:

<section>
  <article>
    <p>Text 1</p>
  </article>
  <p>Text 2</p>
</section>

Which CSS selector will style only the paragraph inside the

?

A section p

B section > p

C article > p

D section article p

💡 Hint

Think about the full path from section to article to paragraph.

The selector 'section article p' targets paragraphs inside articles that are inside sections. 'section > p' targets paragraphs directly inside section, not inside article.

🧠 Conceptual

advanced

What is the semantic meaning of nesting

inside

?

Why would a developer nest a

element inside a

element in HTML5?

A To indicate that the navigation links are part of the page header, helping screen readers and SEO.

B To hide the navigation from users but keep it in the code.

C To apply default browser styles that only work when <nav> is inside <header>.

D To make the navigation appear only on mobile devices automatically.

💡 Hint

Think about how HTML5 elements describe the page structure and help assistive technologies.

Nesting

inside

shows that the navigation is part of the header section, improving accessibility and meaning.

❓ layout

advanced

How does nesting

elements affect CSS Flexbox layout?

Given this HTML:

<div class="container">
  <div class="box">Box 1</div>
  <div class="wrapper">
    <div class="box">Box 2</div>
  </div>
</div>

With CSS:

.container { display: flex; }

Which boxes will be arranged side by side by Flexbox?

HTML

<div class="container">
  <div class="box">Box 1</div>
  <div class="wrapper">
    <div class="box">Box 2</div>
  </div>
</div>

A Both 'Box 1' and 'Box 2' are flex items arranged side by side directly.

B Only 'Box 1' and the 'wrapper' div are flex items arranged side by side; 'Box 2' is inside 'wrapper' and not a flex item.

C Only 'Box 2' is arranged by Flexbox; 'Box 1' is ignored.

D Neither box is arranged by Flexbox because nested divs disable flex layout.

💡 Hint

Flexbox arranges direct children of the flex container only.

Flexbox applies only to direct children of the container. 'Box 1' and 'wrapper' are direct children; 'Box 2' is nested inside 'wrapper' and not a flex item.

❓ accessibility

expert

Which nested HTML structure best supports screen reader navigation?

Choose the HTML snippet that uses nested semantic elements correctly to help screen readers understand page sections and navigation.

A

<nav>
  <header>
    <h1>Main Menu</h1>
  </header>
  <ul>
    <li><a href="#home">Home</a></li>
  </ul>
</nav>
<article>
  <h2>Introduction</h2>
  <p>Welcome text.</p>
</article>

B

<div>
  <nav>
    <ul>
      <li><a href="#home">Home</a></li>
    </ul>
  </nav>
  <section>
    <h2>Introduction</h2>
    <p>Welcome text.</p>
  </section>
</div>

C

<header>
  <nav aria-label="Main navigation">
    <ul>
      <li><a href="#home">Home</a></li>
    </ul>
  </nav>
</header>
<main>
  <section aria-labelledby="intro">
    <h2 id="intro">Introduction</h2>
    <p>Welcome text.</p>
  </section>
</main>

D

<header>
  <div>
    <ul>
      <li><a href="#home">Home</a></li>
    </ul>
  </div>
</header>
<section>
  <h2>Introduction</h2>
  <p>Welcome text.</p>
</section>

💡 Hint

Screen readers rely on semantic tags and ARIA labels to understand page structure.

Option C uses semantic elements

,

with aria-label,

, and

with aria-labelledby, which helps screen readers navigate clearly.