We use the following structure to create both ordered and unordered lists:
<ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>
- Item 1
- Item 2
- Item 3
This format uses the <ul> tag for an unordered list, and each item in the list is wrapped in an <li> tag. The unordered list will display with bullet points by default. You can customize this style using CSS.
<ol> <li>First item</li> <li>Second item</li> <li>Third item</li> </ol>
- First item
- Second item
- Third item
An ordered list, defined by the <ol> tag, numbers each item in the list by default. Like unordered lists, each list item is placed inside an <li> tag.
You can also nest lists inside each other. This is useful when you want to organize related items under a specific category.
<ul> <li>Fruits<ul> <li>Apples</li> <li>Bananas</li> </ul></li> <li>Vegetables<ul> <li>Carrots</li> <li>Spinach</li> </ul> </li> </ul>
- Fruits
- Apples
- Bananas
- Vegetables
- Carrots
- Spinach
This will create a nested list with two main categories, each containing a sublist.
Lists can be styled with CSS to change the appearance of the bullets or numbers, as well as the overall layout of the list.
Example of changing list bullet style:
ul { list-style-type: square; }
This will change the default round bullets to square ones. Similarly, you can modify the numbers in an ordered list.
Example:
ol { list-style-type: upper-roman; }
This will change the numbers in an ordered list to Roman numerals (I, II, III…).
You can also add links inside your list items. This is commonly used in navigation menus or directories.
<ul> <li><a href="/home">Home</a></li> <li><a href="/about">About Us</a></li> <li><a href="/contact">Contact</a></li> </ul>
This will render a bulleted list of links to different pages.