List use cases in layout in HTML - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a simple unordered list in HTML.

HTML

<ul>
  <li>Apples</li>
  <li>Bananas</li>
  <li>[1]</li>
</ul>

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

AOranges

B<li>Grapes</li>

CFruits

DBanana

Attempts:

3 left

💡 Hint

Common Mistakes

Adding tags inside the blank instead of just the text.

Using a category name instead of an item.

The <li> tag defines a list item. Here, 'Oranges' is the correct item to complete the list.

2fill in blank

medium

Complete the code to create an ordered list with three steps.

HTML

<ol>
  <li>Step 1: Gather materials</li>
  <li>[1]</li>
  <li>Step 3: Finish project</li>
</ol>

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

AStep 2: Start building

BStep 2: Building start

CStep 2: Build start

DStep 2 Start building

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting the colon after 'Step 2'.

Mixing up the order of words.

The second step should be clearly labeled as 'Step 2: Start building' to keep the order and meaning clear.

3fill in blank

hard

Fix the error in the nested list code by completing the blank.

HTML

<ul>
  <li>Fruits
    <ul>
      <li>Apple</li>
      <li>[1]</li>
    </ul>
  </li>
</ul>

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

ABananas

B<li>Banana</li>

CBanana

DBanana<li>

Attempts:

3 left

💡 Hint

Common Mistakes

Adding extra <li> tags inside the blank.

Using plural form when singular is expected.

Inside the nested <ul>, each item should be just the text inside <li> tags already present. So only 'Banana' is needed here.

4fill in blank

hard

Fill both blanks to create a description list with a term and its description.

HTML

<dl>
  <dt>[1]</dt>
  <dd>[2]</dd>
</dl>

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

AHTML

BHyperText Markup Language

CCSS

DCascading Style Sheets

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping the term and description.

Using unrelated terms and descriptions.

The <dt> tag is for the term, and <dd> is for its description. Here, 'HTML' is the term and 'HyperText Markup Language' is the description.

5fill in blank

hard

Fill all three blanks to create a navigation menu with links.

HTML

<nav>
  <ul>
    <li><a href="[1]">Home</a></li>
    <li><a href="[2]">About</a></li>
    <li><a href="[3]">Contact</a></li>
  </ul>
</nav>

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

A/index.html

B/about.html

C/contact.html

D/home.html

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect file paths.

Mixing up the order of links.

The href attribute in <a> tags defines the link destination. The correct links are '/index.html' for Home, '/about.html' for About, and '/contact.html' for Contact.

Practice

1. Which of the following is a common use case for a bulleted list (<ul>) in web layout?

easy

A. Displaying a list of features without a specific order

B. Showing step-by-step instructions

C. Creating a navigation menu with numbered items

D. Highlighting a single important paragraph

Solution

1. Step 1: Understand the purpose of bulleted lists

   Bulleted lists (<ul>) are used to show items that do not require a specific order.

2. Step 2: Match use case with list type

   Displaying features without order fits the bulleted list purpose best.

3. Final Answer:

   Displaying a list of features without a specific order -> Option A

4. Quick Check:

   Bulleted list = unordered items [OK]

Hint: Use <ul> for unordered items, like features or options [OK]

Common Mistakes:

• Confusing bulleted lists with numbered lists
• Using <ul> for ordered steps
• Thinking <ul> is for single items

2. Which HTML tag correctly creates a numbered list for showing steps in a recipe?

easy

A. <li>

B. <ol>

C. <ul>

D. <div>

Solution

1. Step 1: Identify the tag for ordered lists

   The <ol> tag creates numbered (ordered) lists.

2. Step 2: Confirm correct tag for recipe steps

   Steps require order, so <ol> is the correct choice.

3. Final Answer:

   <ol> -> Option B

4. Quick Check:

   Numbered list = <ol> [OK]

Hint: Use <ol> for ordered steps or sequences [OK]

Common Mistakes:

• Using <ul> instead of <ol> for ordered lists
• Confusing <li> as a container tag
• Using <div> for list structure

3. What will be the visual result of this HTML snippet?

<ol>
  <li>Mix ingredients</li>
  <li>Bake for 30 minutes</li>
  <li>Let cool</li>
</ol>

medium

A. An error because <ol> cannot have <li>

B. A bulleted list with three items

C. Plain text with no list formatting

D. A numbered list with three steps

Solution

1. Step 1: Recognize the <ol> tag

   The <ol> tag creates a numbered list.

2. Step 2: Understand <li> usage inside <ol>

   Each <li> is a list item, so the browser shows a numbered list with these items.

3. Final Answer:

   A numbered list with three steps -> Option D

4. Quick Check:

   <ol> + <li> = numbered list [OK]

Hint: <ol> with <li> creates numbered steps [OK]

Common Mistakes:

• Thinking <ol> creates bullets
• Believing <li> cannot be inside <ol>
• Expecting plain text output

4. Identify the error in this HTML snippet intended to create a bulleted list:

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

medium

A. Using <ul> inside <ul> instead of <li>

B. Missing closing tag for outer <ul>

C. List items should be inside <ol> not <ul>

D. No error, this is valid HTML

Solution

1. Step 1: Check list item tags inside <ul>

   List items must be inside <li> tags, not <ul>.

2. Step 2: Identify incorrect nesting

   Using <ul> inside <ul> creates invalid structure and breaks the list.

3. Final Answer:

   Using <ul> inside <ul> instead of <li> -> Option A

4. Quick Check:

   List items = <li> inside <ul> [OK]

Hint: Use <li> for list items inside <ul> or <ol> [OK]

Common Mistakes:

• Nesting <ul> inside <ul> instead of <li>
• Forgetting to close tags
• Confusing <ul> and <ol> usage

5. You want to create an accessible navigation menu with items that can be navigated by keyboard and screen readers. Which list type and attributes should you use?

hard

A. Use <ul> with no ARIA roles or keyboard support

B. Use <ol> without roles because order matters

C. Use <ul role="menubar"> with <li role="menuitem"> and keyboard support

D. Use <div> elements with click handlers only

Solution

1. Step 1: Choose correct list type for navigation

   Navigation menus are usually unordered lists (<ul>) because order is not important.

2. Step 2: Add ARIA roles and keyboard support

   Adding role="menubar" to <ul> and role="menuitem" to <li> improves accessibility and keyboard navigation.

3. Final Answer:

   Use <ul role="menubar"> with <li role="menuitem"> and keyboard support -> Option C

4. Quick Check:

   Accessible nav = <ul> + ARIA roles + keyboard [OK]

Hint: Add ARIA roles to <ul> and <li> for accessible menus [OK]

Common Mistakes:

• Using <ol> when order is not needed
• Skipping ARIA roles for accessibility
• Using <div> without semantic meaning