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.

Practice

1. What does it mean to have nested elements in HTML?

easy

A. Putting one HTML tag inside another tag

B. Writing HTML tags without closing them

C. Using only one HTML tag per page

D. Adding CSS styles inside HTML tags

Solution

1. Step 1: Understand the meaning of nested elements

   Nested elements mean placing one HTML tag inside another to organize content.

2. Step 2: Compare options with this meaning

   Only Putting one HTML tag inside another tag describes putting one tag inside another, which matches nested elements.

3. Final Answer:

   Putting one HTML tag inside another tag -> Option A

4. Quick Check:

   Nested elements = tags inside tags [OK]

Hint: Nested means inside another tag, like boxes inside boxes [OK]

Common Mistakes:

• Confusing nesting with styling
• Thinking nesting means missing closing tags
• Assuming nesting means one tag per page

2. Which of the following is the correct way to nest elements in HTML?

easy

A. Text

B. Text

C. Text

D. <div>Text

Solution

1. Step 1: Check tag order and closing

   Correct nesting means tags open and close in order: parent opens, child opens, child closes, parent closes.

2. Step 2: Validate each option

   Text

   follows correct order: <div> <p> Text </p> </div>. Others have mismatched or missing closing tags.

3. Final Answer:

   <div><p>Text</p></div> -> Option B

4. Quick Check:

   Tags must close in reverse order of opening [OK]

Hint: Tags must close in reverse order they open [OK]

Common Mistakes:

• Closing parent before child
• Swapping tag order
• Forgetting closing tags

3. What will the browser display for this HTML code?

<div>Hello <strong>World</strong>!</div>

medium

A. Hello World! (with 'World' bolded)

B. Hello World!

C. Hello World! (all normal text)

D. Error: tags not closed

Solution

1. Step 1: Identify nested tags and their effect

   The <strong> tag inside <div> makes the word 'World' bold.

2. Step 2: Understand browser rendering

   Browser shows 'Hello ' normal, 'World' bold, and '!' normal, all inside a block.

3. Final Answer:

   Hello World! (with 'World' bolded) -> Option A

4. Quick Check:

   <strong> makes text bold inside parent [OK]

Hint: Tags inside text change style of that part only [OK]

Common Mistakes:

• Thinking tags show as text
• Ignoring effect of <strong>
• Assuming error due to nesting

4. Find the error in this nested HTML snippet:

<ul>
  <li>Item 1
  <li>Item 2</li>
</ul>

medium

A. Extra closing tag for <ul>

B. Using <li> outside <ul>

C. Incorrect nesting of <ul> inside <li>

D. Missing closing tag for first <li>

Solution

1. Step 1: Check each list item tag

   The first <li> tag has no closing </li> before the second <li> starts.

2. Step 2: Confirm proper list structure

   Each <li> must be closed inside <ul>. Missing closing tag causes invalid HTML.

3. Final Answer:

   Missing closing tag for first <li> -> Option D

4. Quick Check:

   Every <li> needs a matching </li> [OK]

Hint: Close each list item before starting next [OK]

Common Mistakes:

• Assuming <li> auto-closes
• Confusing <ul> and <li> roles
• Ignoring missing closing tags

5. You want to create a navigation menu with nested submenus using HTML. Which structure correctly nests a submenu inside a main menu item?

hard

A. HomeAboutTeamHistoryContact

B. HomeTeamHistoryAboutContact

C. HomeAboutTeamHistoryContact

D. HomeAboutTeamHistoryContact

Solution

1. Step 1: Understand submenu nesting

   A submenu is a <ul> inside a <li> of the main menu to group related items.

2. Step 2: Check each option's structure

   • Home
   • About
     • Team
     • History
   • Contact
   nests <ul> with 'Team' and 'History' inside the 'About' <li>, which is correct. Others break nesting rules or place <ul> outside <li>.

3. Final Answer:

   <nav><ul><li>Home</li><li>About<ul><li>Team</li><li>History</li></ul></li><li>Contact</li></ul></nav> -> Option C

4. Quick Check:

   Submenu <ul> inside <li> = correct nesting [OK]

Hint: Put submenu <ul> inside main menu <li> [OK]

Common Mistakes:

• Placing submenu <ul> outside <li>
• Not closing <li> before submenu
• Mixing order of <ul> and <li>