Lists in HTML — Interview Questions & Answers

Introduction to Lists

Ques: What are lists in HTML?

Ans: Lists are used to display related items in a structured format — either ordered (numbered) or unordered (bulleted).

Ques: What are the three main types of lists in HTML?

Ans:

1. Ordered List – <ol>
2. Unordered List – <ul>
3. Definition List – <dl>, <dt>, <dd>

Ques: What is an ordered list?

Ans: It displays list items in a specific order (numbered by default).

Example :

<ol>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>

Ques: How can you change the numbering style?

Ans: Using the type attribute:

<ol type="A">  <!-- A, a, I, i, 1 -->
  <li>Step 1</li>
  <li>Step 2</li>
</ol>

Ques: How can you start numbering from a specific value?

Ans: Using the start attribute:

<ol start="5">
  <li>Item 5</li>
  <li>Item 6</li>
</ol>

Ques: What does the reversed attribute do in <ol>?

Ans: Displays list items in descending order.

<ol reversed>
  <li>First</li>
  <li>Second</li>
</ol>

Ques: What is an unordered list?

Ans: A list where items are shown with bullets instead of numbers.

Example:

<ul>
  <li>Apples</li>
  <li>Bananas</li>
  <li>Cherries</li>
</ul>

Ques: How can you change the bullet style?

Ans: Using the type attribute or CSS:

<ul type="square">
  <li>Item 1</li>
</ul>

<style>
ul { list-style-type: circle; }
</style>

Ques: What is a definition list used for?

Ans: To display terms and their descriptions (like a glossary or FAQ).

Example of a definition list:

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
</dl>

Ques: What is the difference between <dt> and <dd>?

Tag	Meaning	Example
<dt>	Definition term	<dt>HTML</dt>
<dd>	Definition description	<dd>Language for web pages.</dd>

Nested Lists

Ques: What are nested lists?

Ans: Lists inside other lists (used for hierarchical or multi-level menus).

Example:

<ul>
  <li>Fruits
    <ul>
      <li>Apple</li>
      <li>Banana</li>
    </ul>
  </li>
  <li>Vegetables</li>
</ul>

Ques: Can ordered and unordered lists be mixed?

Ans: Yes, you can nest <ul> inside <ol> or vice versa.

Styling Lists

Ques: How can you remove bullets or numbers from a list using CSS?

Ans:

ul, ol { list-style-type: none; }

Ques: How can you create a horizontal navigation list?

Ans:

ul li {
  display: inline;
  margin-right: 15px;
}

Advanced Questions

Ques: What’s the difference between <li> and <dt>/<dd>?

Ans: <li> is for general list items; <dt>/<dd> are used specifically in definition lists.

Ques: Can <li> exist outside <ol> or <ul>?

Ans: No, that’s invalid HTML; <li> must always be inside an ordered or unordered list.

Ques: How does HTML5 improve accessibility for lists?

Ans: Lists provide a semantic structure that helps screen readers identify grouped content clearly (especially menus or navigation).