How to create HTML List | Unordered/Ordered/Definition Lists

To create/add Ordered list/Unordered list/Definition list in HTML for Websites, Blogger

HTML Unordered/Ordered Lists

HTMLordered and unordered list. In this post I will cover that how to create or add ordered and unordered list in HTML and how to merge order list to unordered list or unordered list to ordered list. Basically the most common HTML tags for creating lists are ordered lists and unordered list. The HTML tag for unordered list is <ul> and the HTML tag for ordered list is <ol>. In both lists as ordered list and unordered listeach list item will be start with <li> tag. Firstly introduce with some HTML lists.

Take a look of an unordered list as below,

• HTML Ordered Lists
• HTML Unordered Lists
• HTML Definition Lists

The HTML code for above unordered list is,

<ul>
<li>HTML Ordered Lists</li>
<li>HTML Unordered Lists</li>
<li>HTML Definition Lists</li>
</ul>

Take a look of an ordered list as below,

1. HTML Ordered Lists
2. HTML Unordered Lists
3. HTML Definition Lists

The HTML code for above ordered list is,

<ol>
<li>HTML Ordered Lists</li>
<li>HTML Unordered Lists</li>
<li>HTML Definition Lists</li>
</ol>

Now above we have taken an example of ordered list and unordered list we will discuss more about that lists but before that we will talk about HTML definition lists. Basically HTML definition list is a list of items  and each item has it's description. Definition list start from <dl> and in that list define item as <dt> and  each item  define description as <dd>. Take a look of a definition listas below,

Blogger

- A blogging platform run by Google

Wordpress

- Another blogging platform

The HTML code for above definition list is,

<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,

How to create/add unordered list in HTML for Blogger, websites

A simple unordered list you have been created before as an in example above. Here we will discuss about the type of unordered list. Basically there are three type of unordered list as disc,circle and square these are also called as bullets so by default if you don't mention any type then it will set in the disc mode.  If you want to change your bullets then just you need to add an attribute type and set a value in that attribute as disc, circle or square in <ul> tag. Below are the previews of each type of unordered list and the HTML codes corresponding to them. 

List Type	Preview	HTML Code
Disc list	HTML Ordered Lists HTML Unordered Lists HTML Definition Lists	<ul type="disc"> <li>HTML Ordered Lists</li> <li>HTML Unordered Lists</li> <li>HTML Definition Lists</li> </ul>
Circle list	HTML Ordered Lists HTML Unordered Lists HTML Definition Lists	<ul type="circle"> <li>HTML Ordered Lists</li> <li>HTML Unordered Lists</li> <li>HTML Definition Lists</li> </ul>
Square list	HTML Ordered Lists HTML Unordered Lists HTML Definition Lists	<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

You have been created a simple ordered list as in the example above. Now we are talking about the type of ordered list. Basically the ordered list have five type of version such as numbered list,uppercase letters list, lowercase letters list, uppercase roman numbers list and lowercase roman numbers list. Only just you need to add some attribute as type in <ol> tag and you have to set the value of that attribute as your need. If you do not use any attribute then ordered list will set as default by numbered list. Below are the preview of these ordered lists and the HTML codescorresponding to them.

List Type	Preview	HTML Code
Numbered list	HTML Ordered Lists HTML Unordered Lists HTML Definition Lists	<ol type="1"> <li>HTML Ordered Lists</li> <li>HTML Unordered Lists</li> <li>HTML Definition Lists</li> </ol>
Uppercase letters list	HTML Ordered Lists HTML Unordered Lists HTML Definition Lists	<ol type="A"> <li>HTML Ordered Lists</li> <li>HTML Unordered Lists</li> <li>HTML Definition Lists</li> </ol>
Lowercase letters list	HTML Ordered Lists HTML Unordered Lists HTML Definition Lists	<ol type="a"> <li>HTML Ordered Lists</li> <li>HTML Unordered Lists</li> <li>HTML Definition Lists</li> </ol>
Uppercase Roman list	HTML Ordered Lists HTML Unordered Lists HTML Definition Lists	<ol type="I"> <li>HTML Ordered Lists</li> <li>HTML Unordered Lists</li> <li>HTML Definition Lists</li> </ol>
Lowercase Roman list	HTML Ordered Lists HTML Unordered Lists HTML Definition Lists	<ol type="i"> <li>HTML Ordered Lists</li> <li>HTML Unordered Lists</li> <li>HTML Definition Lists</li> </ol>

How to Merge Ordered list/Unordered list to Unordered list/Ordered list

Now we are trying to use unordered list into ordered list. Why do we have to need merge both lists? It is basically suppose you have three items in any ordered or unordered lists and suppose some items contains another items so it is better to change ordering of your child items or if you do not want to merge both list then simply you can change the type of any particular list in child items. Below are some examples with previews and their HTML codes. Here in the column of Methods in the table below we will use "O" for Ordered lists and "U" for Unordered lists.

Methods	Preview	HTML Code
O in U lists	HTML Ordered Lists Numbered Lists Uppercase letters lists Lowercase letters lists Uppercase Roman lists Lowercase Roman lists HTML Unordered Lists disc Lists Circle Lists Square Lists HTML Definition 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	HTML Ordered Lists Numbered Lists Uppercase letters lists Lowercase letters lists Uppercase Roman lists Lowercase Roman lists HTML Unordered Lists disc Lists Circle Lists Square Lists HTML Definition Lists	<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>

Similarly you can use different type of Unordered lists in the singe Unordered lists just you need to change the type for child lists of that Unordered lists items and so for Ordered lists. So you can use and merge these lists to another one as by changing Unordered to Ordered lists or change in type of that lists so do what do you want to do.

You done!

Posted in: HTML,Internet