fbpx
April 2, 2020
html list

Tutorial 11# Understanding HTML List and How to Insert Them

In this article we will be going through creating HTML list and how you can insert them in your HTML web document. HTML gives the web author the opportunity to structure items using list formats.

READ PREVIOUS TUTORIAL ON: Tutorial 10# Understanding HTML Tables and How to Insert Them

What is an HTML List?

This is a list created using HTML. HTML allows the coder or developer to insert a list in the HTML document. There are different types of list in HTML and they include:

  • Unordered list (<ul> & </ul>)
  • Ordered list (<ol> & </ol>)
  • Definition list (<dl> & </dl>)

HTML Unordered list

This is list structured without a specific order. This is not specified in an increasing or decreasing order but comes with a disk bullet by default.

An unordered list is created by having the list tags (<li> &</li>) in between the unordered tags (<ul> &</ul>) as shown below.

<!DOCTYPE html>
<html>

   <head>
      <title>Using external Image on Webpage</title>
   </head>
	
   <body>
      <ul>
         <li> html</li>
         <li>css</li>
         <li>java</li>
         <li>develoferd</li>


      </ul>
     
      


   </body>
	
</html>

RESULT ON WEB BROWSER

unordered html

Observing the result you can see that the list was placed alongside the disk bullet. We can change this to circle bullet, square bullet or dick bullet using the bullet attribute as shown below

  • For square bullet <ul type="square">
  • For circle bullet <ul type="circle">
  • For disk bullet <ul type="disk">

Example shown below

square bullet

<!DOCTYPE html>
<html>

   <head>
      <title>Using external Image on Webpage</title>
   </head>
	
   <body>
      <ul type="square">
         <li> html</li>
         <li>css</li>
         <li>java</li>
         <li>develoferd</li>


      </ul>
     
      


   </body>
	
</html>

RESULT ON WEB BROWSER

html list square bulletin

For disk bullet

<!DOCTYPE html>
<html>

   <head>
      <title>Using external Image on Webpage</title>
   </head>
	
   <body>
      <ul type="disk">
         <li> html</li>
         <li>css</li>
         <li>java</li>
         <li>develoferd</li>


      </ul>
     
      


   </body>
	
</html>

Result on web browser

For circle bullet

<!DOCTYPE html>
<html>

   <head>
      <title>Using external Image on Webpage</title>
   </head>
	
   <body>
      <ul type="circle">
         <li> html</li>
         <li>css</li>
         <li>java</li>
         <li>develoferd</li>


      </ul>
     
      


   </body>
	
</html>

RESULT ON WEB BROWSER

Ordered list

Ordered list are lists placed in an ordered structure either progressing or declining order. Example shown below

<!DOCTYPE html>
<html>

   <head>
      <title>Using external Image on Webpage</title>
   </head>
	
   <body>
      <ol type="disk">
         <li> html</li>
         <li>css</li>
         <li>java</li>
         <li>develoferd</li>


      </ol>
     
      


   </body>
	
</html>

RESULT ON WEB BROWSER

By default, the ordered list makes use of number bullets and we can change this to roman numerals, alphabets etc with the attribute shown below

<ol type = "1"> ------- Default-Case Numerals.
<ol type = "I"> ------- For Upper Case Numerals.
<ol type = "i"> ------- For Lower Case Numerals.
<ol type = "A"> ------- For Upper Case Letters.
<ol type = "a"> ------- For Lower Case Letters.

For Upper Case Numerals bullet

<!DOCTYPE html>
<html>

   <head>
      <title>Using external Image on Webpage</title>
   </head>
	
   <body>
      <ol type = "I"></oltype>
         <li> html</li>
         <li>css</li>
         <li>java</li>
         <li>develoferd</li>


      </ol>
     
      


   </body>
	
</html>

RESULT ON WEB BROWSER

html list numerals

For Lower case numerals bullet

<!DOCTYPE html>
<html>

   <head>
      <title>Using external Image on Webpage</title>
   </head>
	
   <body>
      <ol type = "i"></oltype>
         <li> html</li>
         <li>css</li>
         <li>java</li>
         <li>develoferd</li>


      </ol>
     
      


   </body>
	
</html>

RESULT ON WEB BROWSER

For Upper case letters

<!DOCTYPE html>
<html>

   <head>
      <title>Using external Image on Webpage</title>
   </head>
	
   <body>
      <ol type = "A"></oltype>
         <li> html</li>
         <li>css</li>
         <li>java</li>
         <li>develoferd</li>


      </ol>
     
      


   </body>
	
</html>

RESULT ON WEB BROWSER

html list upper case

For Lower case letters

<!DOCTYPE html>
<html>

   <head>
      <title>Using external Image on Webpage</title>
   </head>
	
   <body>
      <ol type = "a"></oltype>
         <li> html</li>
         <li>css</li>
         <li>java</li>
         <li>develoferd</li>


      </ol>
     
      


   </body>
	
</html>

RESULT ON WEB BROWSER

html list lower case

Changing the start when Bulletin in HTML

if you intend starting the bulletin from specific number in an ordered list, we can simply achieve this using the start attribute at the opening list tag as shown below

<!DOCTYPE html>
<html>

   <head>
      <title>Using external Image on Webpage</title>
   </head>
	
   <body>
      <ol type = "1"  start="4"></oltype>
         <li> html</li>
         <li>css</li>
         <li>java</li>
         <li>develoferd</li>


      </ol>
     
      


   </body>
	
</html>

RESULT ON WEB BROWSER

html list start tag

Conclusion

Now you understand the basics of HTML LISTS and you are really doing great. Lets move on to the next tutorial on   HTML TEXT LINKS

Leave a Reply

Your email address will not be published. Required fields are marked *