HTML Lists
HTML Lists
On this page
HTML Lists
Unordered List
- HTML
- CSS
- JavaScript
Ordered Lists
- HTML
- CSS
- JavaScript
<!DOCTYPE html>
<html>
<head>
<title>HTML Lists</title>
</head>
<body>
<h4>Unordered List</h4>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<h4>Ordered Lists</h4>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
</body>
</html>
HTML Unordered Lists
HTML Unordered Lists (ul tag)
- HTML
- CSS
- JavaScript
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered Lists</title>
</head>
<body>
<h4>HTML Unordered Lists (ul tag)</h4>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>
HTML Ordered Lists
HTML Ordered Lists (ol tag)
- RED
- GREEN
- BLUE
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered Lists</title>
</head>
<body>
<h4>HTML Ordered Lists (ol tag)</h4>
<ol>
<li>RED</li>
<li>GREEN</li>
<li>BLUE</li>
</ol>
</body>
</html>
HTML Description Lists
HTML Description Lists
- HTML
- HyperText Markup Language
- CSS
- Cascading Style Sheets
- JavaScript
- Programming Languages
<!DOCTYPE html>
<html>
<head>
<title>HTML Description Lists</title>
</head>
<body>
<h4>HTML Description Lists</h4>
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
<dt>JavaScript</dt>
<dd>Programming Languages</dd>
</dl>
</body>
</html>
Unordered List Disc
Unordered List with Disc Bullets
- HTML
- CSS
- JavaScript
<!DOCTYPE html>
<html>
<head>
<title>Unordered List Disc</title>
</head>
<body>
<h2>Unordered List with Disc Bullets</h2>
<ul style="list-style-type:disc;">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>
Unordered List Circle
Unordered List with Circle Bullets
- RED
- GREEN
- BLUE
<!DOCTYPE html>
<html>
<head>
<title>Unordered List Circle</title>
</head>
<body>
<h2>Unordered List with Circle Bullets</h2>
<ul style="list-style-type:circle;">
<li>RED</li>
<li>GREEN</li>
<li>BLUE</li>
</ul>
</body>
</html>
Unordered List Square
Unordered List with Square Bullets
- Math
- English
- Computer
<!DOCTYPE html>
<html>
<head>
<title>Unordered List Square</title>
</head>
<body>
<h2>Unordered List with Square Bullets</h2>
<ul style="list-style-type:square;">
<li>Math</li>
<li>English</li>
<li>Computer</li>
</ul>
</body>
</html>
Unordered List None
Unordered List without Bullets
- Name
- Class
- Roll Number
<!DOCTYPE html>
<html>
<head>
<title>Unordered List None</title>
</head>
<body>
<h4>Unordered List without Bullets</h4>
<ul style="list-style-type:none;">
<li>Name</li>
<li>Class</li>
<li>Roll Number</li>
</ul>
</body>
</html>
Nested List
Nested List
Lists can be nested (list inside list):
- Chapter One
- Section One
- Section Two
- Section Three
- Chapter Two
- Chapter Three
<!DOCTYPE html>
<html>
<head>
<title>Nested List</title>
</head>
<body>
<h4>Nested List</h4>
<p>Lists can be nested (list inside list):</p>
<ul>
<li>Chapter One
<ul>
<li>Section One</li>
<li>Section Two </li>
<li>Section Three </li>
</ul>
</li>
<li>Chapter Two</li>
<li>Chapter Three</li>
</ul>
</body>
</html>
Horizontal List
<!DOCTYPE html>
<html>
<head>
<title>Horizontal List</title>
<style>
ul {
list-style-type: none;
margin: 2;
padding: 2;
overflow: hidden;
background-color: #c93f38;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 20px;
text-decoration: none;
}
li a:hover {
background-color: #1c1c1a;
}
</style>
</head>
<body>
<h4>Horizontal List with CSS</h4>
<ul>
<li> <a href="#">Some item</a></li>
<li> <a href="#">Another item</a></li>
</ul>
</body>
</html>
Ordered List Numbers
Ordered List with Numbers
- RED
- GREEN
- BLUE
<!DOCTYPE html>
<html>
<head>
<title>Ordered List Numbers</title>
</head>
<body>
<h4>Ordered List with Numbers</h4>
<ol type="1">
<li>RED</li>
<li>GREEN</li>
<li>BLUE</li>
</ol>
</body>
</html>
Alphabet Uppercase Letters
Ordered List with Uppercase Letters
- HTML
- CSS
- JavaScript
<!DOCTYPE html>
<html>
<head>
<title>Ordered List Uppercase Letters</title>
</head>
<body>
<h4>Ordered List with Uppercase Letters</h4>
<ol type="A">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
</body>
</html>
Alphabet Lowercase Letters
Ordered List with Lowercase Letters
- Name
- Class
- Roll Number
<!DOCTYPE html>
<html>
<head>
<title>Ordered List Lowercase Letters</title>
</head>
<body>
<h4>Ordered List with Lowercase Letters</h4>
<ol type="a">
<li>Name</li>
<li>Class</li>
<li>Roll Number</li>
</ol>
</body>
</html>
Roman Numbers Uppercase
Ordered List with Roman Numbers Uppercase
- Math
- English
- Computer
<!DOCTYPE html>
<html>
<head>
<title>Roman Numbers Uppercase</title>
</head>
<body>
<h4>Ordered List with Roman Numbers Uppercase</h4>
<ol type="I">
<li>Math</li>
<li>English</li>
<li>Computer</li>
</ol>
</body>
</html>
Roman Numbers Lowercase
Ordered List with Roman Numbers Lowercase
- HTML
- CSS
- JavaScript
<!DOCTYPE html>
<html>
<head>
<title>Roman Numbers Lowercase</title>
</head>
<body>
<h4>Ordered List with Roman Numbers Lowercase</h4>
<ol type="i">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
</body>
</html>
Control List Counting
Starting from 5
- HTML
- CSS
- JavaScript
Reverse from 10
- RED
- GREEN
- BLUE
<!DOCTYPE html>
<html>
<head>
<title>Control List Counting</title>
</head>
<body>
<h4>Starting from 5</h4>
<ol start="5">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
<h4>Reverse from 10</h4>
<ol start="10" reversed>
<li>RED</li>
<li>GREEN</li>
<li>BLUE</li>
</ol>
</body>
</html>