Unordered lists (<ul>) html tag
The use of unordered lists tag in HTML web page displays a collection of particular list items by grouping them in a particular order. Here, <ul> tag in HTML web page previews unordered list items i.e. list items display in an order where each ul list item is displayed by creating multiple times list items inside <li> tag. Remember here, each unordered list item in HTML web page displays bullet points in front of the list item, if you want to customize it manually, then you can customize the advanced unordered list item preview by applying CSS stylesheet properties in HTML web page.
Basic structure of unordered list in HTML web page.
Example of unordered list in HTML web page.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Html Unordered List Tag</title>
</head>
<body>
<p><b>Unordered List Element</b></p>
<ul>
<li>Americ</li>
<li>India</li>
<li>United Kingdom</li>
<li>Japan</li>
<li>Rusia</li>
</ul>
</body>
</html>
Customizing unordered lists in HTML web page.
Unordered list items in HTML web page can be customized manually with multiple options. Modifying the default bullet style of the default display unordered list, adjusting the bullet default indentation and manually configuring the default list item styles as needed etc.
Bullet Styles in HTML Web Pages.
Web developers can manually customize the default unordered list styles in HTML web pages by using the bullet list style type properties through CSS.
Unordered List Item Bullet Item List Option Choice.
- None bullet style – This removes all bullets effect points.
- Disc bullet style – This previews the disc bullet style in unordered list items.
- Circle bullet style – This previews the circle bullet style in unordered list items.
- Square bullet style – This previews the square bullet style in unordered list items.
Changing bullet style in HTML web page example.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Html Unordered List Css Bullet Style Format</title>
<style>
p{
color:red;
font-family:bookman old style;
}
.disc-style {
list-style-type: disc;
}
.circle-style {
list-style-type: circle;
}
.square-style {
list-style-type: square;
}
.no-style {
list-style-type: none;
}
</style>
</head>
<body>
<p><b>Disc Style Bullet</b></p>
<ul class=”disc-style”>
<li>Disc Bullet Style</li>
<li>Disc Bullet Style</li>
<li>Disc Bullet Style</li>
<li>Disc Bullet Style</li>
</ul>
<p><b>Circle Style Bullet</b></p>
<ul class=”circle-style”>
<li>Circle Bullet Style</li>
<li>Circle Bullet Style</li>
<li>Circle Bullet Style</li>
<li>Circle Bullet Style</li>
</ul>
<p><b>Square Style Bullet</b></p>
<ul class=”square-style”>
<li>Square Bullet Style</li>
<li>Square Bullet Style</li>
<li>Square Bullet Style</li>
<li>Square Bullet Style</li>
</ul>
<p><b>No Bullet Style</b></p>
<ul class=”no-style”>
<li>No Bullet Style</li>
<li>No Bullet Style</li>
<li>No Bullet Style</li>
<li>No Bullet Style</li>
</ul>
</body>
</html>
Nested lists in HTML web page.
Web developers can create a nested list item in an HTML web page by placing multiple list item elements inside an unordered list item. Sometimes we may need to create list items in a hierarchical order in an HTML web page.
Nested Lists Example in HTML Web Page.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Html Nested List Tag</title>
</head>
<body>
<p><b>Html Topic</b></p>
<ul>
<li>Overview of HTML
<ul>
<li>What is HTML?</li>
<li>History and evolution of HTML</li>
</ul>
</li>
<li>Basic HTML Document Structure
<ul>
<li>The HTML document skeleton: <!DOCTYPE html>, <html>, <head>, <body></li>
<li>Basic HTML tags and their functions
<ul>
<li>H1 Tag</li>
<li>P Tag</li>
<li>Ahref Tag</li>
<li>Table Tag</li>
</ul>
</li>
</ul>
</li>
</ul>
<ul>
<li>Creating a Simple Web Page
<ul>
<li>Writing and saving your first HTML file</li>
<li>Viewing HTML in a browser</li>
</ul>
</body>
</html>
Unordered List Items in HTML Web Page.
- <ul> tag – Creates unordered list items in an HTML web page.
- <li> tag – Creates multiple list items inside a <ul> tag in an HTML web page.
- Nested Lists – To create nested list items as per requirement in an HTML web page, multiple nested list items or elements can be developed using <ul> tag inside <li> tag.
