• Hajipur, Bihar, 844101

☰
❮
❯

HTML

HTML5 Basics

HTML Styling and Design

HTML Links and Media

HTML Layout and Structure

HTML Forms

HTML Graphics

HTML APIs

HTML Advanced Topics

HTML Lists

← Previous Next →

🔹 What is a List in HTML?

A list in HTML is a collection of related items grouped together. HTML provides three main types of lists:

  1. Ordered List (<ol>) – numbered list

  2. Unordered List (<ul>) – bulleted list

  3. Description List (<dl>) – terms and definitions

🔹 Ordered List (<ol>)

Displays items in a numbered format.

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

You can change the numbering style using the type attribute:

  • type="1" (default) → 1, 2, 3

  • type="A" → A, B, C

  • type="a" → a, b, c

  • type="I" → I, II, III

  • type="i" → i, ii, iii

🔹 Unordered List (<ul>)

Displays items with bullets.

<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Orange</li>
</ul>

You can change the bullet style using the type attribute (deprecated) or CSS:

  • disc (default)

  • circle

  • square

🔹 Description List (<dl>)

Used for terms and definitions.

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>

  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
</dl>

🔹 Nesting Lists

Lists can be nested within each other:

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

🔹 Styling Lists with CSS

<ul style="list-style-type: square;">
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

Practice Questions

Q1. Create a numbered list of five programming languages.

Q2. Create a bulleted list of five grocery items.

Q3. Change the bullet style to circle.

Q4. Display a list of fruits using an unordered list.

Q5. Create an ordered list with uppercase alphabet style.

Q6. Make a nested list of categories and subcategories.

Q7. Create a description list of HTML and CSS.

Q8. Use CSS to make bullets square-shaped.

Q9. Create a list of countries using <ol type="I">.

Q10. Display an FAQ using a description list.

HTML Lists Quiz

Q1: Which tag is used for ordered lists in HTML?

A. <ul>
B. <ol>
C. <li>
D. <dl>

Q2: What tag defines a list item?

A. <item>
B. <li>
C. <list>
D. <dt>

Q3: Which list is best for defining terms and definitions?

A. Ordered List
B. Unordered List
C. Description List
D. Dropdown List

Q4: What does <ul> stand for?

A. Upper List
B. Unordered List
C. Useful List
D. User List

Q5: Which tag is used inside a <dl> to define the term?

A. <dt>
B. <li>
C. <dd>
D. <ul>

Q6: Which of the following is a valid type for <ol>?

A. box
B. circle
C. A
D. point

Q7: What does the <dd> tag define?

A. Date definition
B. List item
C. Description of a term
D. Heading of a list

Q8: Which attribute or style can change list bullets in CSS?

A. bullet-type
B. list-style-type
C. text-decoration
D. font-style

Q9: What tag is NOT used in description lists?

A. <dt>
B. <dd>
C. <dl>
D. <ul>

Q10: What is the default bullet style of <ul>?

A. Square
B. Disc
C. Circle
D. Arrow
← Previous Next →
Login
Go Back Top