HTML TUTORIAL

How To Insert LIST In Web Document Using HTML

HTML LIST
Written by ikenna

In this tutorial, we will be explaining how you can insert list in a web document using HTML. In our previous tutorial, we looked at HTML tables and we explained how you can easily structure and adjust tables on HTML documents. If you haven’t gone through the tutorial, you can do so using the link below

PREVIOUS TUTORIAL: How To Insert Tables In Web Document Using HTML

Introduction to HTML list and how to insert them on web documents

HTML list are list inserted on web documents using HTML. Sometimes there might be reasons why you need to have list on your web document and HTML allows us to simply implement this using some HTML list structures as shown below

There are three types of list that can be added to HTML web documents and they include:

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

The unordered List

The unordered list are list that are without a specified order. An unordered list is created by using the list tags (<li> &</li>) in between the unordered list tags (<ul> &</ul>) as shown below.. Example shown below

<!DOCTYPE html>
<html>

   <head>
      <title>Using list on Web Document</title>
   </head>
	
   <body>
      <ul>
         <li> typescript</li>
         <li>css</li>
         <li>java</li>
         <li>themustfeed</li>

      </ul>
   
   </body>
	
</html>

RESULT ON WEB BROWSER

Using list on Web Document
  • typescript
  • css
  • java
  • themustfeed

The above list was structured using the disk bullet with the help of HTML. we can easily change this to circle bullet, square bullet or dick bullet using the bullet HTML attribute as shown below

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

For square bullet

example shown below

<!DOCTYPE html>
<html>

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


      </ul>
   </body>
	
</html>

For disk bullet

<!DOCTYPE html>
<html>

   <head>
      <title>Using external Image on Web Document</title>
   </head>
	
   <body>
      <ul type="disk">
         <li> typescript</li>
         <li>css</li>
         <li>java</li>
         <li>themustfeed</li>


      </ul>
   </body>
	
</html>

For circle bullet

<!DOCTYPE html>
<html>

   <head>
      <title>Using external Image on Web Document</title>
   </head>
	
   <body>
      <ul type="circle">
         <li> typescript</li>
         <li>css</li>
         <li>java</li>
         <li>themustfeed</li>


      </ul>
   </body>
	
</html>

ORDERED LIST

The ordered list in HTML are list placed in and ordered manner, either in an ascending or descending order. Example shown below

<!DOCTYPE html>
<html>

   <head>
      <title>Using external Image on Web Document</title>
   </head>
	
   <body>
      <ol type="circle">
         <li> html</li>
         <li>css</li>
         <li>java</li>
         

      </ol>
   </body>
	
</html>

RESULT ON WEB BROWSER

Conclusion

In the above tutorial, we explained the basic method of inserting list into the web document using HTML. if you have questions, kindly let us know using the comment section below

NEXT TUTORIAL: HTML TEXT LINKS

About the author

ikenna

Leave a Comment