In this article, we’re going to dive into the world of HTML lists. We’ll break down what lists are, explore the different types they come in, and show you how to use them with real-life examples.
So, what’s a list in HTML? Well, think of it as a way to organize and display information on a web page. It’s like making a shopping list – you want to jot down items you need to buy, and you can do it in two main ways: ordered or unordered.
Now, let’s talk about the HTML `<li>` element. This little guy is essential for creating lists. You put your list items inside `<li>` tags, and you can mix them with other HTML elements to make your list look nice.
If you want to get fancy, there are various attributes you can use with these lists. These attributes can help you customize your lists further, like changing the type of bullets or numbers used. For all the nitty-gritty details on these attributes, check out our article on the HTML `<li>` type attribute.
So, in a nutshell, HTML lists are like your web page’s superpower for organizing and presenting information. Whether you’re creating a to-do list, outlining steps, or just sharing your favorite things, lists are your friends in web design. Stick around, and we’ll show you some real examples of how to use them effectively!
<!DOCTYPE html>
<html>
<head>
<title>GeeksforGeeks</title>
</head>
<body>
<h2>Welcome To GeeksforGeeks Learning</h2>
<h5>List of available courses</h5>
<ul>
<li>Data Structures & Algorithm</li>
<li>Web Technology</li>
<li>Aptitude & Logical Reasoning</li>
<li>Programming Languages</li>
</ul>
<h5>Data Structures topics</h5>
<ol>
<li>Array</li>
<li>Linked List</li>
<li>Stacks</li>
<li>Queues</li>
<li>Trees</li>
<li>Graphs</li>
</ol>
</body>
</html>
The HTML Unordered List: An unordered list starts with the “ul” tag. Each list item starts with the “li” tag. The list items are marked with bullets i.e small black circles by default.
Syntax:
<ul> list of items </ul>
Attribute: This tag contains two attributes which are listed below:
compact: It will render the list smaller.
type: It specifies which kind of marker is used in the list.
Note: The <ul> attributes are not supported by HTML5.
Example: This example describes the unordered list
<!DOCTYPE html>
<html>
<body>
<h2>Grocery list</h2>
<ul>
<li>Bread</li>
<li>Eggs</li>
<li>Milk</li>
<li>Coffee</li>
</ul>
</body>
</html>
HTML unordered list has various list item markers:
Example 1: The Disc can be used to set the list item marker to a bullet i.e default.
<!DOCTYPE html>
<html>
<head>
<title>HTML ul tag</title>
</head>
<body>
<h1>MurmuSoftware Infotech</h1>
<h2>Unordered List with Disc Bullets</h2>
<p> MurmuSoftware courses List:</p>
<ul style=”list-style-type:disc”>
<li> MurmuSoftware </li>
<li>Sudo</li>
<li>Gfg</li>
<li>Gate</li>
<li>Placement</li>
</ul>
</body>
</html>
Example 3: The Square can be used to set the list item marker to a square.
<!DOCTYPE html>
<html>
<body>
<h1>GeeksforGeeks</h1>
<h2>Unordered List with Square Bullets</h2>
<p>GeeksforGeeks courses List:</p>
<ul style=”list-style-type: square”>
<li>Geeks</li>
<li>Sudo</li>
<li>Gfg</li>
<li>Gate</li>
<li>Placement</li>
</ul>
</body>
</html>
Example 4: It’s none that can be used to set the list item marker with no mark.
<!DOCTYPE html>
<html>
<body>
<h1>GeeksforGeeks</h1>
<h2>Unordered List with No Bullets</h2>
<p>GeeksforGeeks courses List:</p>
<ul style=”list-style-type: none”>
<li>Geeks</li>
<li>Sudo</li>
<li>Gfg</li>
<li>Gate</li>
<li>Placement</li>
</ul>
</body>
</html>
Example: Nested Unordered List, It is used to nest the list items ie., a list inside another list
<!DOCTYPE html>
<html>
<body>
<h1>GeeksforGeeks</h1>
<h2>Nested Unordered List</h2>
<p>GeeksforGeeks courses List:</p>
<ul>
<li>DSA</li>
<ul>
<li>Array</li>
<li>Linked List</li>
<li>stack</li>
<li>Queue</li>
</ul>
<li>Web Technologies</li>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<li>Aptitude</li>
<li>Gate</li>
<li>Placement</li>
</ul>
</body>
</html>
HTML Ordered List: An ordered list starts with the “ol” tag. Each list item starts with the “li” tag. The list items are marked with numbers by default.
Syntax:
<ol>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ol>
Certainly, let’s simplify the explanation of these HTML list attributes:
1.Compact Attribute (Not Supported in HTML5): This attribute used to tell the browser to make the list more compact. However, it’s not supported in modern HTML5. Instead, you should use CSS to control the spacing and appearance of your lists.
Example: Let’s say you want to create a reversed, compact list that starts from the letter “X” in lowercase Roman numerals. You would use these attributes like this:
<!DOCTYPE html>
<html>
<head>
<title>HTML ol tag</title>
</head>
<body>
<h1 style=”color: green”>GeeksforGeeks</h1>
<h3>HTML ol tag</h3>
<p>reversed attribute</p>
<ol reversed>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ol>
<p>start attribute</p>
<ol start=”5″>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ol>
<p>type attribute</p>
<ol type=”i”>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ol>
</body>
</html>
HTML ordered list has various list item markers: The type attribute of the <ol> tag defines the type of the list item marker.
Example 1: The list items will be numbered with numbers i.e default.
<!DOCTYPE html>
<html>
<body>
<h2>Ordered List with Numbers</h2>
<ol type=”1″>
<li>Bread</li>
<li>Eggs</li>
<li>Milk</li>
<li>Coffee</li>
</ol>
</body>
</html>
Example 2: Type=”A”, this list of items will be numbered with uppercase letters.
<!DOCTYPE html>
<html>
<body>
<h2>Ordered List with Letters</h2>
<ol type=”A”>
<li>Bread</li>
<li>Eggs</li>
<li>Milk</li>
<li>Coffee</li>
</ol>
</body>
</html>
Example 3: Type=”a”, this list of items will be numbered with lowercase letters.
<!DOCTYPE html>
<html>
<body>
<h2>Ordered List with Lowercase Letters</h2>
<ol type=”a”>
<li>Bread</li>
<li>Eggs</li>
<li>Milk</li>
<li>Coffee</li>
</ol>
</body></html>
Example 4: Type=”I”, this list of items will be numbered with uppercase roman numbers.
<!DOCTYPE html>
<html>
<body>
<h2>Ordered List with Roman Numbers</h2>
<ol type=”I”>
<li>Bread</li>
<li>Eggs</li>
<li>Milk</li>
<li>Coffee</li>
</ol>
</body>
</html>
Example 5: Type=”i”, this list of items will be numbered with lowercase roman numbers.
<!DOCTYPE html>
<html>
<body>
<h2>Ordered List with Lowercase Roman Numbers</h2>
<ol type=”i”>
<li>Bread</li>
<li>Eggs</li>
<li>Milk</li>
<li>Coffee</li>
</ol>
</body>
</html>
Example 6: Nested ordered list, a nested ordered list is a list that has a list inside another list.
<!DOCTYPE html>
<html>
<body>
<h1>GeeksforGeeks</h1>
<h2>Nested Ordered List</h2>
<ol>
<li>Coffee</li>
<li> Tea
<ol>
<li>Black tea</li>
<li>Green tea</li>
</ol>
</li>
<li>Milk</li>
</ol>
</body>
</html>
Value attribute:
The value attribute may be used on an individual <li> element within an ordered list to change its value within the list. You define the value of a list item and the number of any list item appearing after it will be recalculated accordingly.
Example: This example illustrates the use of the “value attribute” used on the <li> element.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h2>Welcome To GFG</h2>
<ol>
<li>Item One</li>
<li value=”10″>Item Two</li>
<li>Item Three</li>
<li>Item Four</li>
</ol>
</body>
</html>
Syntax:
<dl> Contents… </dl>
Example: This example describes the HTML Description List.
<!DOCTYPE html>
<html>
<body>
<h2>A Description List</h2>
<dl>
<dt>Coffee</dt>
<dd>- 500 gms</dd>
<dt>Milk</dt>
<dd>- 1 ltr Tetra Pack</dd>
</dl>
</body>
</html>
Not a member yet? Register now
Are you a member? Login now