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.

Ordered List
Unordered List and
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.

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.

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.

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.

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.

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.

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.

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.

Contents show