Author: M Abo Bakar Aslam

Lists

HTML lists are essential for organizing content in a clear and structured way on web pages. They help present information in an easy-to-read format, whether the content requires a specific sequence or not. In this section, you will explore the three main types of lists in HTML—ordered lists, unordered lists, and definition lists — and understand when and how to use each effectively.

1. Ordered List <ol>
The <ol> element is used to create ordered lists, where each list item is preceded by a sequential number or another ordered marker. The default ordered marker is typically a number (1, 2, 3, etc.), but it can be customized using CSS. Ordered lists are commonly used for items that need to be in a specific order or sequence, such as steps in a tutorial or a recipe.

<ol>
    <li>Preheat the oven to 350°F.</li>
    <li>Mix the dry ingredients.</li>
    <li>Add the wet ingredients.</li>
</ol>

Output

2. Unordered List <ul>
The <ul> element is used to create unordered lists, where each list item is preceded by a bullet point or another unordered marker. Unordered lists are used when the order of items does not matter. They are often used for creating lists of items, features, or options.

<ul>
    <li>Preheat the oven to 350°F.</li>
    <li>Mix the dry ingredients.</li>
    <li>Add the wet ingredients.</li>
</ul>

Output

3. Definition List <dl>
The <dl> element is used to create definition lists, which consist of term-definition pairs. Neither order-list nor order-list format but detail list. Each term is defined using the <dt> element, and its corresponding definition is provided using the <dd> element. Definition lists are often used to provide explanations or descriptions of terms.

<dl>
    <dt>HTML</dt>
        <dd>Hypertext Markup Language. A language for creating a static web page.</dd>
    <dt>CSS</dt>
        <dd>Cascading Style Sheets. This language is used to design the web pages.</dd>
</dl>

Output