Description: Simple Way to Add/Create HTML Lists as Unordered, Ordered or Definition List. Merging Ordered List into Un-Ordered List and Vice-Versa.
In this post, I will explain how you can create ordered, unordered or definition lists using HTML. You will also learn how you can merge ordered list into unordered list or vice-versa. Ordered or unordered lists are useful to sort out the things into separate lines over the webpage or on the paper. The HTML tag for unordered list is <ul> and the HTML tag for ordered list is <ol>. In both lists, each list item will be start with <li> tag. Let us give you an example.
You should also read:
Take a look of an un-ordered list,
The HTML code for unordered list is,
Take a look of an ordered list,
The HTML code for ordered list is,
Ordered and un-ordered lists are famous than the definition list. Basically HTML definition list is a list of items and each item has its description. Definition list starts from <dl> and each item defines in <dt> tag with the description in <dd> tag. Take an example of a definition list,
The HTML code for the given definition list is,
Now move further for better understanding,
In this section, we will use ordered list in un-ordered list and vice-versa. Sometimes, a list of each items need more information so we need to use child list, in that case, either we can use different list-type of the same parent list or use the opposite list. Take each types of example along with the preview and corresponding HTML codes. In the following table refer "O" with ordered list and "U" for un-ordered list.
Hope this tutorial helps you to create HTML lists manually. If you like the post, please share it!
Take a look of an un-ordered list,
- HTML Ordered Lists
- HTML Unordered Lists
- HTML Definition Lists
The HTML code for unordered list is,
<ul>
<li>HTML Ordered Lists</li>
<li>HTML Unordered Lists</li>
<li>HTML Definition Lists</li>
</ul>
<li>HTML Ordered Lists</li>
<li>HTML Unordered Lists</li>
<li>HTML Definition Lists</li>
</ul>
Take a look of an ordered list,
- HTML Ordered Lists
- HTML Unordered Lists
- HTML Definition Lists
The HTML code for ordered list is,
<ol>
<li>HTML Ordered Lists</li>
<li>HTML Unordered Lists</li>
<li>HTML Definition Lists</li>
</ol>
<li>HTML Ordered Lists</li>
<li>HTML Unordered Lists</li>
<li>HTML Definition Lists</li>
</ol>
Ordered and un-ordered lists are famous than the definition list. Basically HTML definition list is a list of items and each item has its description. Definition list starts from <dl> and each item defines in <dt> tag with the description in <dd> tag. Take an example of a definition list,
- Blogger
- - A blogging platform run by Google
- Wordpress
- - Another blogging platform
The HTML code for the given definition list is,
<dl>
<dt>Blogger</dt>
<dd>- A blogging platform run by Google</dd>
<dt>Wordpress</dt>
<dd>- Another blogging platform</dd>
</dl>
<dt>Blogger</dt>
<dd>- A blogging platform run by Google</dd>
<dt>Wordpress</dt>
<dd>- Another blogging platform</dd>
</dl>
Now move further for better understanding,
Create/Add Un-Ordered List in HTML for Blogger, Websites
There are three types of unordered list that you can use. These are disc, circle or square un-ordered lists and also called as bullets or list-type. If you don't mention the list-type then the disc mode will be chosen. If you want to change the list-type, add an extra attribute type in <ul> tag, and set a value in that attribute as disc, circle or square. In the following table, I have defined each list types with preview and the HTML code.| List Type | Preview | HTML Code |
|---|---|---|
| Disc list |
| <ul type="disc"> <li>HTML Ordered Lists</li> <li>HTML Unordered Lists</li> <li>HTML Definition Lists</li> </ul> |
| Circle list |
| <ul type="circle"> <li>HTML Ordered Lists</li> <li>HTML Unordered Lists</li> <li>HTML Definition Lists</li> </ul> |
| Square list |
| <ul type="square"> <li>HTML Ordered Lists</li> <li>HTML Unordered Lists</li> <li>HTML Definition Lists</li> </ul> |
How to Add/Create Ordered List in HTML for Websites, Blogger
Let us first we talk about the types of ordered list. Basically, the ordered list has five types numbered list, uppercase letters list, lowercase letters list, uppercase roman numbers list and lowercase roman numbers list. If you don't mention the list type while creating your ordered list, numbered list will be active by default. Using another list type, just add an attribute type in <ol> tag and set the value corresponding to the list-types. In the following table, I have defined each list types with preview and the HTML code.| List Type | Preview | HTML Code |
|---|---|---|
| Numbered list |
| <ol type="1"> <li>HTML Ordered Lists</li> <li>HTML Unordered Lists</li> <li>HTML Definition Lists</li> </ol> |
| Uppercase letters list |
| <ol type="A"> <li>HTML Ordered Lists</li> <li>HTML Unordered Lists</li> <li>HTML Definition Lists</li> </ol> |
| Lowercase letters list |
| <ol type="a"> <li>HTML Ordered Lists</li> <li>HTML Unordered Lists</li> <li>HTML Definition Lists</li> </ol> |
| Uppercase Roman list |
| <ol type="I"> <li>HTML Ordered Lists</li> <li>HTML Unordered Lists</li> <li>HTML Definition Lists</li> </ol> |
| Lowercase Roman list |
| <ol type="i"> <li>HTML Ordered Lists</li> <li>HTML Unordered Lists</li> <li>HTML Definition Lists</li> </ol> |
Merging Ordered/Un-Ordered List to Un-Ordered/Ordered List
In this section, we will use ordered list in un-ordered list and vice-versa. Sometimes, a list of each items need more information so we need to use child list, in that case, either we can use different list-type of the same parent list or use the opposite list. Take each types of example along with the preview and corresponding HTML codes. In the following table refer "O" with ordered list and "U" for un-ordered list.
| Methods | Preview | HTML Code |
|---|---|---|
| O in U lists |
| <ul type="disc"> <li>HTML Ordered Lists <ol type="1"> <li>Numbered Lists</li> <li>Uppercase letters lists</li> <li>Lowercase letters lists</li> <li>Uppercase Roman lists</li> <li>Lowercase Roman lists</li> </ol> </li> <li>HTML Unordered Lists <ol type="1"> <li>disc Lists</li> <li>Circle Lists</li> <li>Square Lists</li> </ol> </li> <li>HTML Definition Lists</li> </ul> |
| U in O list |
| <ol type="I"> <li>HTML Ordered Lists <ul type="square"> <li>Numbered Lists</li> <li>Uppercase letters lists</li> <li>Lowercase letters lists</li> <li>Uppercase Roman lists</li> <li>Lowercase Roman lists</li> </ul> </li> <li>HTML Unordered Lists <ul type="disc"> <li>disc Lists</li> <li>Circle Lists</li> <li>Square Lists</li> </ul> </li> <li>HTML Definition Lists</li> </ol> |
Hope this tutorial helps you to create HTML lists manually. If you like the post, please share it!
