What is a list ?
A list is defined as the group of individuals arranged in an order.
Usually set of related items are called as list.
What is HTML list ?
In HTML A list is defined as a short pieces of information listed in an order.
Lists is a group of related pieces of information arranged in order and which is easy to read.
In web development, lists provides elements in an arranged format, which is easily understand by the visitors.
How list works in HTML ?
HTML lists gets the list elements and arranges in particular order thereby helps the visitors read our web site clearly.
HTML lists creates the well-structured format with the elements inside the webpage.
HTML lists are easily accessible, easy-to-maintain the webpage document.
What are the types of list ?
There are three list types in HTML,
1. Un-Ordered list
2. Ordered list
3. Description list
HTML web coding !!!
Click to Learn More about – HTML Tutorial for beginners
1. Un-Ordered list
This is used to group a set of related items in no particular order.
Example :
<!DOCTYPE html>
<html>
<head>
<title>List tag</title>
</head>
<body>
<ul>
<li>MKGandhi</li>
<li>AbdulKalaam</li>
<li>Tendulkar</li>
<li>RahulDravid</li>
</ul>
</body>
</html>
Output :
2. Ordered list
This is used to group a set of related items in a specific order.
Example :
<!DOCTYPE html>
<html>
<head>
<title>List tag</title>
</head>
<body>
<ol>
<li>MKGandhi</li>
<li>AbdulKalaam</li>
<li>Tendulkar</li>
<li>RahulDravid</li>
</ol>
</body>
</html>
Output :
3. Description list
This is used to display name/value pairs such as terms and definitions.
Each list type has a specific purpose and meaning in a web page.
Example :
<!DOCTYPE html>
<html>
<head>
<title>List tag</title>
</head>
<body>
<dl>
<dt>MK Gandhi</dt>
<dd>Father of our Nation.</dd>
<dt>Abdul Kalaam</dt>
<dd>Best Scientist of India</dd>
<dt>Tendulkar</dt>
<dd>Pride of India</dd>
<dt>Rahul Dravid</dt>
<dd>Great Wall of Indian Cricket</dd>
</dl>
</body>
</html>
Output :
What are the advantages of HTML list ?
1. Flexibility:
If the user wants to change the order of the list items in an ordered list, he/she can simply move around the list item elements.
And when the browser loads the webpage, it renders the list properly with modified order.
2. Styling:
We can use CSS <style> to list <li></li> properly for visitors attraction.
3. Semantics:
HTML webpage with lists provides proper semantic structure, allows the users with visual impairments that they are reading a list, rather than just reading out a confusing jumble of text/numbers.