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

.