An unordered list in HTML. This will list items using plain bullets sign.
What is ul and li in HTML?
an unordered list is defined using the <ul> tag, and each item within the list is defined using the <li> tag. Both the <ul> and <li> tags require opening and closing tags.
HTML <ul> Tag
Unordered List: This tag starts and ends the unordered list (<ul>). The items inside are typically displayed with bullet points by default.
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<li> tags always placed inside the <ul> tag to denote individual items in the list.
The list will appear with bullet points preceding each item by default. You can use CSS to change the list style.
HTML Ordered Lists
an ordered list is also used for items listing. using the <ol> tag defined an ordered list. each item numbered automatically.
Here’s a complete example of an ordered list in HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Unordered List Example</title>
</head>
<body>
<h1>My Favorite Animals</h1>
<ol>
<li>Dog</li>
<li>Cat</li>
<li>Elephant</li>
<li>Giraffe</li>
</ol>
</body>
</html>
What is basic difference between ul and ol list in html?
In HTML, the <ul> (unordered list) and <ol> (ordered list) elements are used to create lists as we see the above, but as we see in the examples, they differ in how they display the list items:
-
<ul>: Creates an unordered list, where the list items are marked with bullets as default. -
<ol>: Creates an ordered list, where the list tems are automatically numbered (e.g., 1, 2, 3) as default without css.
Both types of lists use the <li> tag to define individual items, but the way the items are presented visually differs.
Customizing Ordered Lists with CSS:
You can change the default list style types with CSS.
for example, you can change the bullets style to disc in unordered lists .
<ul style="list-style-type:circle">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
list-style-type: Defines the style of the list item marker.
List style type to square in unordered lists
<ul style="list-style-type:square">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
CSS list-style-type Values:
-
For Unordered Lists (
<ul>):disc– Default solid circlecircle– Hollow circlesquare– Solid squarenone– No marker
-
For Ordered Lists (
<ol>):decimal– 1, 2, 3, ...lower-alpha– a, b, c, ...upper-alpha– A, B, C, ...lower-roman– i, ii, iii, ...upper-roman– I, II, III, ...
These styles can be applied to lists using the list-style-type property in CSS.
If you have any other questions or need further examples, let us know and upload the question in our forum tapgen.xyz
Learn to code with the world's largest web developer site. Not sure where to begin? HTML is The language for building web pages Learn HTML Tutorial with Tapgen.
=================================