Home »
HTML
HTML Lists
By IncludeHelp Last updated : October 13, 2024
HTML provides the convenience to create lists on the webpage. The list could be numbered lists or simply bulletins.
In HTML lists are basically if three types, which are as follows:
- Ordered Lists
- Unordered Lists
- Description Lists
In this article, we will cover all three lists as follows,
1) Ordered lists (<ol>)
The ordered list, as the name specifies an order, the list items here will be arranged in a sequence of numbers, alphabetically or in roman.
Example of ordered listing
<html>
<body>
<p>Example of ordered listing</p>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
<li>List item 5</li>
</ol>
</body>
</html>
Output
The TYPE attribute with <ol> list tag
For creating alphabetical or other orders the type attribute is used.
The value provides to the type attribute becomes the order of the first element.
For example type="A" gives an alphabetical list where the first element order is "A" and "B" and so on. And, for lower case letters we specify type="a" and for Romans type="i". For capital Romans : "I".
Example of ordered listing with type attribute
<html>
<body>
<p>Example of ordered listing with type attribute</p>
<p>Ordered list with uppercase alphabets...</p>
<ol type="A">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
<li>List item 5</li>
</ol>
<p>Ordered list with lowercase alphabets...</p>
<ol type="a">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
<li>List item 5</li>
</ol>
<p>Ordered list with uppercase roman...</p>
<ol type="I">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
<li>List item 5</li>
</ol>
<p>Ordered list with lowercase roman...</p>
<ol type="i">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
<li>List item 5</li>
</ol>
</body>
</html>
Output
2. Unordered Lists (<ul>)
In an unordered list, the list is represented in the form of a bulleted list, their lists are in any order of numbers or alphabets.
Example of unordered listing
<html>
<body>
<p>Example of unordered listing</p>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
<li>List item 5</li>
</ul>
</body>
</html>
Output
The TYPE attribute with <ul> list tag
In an unordered list, the bulletin could be changed to squares, circles, and man more. For this, we use the CSS style attribute with the list-style-type property and here we specify the symbol required.
The other symbols that could be given as:
- Disc: It gives the disc type bulletin to the list elements
- Circle: It gives a circle bulletin
- Square: It gives square bulletin
- None: It gives a list with no symbol
Example of unordered listing with type attribute
<html>
<body>
<p>Example of unordered listing with type attribute</p>
<p>Unordered list with type='disc'...</p>
<ul type="disc">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
<li>List item 5</li>
</ul>
<p>Unordered list with type='circle'...</p>
<ul type="circle">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
<li>List item 5</li>
</ul>
<p>Unordered list with type='square'...</p>
<ul type="square">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
<li>List item 5</li>
</ul>
<p>Unordered list with type='none'...</p>
<ul type="none">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
<li>List item 5</li>
</ul>
</body>
</html>
Output
3. Description Lists
In a description lists, there are terms listed and these terms have descriptions.
The description lists are created by the <dl>, <dt> and <dd> tags.
The <dl> tag defines the list, the <dt> tag specifies the term of the list or the name of the list element and the <dd> tag specifies the description of each term.
Example
<html>
<body>
<p>Example of description lists</p>
<dl>
<dt>Programming</dt>
<dd>C, C++, Java, etc.</dd>
<dt>Courses</dt>
<dd>MCA, B.Tech, BCA, etc</dd>
</dl>
</body>
</html>
Output
