lists

What is List in HTML?

A list is a collection of related items that are grouped together. In HTML, lists are used to organize and present information in a structured manner. There are three main types of lists in HTML:

Unordered List
Ordered List
Description List

Unordered List

An unordered list is a collection of items that do not have a specific order. In HTML, unordered lists are created using the <ul> tag, and each item in the list is represented by the <li> tag. The items in an unordered list are typically displayed with bullet points.

Example of Unordered List:

                
                 <ul>
                 <li>Item 1</li>
                 <li>Item 2</li>
                 <li>Item 3</li>
                 </ul>

This will render as:

Item 1
Item 2
Item 3

Type Attribute

The type attribute in HTML is used to specify the style of the list markers for both unordered and ordered lists.

Unordered List Type Attribute:

For unordered lists, the type attribute can take the following values:

disc: Default bullet point (filled circle)
circle: Hollow circle
square: Filled square

Example of Unordered List with Type Attribute:

                
                 <ul type="circle">
                 <li>Item A</li>
                 <li>Item B</li>
                 <li>Item C</li>
                 </ul>

This will render as:

Item A
Item B
Item C

Nested List

A nested list is a list that contains another list within it. In HTML, you can create nested lists by placing a <ul> or <ol> tag inside a <li> tag of another list.

Example of Nested List:

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

This will render as:

Fruits
- Apple
- Banana
Vegetables
- Carrot
- Broccoli

Horizontal List

A horizontal list is a list where the items are displayed in a single line, rather than stacked vertically. In HTML, you can create a horizontal list by using CSS to change the display property of the list items.

Example of Horizontal List:

                
                 <ul style="list-style-type:none; padding:0;">
                 <li style="display:inline; margin-right:10px;">Home</li>
                 <li style="display:inline; margin-right:10px;">About</li>
                 <li style="display:inline; margin-right:10px;">Services</li>
                 <li style="display:inline; margin-right:10px;">Contact</li>
                 </ul>

This will render as:

Home
About
Services
Contact

Ordered List

An ordered list is a collection of items that have a specific order or sequence. In HTML, ordered lists are created using the <ol> tag, and each item in the list is represented by the <li> tag. The items in an ordered list are typically displayed with numbers or letters.

Example of Ordered List:

                
                 <ol>
                 <li>First Item</li>
                 <li>Second Item</li>
                 <li>Third Item</li>
                 </ol>

This will render as:

First Item
Second Item
Third Item

Type Attribute

The type attribute in ordered lists is used to specify the style of the list markers. It can take the following values:

1: Numbers (default)
a: Lowercase letters
A: Uppercase letters
i: Lowercase Roman numerals
I: Uppercase Roman numerals

Example of Ordered List with Type Attribute:

                
                 <ol type="A">
                 <li>Item One</li>
                 <li>Item Two</li>
                 <li>Item Three</li>
                 </ol>

This will render as:

Item One
Item Two
Item Three

Start Attribute

The start attribute in ordered lists is used to specify the starting value of the list. By default, ordered lists start at 1, but you can change this by using the start attribute.

Example of Ordered List with Start Attribute:

                
                 <ol start="5">
                 <li>Item Five</li>
                 <li>Item Six</li>
                 <li>Item Seven</li>
                 </ol>

This will render as:

Item Five
Item Six
Item Seven

Nested List

A nested list is a list that contains another list within it. In HTML, you can create nested lists by placing a <ul> or <ol> tag inside a <li> tag of another list.

Example of Nested Ordered List:

                
                 <ol>
                 <li>Chapter 1
                     <ol>
                         <li>Section 1.1</li>
                         <li>Section 1.2</li>
                     </ol>
                 </li>
                 <li>Chapter 2
                     <ol>
                         <li>Section 2.1</li>
                         <li>Section 2.2</li>
                     </ol>
                     <ul>
                     <li> --- IGNORE ---
                     </li> --- IGNORE ---
                     </ul>
                 </li>
                 </ol>

This will render as:

Chapter 1
1. Section 1.1
2. Section 1.2
Chapter 2
1. Section 2.1
2. Section 2.2

Description List

A description list is used to define terms and their descriptions. In HTML, description lists are created using the <dl> tag, with each term defined by the <dt> tag and each description defined by the <dd> tag.

Example of Description List:

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

This will render as:

HTML: HyperText Markup Language
CSS: Cascading Style Sheets