« Previous Next »

Lists

HTML provides three main types of lists to group related content:

  • Unordered List (<ul>) - Bullets
  • Ordered List (<ol>) - Numbers
  • Description List (<dl>) - Terms & meanings

Unordered List

<ul>
    <li>HTML</li>
    <li>CSS</li>
</ul>
  • HTML
  • CSS

Ordered List

<ol>
    <li>Step 1</li>
    <li>Step 2</li>
</ol>
  1. Step 1
  2. Step 2

Description List

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

Unordered List

Output :

Ordered List

Output :

Description List

Output :

Practice Exercises

Task 1: How to create ordered and unordered lists in HTML?

Goal: Create a step-by-step guide using an ordered list (<ol>) for sequential steps and an unordered list (<ul>) for bulleted items.
💡 Hint: Use <ol><li>...</li></ol> for numbered steps and <ul><li>...</li></ul> for bulleted items.
💡 Show Solution 
<html>
  <body>
    <h2>Web Development Learning Path</h2>

    <h3>Core Technologies (Unordered)</h3>
    <ul>
      <li>HTML5 Structuring</li>
      <li>CSS3 Styling & Layouts</li>
      <li>JavaScript Interactive Logic</li>
    </ul>

    <h3>Project Execution Steps (Ordered)</h3>
    <ol>
      <li>Design wireframe layout</li>
      <li>Write clean HTML markup</li>
      <li>Apply CSS styles and test responsiveness</li>
      <li>Publish website on hosting server</li>
    </ol>
  </body>
</html>
Output :

Web Development Learning Path

Core Technologies (Unordered)

  • HTML5 Structuring
  • CSS3 Styling & Layouts
  • JavaScript Interactive Logic

Project Execution Steps (Ordered)

  1. Design wireframe layout
  2. Write clean HTML markup
  3. Apply CSS styles and test responsiveness
  4. Publish website on hosting server
Explanation: Use <ul> when item order does not matter (bullet points) and <ol> when item sequence is important (numbered steps).
Task 2: How to structure terms and definitions using Description Lists?

Goal: Create a technical glossary using <dl>, <dt> (terms), and <dd> (descriptions).
💡 Hint: Wrap terms in <dt> tags and their explanations in <dd> tags inside a <dl> block.
💡 Show Solution 
<html>
  <body>
    <h2>AIT Course Definitions</h2>

    <dl>
      <dt>FSD</dt>
      <dd>- Full Stack Development (Frontend & Backend integration)</dd>

      <dt>UI/UX</dt>
      <dd>- User Interface & User Experience Design principles</dd>

      <dt>CS</dt>
      <dd>- Cyber Security Essentials and Network Safety</dd>
    </dl>
  </body>
</html>
Output :

AIT Course Definitions

FSD
- Full Stack Development (Frontend & Backend integration)
UI/UX
- User Interface & User Experience Design principles
CS
- Cyber Security Essentials and Network Safety
Explanation: Description lists (<dl>) are ideal for glossaries, metadata, or key-value term listings where <dt> defines the term and <dd> provides its definition.
« Previous Next »