In HTML, lists are used to group related items together. There are three main types of lists:
1. Ordered List (<ol>) : Ordered lists can be customized with type attribute (1, A, a, I, i).
2. Unordered List (<ul>) : Unordered lists can change bullet style using CSS (list-style-type: circle; square; none;).
3. Description List (<dl>) : <dt> = definition term, <dd> = definition description
1) Ordered List(ol)
Displays items in a numbered sequence (1, 2, 3…).
Each item goes inside a
<li>(list item) tag.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />
<title>Order List(rsportflio)</title>
</head>
<body>
<h2>Ordered Lists</h2>
<ol>
<li>Html</li>
<li>Css</li>
<li>Js</li>
</ol>
</body>
</html>
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />
<title>Order List(rsportflio)</title>
</head>
<body>
<h2>Ordered Lists</h2>
<ol type=”A”> <!– type attribute—>
<li>Html</li>
<li>Css</li>
<li>Js</li>
</ol>
</body>
</html>
2) Unordered List(ul)
Displays items with bullet points by default.
Each item goes inside
<li>.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />
<title>Unordered List(rsportflio)</title>
</head>
<body>
<h2>Unordered Lists</h2>
<ul>
<li>PHP</li>
<li>Mysql</li>
</ul>
<ul style=”list-style-type: none”>
<li>Bootstrap</li>
<li>Wordpress</li>
</ul>
<ul style=”list-style-type: circle”>
<li>Math</li>
<li>Computer</li>
</ul>
<ul style=”list-style-type: square”>
<li>AI</li>
<li>DSA</li>
</ul>
</body>
</html>
3) Description List (<dl>)
Used for definitions or name–value pairs.
<dt>= definition term,<dd>= definition description.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />
<title>Description List(rsportflio)</title>
</head>
<body>
<h2>Description Lists</h2>
<dl>
<dt>HTML</dt>
<dd>Hyper Text Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>
</body>
</html>
