HTML Lists (Ordered & Unordered)
Lists are used to display items in order - like a shopping list or steps to follow. HTML gives us two types of lists.
1. Unordered Lists (<ul>)
Unordered lists display bullet points. Each item uses the <li> tag.
<ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul>
- HTML
- CSS
- JavaScript
2. Ordered Lists (<ol>)
Ordered lists show numbers.
<ol> <li>Open your code editor</li> <li>Create an HTML file</li> <li>Start coding!</li> </ol>
- Open your code editor
- Create an HTML file
- Start coding!
3. Nested Lists
A list inside another list.
<ul>
<li>Frontend
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
</li>
<li>Backend</li>
</ul>
- Frontend
- HTML
- CSS
- Backend
4. Changing Number Style
Change numbering using type:
<ol type="A"> <li>Apple</li> <li>Banana</li> <li>Cherry</li> </ol>
- Apple
- Banana
- Cherry
type="1"→ Numberstype="A"→ Capital letterstype="a"→ Small letterstype="I"→ Roman numeralstype="i"→ Small Roman numerals
Next Lesson →HTML Tables
Previous Lesson →HTML Comments and Spacing