HTML Lists
In HTML, lists are used to display items in a sequence. They are super handy when you want to organize content like steps, features, groceries or anything in a structured format.
HTML provides three types of lists.
1. Ordered List ( <ol> )
This type shows items in a numbered format (1, 2, 3...). Used when order matters, like steps in a process.
Example:
Output:
2. Unordered List ( <ul> )
Displays items with bullet points. Used when the order does not matter, like a list of fruits.
Example:
Output:
3. Description List ( <dl> )
Used to defines terms and descriptions, like a glossary.
Example:
Output:
Example: Simple List
Output:
Styled Lists Example
You can customize how your list looks using CSS, like changing the bullet type, color spacing etc.
Example: HTML+CSS
Output:
Nested List Example
Nesting lets you create sub-lists inside your main list, great for hierarchical data.
Example:
Output:
Here, you see a main list with two items ('Frontend' and 'Backend') each containing its own sublist.
Tips
HTML provides three types of lists.
1. Ordered List ( <ol> )
This type shows items in a numbered format (1, 2, 3...). Used when order matters, like steps in a process.
Example:
<ol><li>Boil water</li><li>Add tea leaves</li><li>Stir and serve</li></ol>
Output:
2. Unordered List ( <ul> )
Displays items with bullet points. Used when the order does not matter, like a list of fruits.
Example:
<ul><li>Apple</li><li>Banana</li><li>Orange</li></ul>
Output:
3. Description List ( <dl> )
Used to defines terms and descriptions, like a glossary.
Example:
<dl><dt>HTML</dt><dd>HyperText Markup Language</dd><dt>CSS</dt><dd>Cascading Style Sheets</dd></dl>
Output:
Example: Simple List
<!DOCTYPE html><html><head><title>List Example</title></head><body><h3>Animal List</h3><ul><li>Cat</li><li>Dog</li><li>Cow</li></ul></body></html>
Output:
Styled Lists Example
You can customize how your list looks using CSS, like changing the bullet type, color spacing etc.
Example: HTML+CSS
<!DOCTYPE html><html><head><title>Styled List</title><style>ul.custom-list {list-style-type: square;color: blue;padding-left: 20px;}</style></head><body><h3>Styled Unordered List</h3><ul class="custom-list"><li>HTML</li><li>CSS</li><li>JavaScript</li></ul></body></html>
Output:
Nested List Example
Nesting lets you create sub-lists inside your main list, great for hierarchical data.
Example:
<!DOCTYPE html><html><head><title>Nested List</title></head><body><h3>Nested Unordered List</h3><ul><li>Frontend<ul><li>HTML</li><li>CSS</li><li>JavaScript</li></ul></li><li>Backend<ul><li>Java</li><li>Python</li><li>JavaScript</li></ul></li></ul></body></html>
Output:
Here, you see a main list with two items ('Frontend' and 'Backend') each containing its own sublist.
Tips
- Use <li> only inside <ul> or <ol> tags.
- Always keep your lists structured for better readability.
- You can style lists using CSS to customize bullet types, numbering or spacing.