Home 〉 HTML Tutorials 〉 HTML List Tags - ul, ol, li Tags Explained with Examples
HTML List Tags - ul, ol, li Tags Explained with Examples !
HTML List Tags - ul, ol, li Tags Explained with Examples !
Want to learn how to display clean and organized lists in HTML?
This blog post on the HTML list tag explains the use of '<ul>', '<ol>', and '<li>' tags with syntax, examples, attributes, and styling. We've also discussed whether they are block-level or inline elements and how to use them in real-world scenarios. You also got a quick intro to description list tags like '<dl>', '<dt>', and '<dd>' - which we've covered in another blog post. Using proper SEO keywords and structure will help this post rank high in search results. This detailed blog post on HTML list tag is as follows.
Introduction
HTML List tags are used to display lists of items in web pages. Lists help organize content for better readability and structure. In HTML, you can create ordered lists, unordered lists, and description lists (covered in a separate post).
In this blog post, we'll focus on:
- '<ul>' - Unordered List
- '<ol>' - Ordered List
- '<li>' - List Item
We'll also give a brief mention of the '<dl>', '<dt>', and '<dd>' tags used for description lists, which we've explained in a [separate tutorial on HTML Description Tag].
🧱 Syntax and Explanation
Syntax ✍
<ul>
<li>Item One</li>
<li>Item Two</li>
</ul>
<ol>
<li>Step One</li>
<li>Step Two</li>
</ol>
- '<ul>': Represents an unordered (bulleted) list.
- '<ol>': Represents an ordered (numbered) list.
- '<li>': Represents a list item. Must be inside either '<ul>' or '<ol>'.
Block-level or Inline Element?
- '<ul>' - Block-level element
- '<ol>' - Block-level element
- '<li>' - Block-level element
They all start on a new line and take up full width by default.
HTML List Tag Attributes with Examples
1. type (only in '<ol>')
Defines the numbering type.
Code : 1 📝 
<!DOCTYPE html>
<html>
<body>
<ol type="A">
<li>Apple</li>
<li>Banana</li>
</ol>
</body>
</html>
output 📌
- Apple
- Banana
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
This will display list items with uppercase letters (A, B, C...).
2. start (only in '<ol>')
Specifies the starting number for an ordered list.
Code : 2 📝
<!DOCTYPE html>
<html>
<body>
<ol start="5">
<li>Point Five</li>
<li>Point Six</li>
</ol>
</body>
</html>
output 📌
- Point Five
- Point Six
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
List will start from 5 instead of 1.
3. reversed (only in '<ol>')
Displays the list in reverse order.
Code : 3 📝
<!DOCTYPE html>
<html>
<body>
<ol reversed>
<li>Final</li>
<li>Mid</li>
<li>Start</li>
</ol>
</body>
</html>
output 📌
- Final
- Mid
- Start
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
Displays: 3. Final, 2. Mid, 1. Start
4. style (inline CSS styling)
Applies inline CSS to customize the list's appearance.
Code : 4 📝
<!DOCTYPE html>
<html>
<body>
<ul style="background-color: #f0f0f0; padding: 10px; border-radius: 8px;">
<li style="color: #333; font-size: 16px;">List Item One</li>
<li style="color: #555; font-size: 16px;">List Item Two</li>
</ul>
</body>
</html>
output 📌
- List Item One
- List Item Two
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
Adds padding, background color, rounded corners, and text color to enhance visuals.
Please also refer to our post on HTML Description List Tag - Learn '<dl>', '<dt>', '<dd>' with Syntax, Attributes & Examples
Conclusion
HTML list tags ('<ul>', '<ol>', and '<li>') are essential for displaying content in a structured format. Whether you're creating navigation menus, process steps, or feature lists - list tags are the go-to option. With optional attributes and CSS styling, you can enhance the appearance and functionality of your lists easily.
Suggested Topics:
- CSS background-color Tutorial with Examples - Learn Easily
- CSS Border-Radius Property Explained with Examples for Beginners
- CSS color Property Tutorial with Examples - Learn Text Color in CSS
- CSS Font Properties Tutorial with Examples | font-family, font-size, font-style
- CSS Padding Explained with Examples | CSS Box Model Guide
Related Topics:
- HTML Block, Inline, and Empty Elements Explained with Examples
- HTML Description List Tag - Learn '<dl>', '<dt>', '<dd>' with Syntax, Attributes & Examples
- Introduction to HTML: Elements, Tags, Structure & HTML5 Features
Frequently Asked Questions (FAQs)
What is the difference between '<ul>' and '<ol>'?
A '<ul>' creates a bulleted list, while an '<ol>' creates a numbered list.
Can I nest lists inside another list?
Yes, you can nest '<ul>' or '<ol>' tags inside '<li>' elements.
Is '<li>' valid without '<ul>' or '<ol>'?
No, '<li>' must be placed inside either '<ul>' or '<ol>' tags.
Can we style lists using CSS?
Yes, using inline or external CSS you can style lists with color, font, padding, margin, etc.