HTML Lists Quiz

Quiz 3 8 questions

Prerequisites for the quiz

  1. HTML Lists

Are you ready?

8 questions to solve

Instructions
  1. This quiz goes to full-screen once you press the Start button.
  2. At the end of the quiz, you are able to review all the questions that you answered wrong and see their explanations.
What does the term 'ol' in <ol> stand for?
The term 'ol' stands for ordered list. This goes with choice (B). For more information, refer to HTML Lists — What are lists?
What does the term 'ul' in <ul> stand for?
The term 'ul' stands for unordered list. This goes with choice (B). For more information, refer to HTML Lists — What are lists?
What does the term 'li' in <li> stand for?
The term 'li' stands for list item. This goes with choice (C). For more information, refer to HTML Lists — What are lists?

Suppose you're shown the output of some HTML code as follows:

  • JavaScript
  • Node.js
  • Express.js
Which of the following HTML codes does this output align with?
We can clearly notice that the list item markers in the output above are circles (also known as bullets, or discs). This is a characteristic feature of <ul> lists. Hence, the correct choice is (A). For more information, refer to HTML Lists — Some simple lists.
A <ul> element can contain as many <li> elements as we want to. True or false?
That's right — there's no limit to the number of <li> elements that we can put inside a <ul> (or even an <ol>) element. For more information, refer to HTML Lists.

Consider the following list:

  • Names

    1. Alice
    2. Bob
  • Ages

    1. 18 years
    2. 20 years

A newbie learner has devised the following code to produce a similar list using HTML:

<ul>
   <p>Names</p>
   <ol>
      <li>Alice</li>
      <li>Bob</li>
   </ol>
   <p>Ages</p>
   <ol>
      <li>18 years</li>
      <li>20 years</li>
   </ol>
</ul>
Is there any issue in the HTML?

The <ul> element shown above doesn't have <li> elements inside it to contain the first (i.e. the names) and second (i.e. the ages) parts of the list.

Here's the more appropriate code:

<ul>
<li> <p>Names</p> <ol> <li>Alice</li> <li>Bob</li> </ol>
</li>
<li> <p>Ages</p> <ol> <li>18 years</li> <li>20 years</li> </ol>
</li> </ul>

Likewise, the correct choice is (C). For more information, refer to HTML Lists — Nesting lists.

Let's say we want to write a recipe using HTML. Part of it includes writing the instructions, which are a list of steps to follow, in the given order.

Which element suits this kind of a list?
Since the order matters in the instructions, we ought to use the <ol> element. This goes with choice (B). For more information, refer to HTML Lists.

Consider the following code:

<ul>
   <li>
      <h2>Fruits</h2>
      <ul>
         <li>Apple</li>
         <li>Orange</li>
         <li>Kiwi</li>
         <li>Banana</li>
      </ul>
   </li>
   <li>
      <h2>Vegetables</h2>
      <ul>
         <li>Onion</li>
         <li>Tomato</li>
         <li>Garlic</li>
         <li>Cucumber</li>
      </ul>
   </li>
</ul>
Which of the following outputs aligns with this code?
First of all, we notice the presence of <h2>s in the HTML; hence, our set of choices reduces down to (B) or (D). To decide between these, we note that both the lists are <ul> lists which always go with bullet item markers. Hence, the correct choice is (B). For more information, refer to HTML Lists — Nesting lists.

"I created Codeguage to save you from falling into the same learning conundrums that I fell into."

— Bilal Adnan, Founder of Codeguage