Lists: ul, ol, li
To create ordered and unordered list items in HTML5, you can use ul, ol, and li tags. Many times, a web developer or content creator needs to preview text content items in a list order in a web blog or post. You can represent web page text information in ordered and unordered list format. Mainly you can create three types of list items in HTML5. In which, unordered list item, ordered list item, and list item is the list object creation process. You can create and manage desired list items in HTML5 web page as per your web development post or blog requirement.
So let us create and manage multiple list items in HTML5.
HTML5 Unordered List.
In HTML5, unordered list items are created using (<ul>) tag. Generally, in unordered list items, you create and manage text information where the list item sequence order does not matter. In the unordered list item creation process, bulleted symbols are displayed in front of the preview list item text.
HTML5 Ul Tag Attributes.
- <ul> tag – With ul tag, you create unordered list item sequence.
- <li> tag – li tag helps the user to create the desired list item with or inside the ul tag in the existing blog post.
Unordered List Example in HTML5.
<ul>
<li>Bus</li>
<li>Car</li>
<li>Truck</li>
<li>Bike</li>
</ul>
HTML5 Ordered List.
Ordered List Items in HTML5 When you need to create and manage multiple list items in sequence that contain digits, numbers, characters, or Roman numeral format, you can use the ol tag. Ordered list items preview the list items in sequence as compared to unordered list items, where a list sequence order matters to you, where the order of the list items is important.
HTML5 ol Tag Attributes.
- <ol> tag – Creates list items in sequence order by placing text in an HTML5 web page.
- <li> tag – Creates list items in sequence order with the ol tag. The li tag creates and displays list items inside the ol tag.
Ordered List Example in HTML5.
<ol>
<li>Sachin Tendulkar</li>
<li>Virat Kohli</li>
<li>Rohit Sharma</li>
<li>Anil Kumble</li>
</ol>
HTML5 List Item.
In HTML5 web page, the list <li> tag can create and manage single to multiple list items in ordered and unordered ul and ol tags. Remember, the li tag can be used to create a new list item without a list and also inside an ordered and unordered list.
HTML5 li Tag Attributes.
- li tag attributes – Remember, you can use the li tag to create nested list items inside <ul> or <ol> tags as per your requirement.
Li List Example in HTML5.
<ul>
<li>Text Item 1 </li>
<li>Text Item 2 </li>
<li>Text Item 3 </li>
<li>Text Item 4 </li>
</ul>
HTML5 Description List (<dl>), <dt>, and <dd> Tags.
HTML5 web pages can use the description list item (<dl>) tag, where the dl tag is used to create a list topic and a topic description list. In most cases, the dl, dt, and dd tags are used to represent a topic and its detailed description information.
HTML5 Description Tag Attributes.
- <dl> tag – The dl tag is the information holder for the description item in a list item.
- <dt> tag – The dt tag defines a particular list character in a description list.
- <dd> tag – The dd tag implements the definition for a list item.
Description List Example in HTML5
<dl>
<dt>Desktop Computer</dt>
<dd>Fixed Computer Device, Which Is Not Movable. </dd>
<dt>Laptop Computer</dt>
<dd>Portable Computer Device, Which Is Movable. </dd>
<dt>Tablet</dt>
<dd>Very Handy Portable Device, Which Is Completely Movable. </dd>
</dl>
Complete Example of ordered or unordered, li, dl, dt, tag in html5.
<!DOCTYPE html>
<html lang=” en”>
<head>
<meta charset=” UTF-8″>
<title>HTML5 List Tag</title>
</head>
<body>
<h3>Unordered List Example in HTML5. </h3>
<ul>
<li>Bus</li>
<li>Car</li>
<li>Truck</li>
<li>Bike</li>
</ul>
<h3>Ordered List Example in HTML5. </h3>
<ol>
<li>Sachin Tendulkar</li>
<li>Virat Kohli</li>
<li>Rohit Sharma</li>
<li>Anil Kumble</li>
</ol>
<h3>Li List Example in HTML5. </h3>
<ul>
<li>Text Item 1 </li>
<li> Text Item 2 </li>
<li> Text Item 3 </li>
<li> Text Item 4 </li>
</ul>
<h3>Description List Example in HTML5. </h3>
<dl>
<dt><b>Desktop Computer</b></dt>
<dd>Fixed Computer Device, Which Is Not Movable. </dd>
<dt><b>Laptop Computer</b></dt>
<dd>Portable Computer Device, Which Is Movable. </dd>
<dt><b>Tablet Computer</b></dt>
<dd>Very Handy Portable Device, Which Is Completely Movable. </dd>
</dl>
</body>
</html>
