Nested elements in HTML - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a list inside a section.

HTML

<section>
  [1]<li>Item 1</li><li>Item 2</li></ul>
</section>

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

A<ul>

B<ol>

C<div>

D<p>

Attempts:

3 left

💡 Hint

Common Mistakes

Using

or

instead of a list container.

Using

when an unordered list is needed.

The

tag creates an unordered list, which is the correct container for list items inside the section.

2fill in blank

medium

Complete the code to nest a paragraph inside an article.

HTML

<article>
  [1]This is a paragraph inside the article.</p>
</article>

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

A<p>

B<div>

C<span>

D<section>

Attempts:

3 left

💡 Hint

Common Mistakes

Using

or instead of

for paragraphs.

Forgetting to close the paragraph tag.

The

tag is used to define a paragraph, which is the correct element to nest inside an article for text content.

3fill in blank

hard

Fix the error in nesting a list inside a nav element.

HTML

<nav>
  [1]<li>Home</li><li>About</li></ul>
</nav>

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

A<section>

B<ol>

C<div>

D<ul>

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting the list container tag.

Using

or

instead of a list container.

The list items

must be inside a list container like

. The code was missing the opening
tag.

4fill in blank

hard

Fill both blanks to nest a heading inside the header.

HTML

<header>
  [1]Main Navigation[2]
</header>

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

A<h1>

B<nav>

C</h1>

D</nav>

Attempts:

3 left

💡 Hint

Common Mistakes

Using

tags around the heading text instead of heading tags.

Forgetting to close the heading tag.

The heading text should be inside

and

tags to mark it as a main heading.

5fill in blank

hard

Fill all three blanks to create a section with an article containing a heading and a paragraph.

HTML

<section>
  <article>
    [1]Welcome[2]
    [3]This is the first paragraph inside the article.</p>
  </article>
</section>

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

A<h2>

B<p>

C</h2>

D</p>

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up heading and paragraph tags.

Forgetting to close tags properly.

The heading inside the article uses

and

tags. The paragraph starts with

and ends with

.

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>