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