Disclaimer: TubeMint is fully funded by its readers, we recommend hightly rated affiliate products and services and when you buy them through our links, we get commission at no extra cost to you. Thanks for you support!

Creating Lists in HTML 5

In this post you will learn all three HTML 5 lists data types, there are three types of lists in HTML.

  1. Ordered List
  2. Unordered List and
  3. Definition List

All you need to know I am going to write each HTML lists data type code and attach a screenshot for visual understanding. I would suggest that you fire up your favorite text editor and web browser and code along with me.

Let’s dive in….

Now the ordered list starts from here

List style type upper-Latin

HTML 5 upper-Latin list data type. This example uses an ordered list to show the sequence of steps in a process.

<style>
       li {
    list-style: upper-latin;
}
</style>
<body>
 <main>
<ol>
  <li>You can do it</li>
  <li>You should not give up</li>
  <li>You good at doing it is</li>
  <li>all the best for you</li>
  <li>i hope you can do it </li>
</ol>  
 </main>
</body>  

The above code should look like the upper-Latin list image below in your preferred browser.

upper-Latin data type

List style type lower-alpha

HTML 5 lower-alpha list data type. This example uses an ordered list to show the sequence of steps in a process.

<style>
       li {
    list-style: lower-alpha ;
}
</style>
<body>
 <main>
<ol>
  <li>You can do it</li>
  <li>You should not give up</li>
  <li>You good at doing it is</li>
  <li>all the best for you</li>
  <li>i hope you can do it </li>
</ol>  
 </main>
</body>  

The above code should look like the lower-alpha list image below in your preferred browser.

lower-alpha data type

Ordered List

HTML 5 ordered list data type. This example uses an ordered list to show the sequence of steps in a process.

	   <ol>
	     <li>You can do it</li>
	     <li>You should not give up</li>
	     <li>You good at doing it is</li>
             <li>all the best for you</li>
	     <li>i hope you can do it </li>
	   </ol>
  

The above code should look like the ordered list image below in your preferred browser.

html 5  ordered list data type

Now the unordered list starts from here

List style type Devanagari

HTML 5 Devanagari list data type. This example uses an unordered list to show the sequence of steps in a process.

<style>
        element.style {
        }
        li {
           list-style:devanagari;
        }
</style>
<body>
  <main>
    <ul>
        <li>broccoli</li>
        <li>cucumber</li>
        <li>lettuce</li>
        <li>pumpkin</li>
        <li>beetroot</li>
        <li>brussel sprouts</li>
     </ul> 
  </main>
</body>

The above code should look like the Devanagari list image below in your preferred browser.

Devanagari list data type

List style type Telugu

HTML 5 Telugu list data type. This example uses an unordered list to show the sequence of steps in a process.

<style>
        element.style {
        }
        li {
           list-style:telugu;
        }
</style>
<body>
  <main>
    <ul>
        <li>broccoli</li>
        <li>cucumber</li>
        <li>lettuce</li>
        <li>pumpkin</li>
        <li>beetroot</li>
        <li>brussel sprouts</li>
     </ul> 
  </main>
</body>

The above code should look like the Telugu list image below in your preferred browser.

Telugu data type

List style type Malayalam

HTML 5 Malayalam list data type. This example uses an unordered list to show the sequence of steps in a process.

<style>
        element.style {
        }
        li {
           list-style:malayalam;
        }
</style>
<body>
  <main>
    <ul>
        <li>broccoli</li>
        <li>cucumber</li>
        <li>lettuce</li>
        <li>pumpkin</li>
        <li>beetroot</li>
        <li>brussel sprouts</li>
     </ul> 
  </main>
</body>

The above code should look like the Malayalam list image below in your preferred browser.

Malayalam list data type

Unordered List

HTML 5 unordered list data type. This example shows an unordered list of items to buy at the store.

<ul>
   <li>broccoli</li>
   <li>cucumber</li>
   <li>lettuce</li>
   <li>pumpkin</li>
   <li>beetroot</li>
   <li>brussel sprouts</li>
</ul>
	

The above code look like the unordered list image below in your preferred browser.

html 5 unordered list data type

Definition List 

HTML 5 definition list data type.This example uses a definition list to group a definition with the term that is being defined.

<dl>
    <dt>Name</dt>
    <dd>Steve Doe</dd>
    <dt>tel</dt>
    <dd>55-78454925</dd>
    <dt>email</dt>
    <dd>[email protected]</dd>
    <dt>DOB</dt>
    <dd>30/7/2005</dd>
   </dl>

The above code look like the definition list image blow in your preferred browser.

html 5 definition list data type



Leave a Reply