1 Star2 Stars3 Stars4 Stars5 Stars (13 votes, average: 5.00 out of 5)

Ordered Lists and Unordered List Absolute Beginner Web Development

We user ordered lists and unordered lists all the time when developing websites. In fact you would be hard pressed to find a webpage on the internet that does not have some type of list items on it. It is very common to use and this is how you use it.

Tip: Click on images to make them larger. If you find anything wrong on this page or need further assistance please comment below or contact me. 🙂

Ordered List Items

For ordered list items we strt off with the tag of ol. It is written like this <ol></ol>. This is what will cause the ordered list to have numbers in it.

  1. One
  2. Two
  3. Three

You do have to write list item tags when using the ordered list. Here is an example on how to do that.

Subscribe To My YouTube Channel:
<ol>
<li>One</li> 	
<li>Two</li> 	
<li>Three</li>
</ol>

Unordered List Items

Sometimes we just need a bullet list. For that we will use the tag <ul></ul>. This will cause the list to have bullets in it.

  • Bullet
  • Bullet
  • Bullet

We combine this with the list item tag to accomplish this objective. Here is an example.

<ul>
 	
<li>Bullet</li>
<li>Bullet</li>
<li>Bullet</li>
</ul>

Exceptions For List Items

Keep in mind that the CSS can control the way a list item looks. So if your list items do not look like this then you may want to check your style-sheet.

Code for Today’s Lesson

<html>
<head>
<title>All about list items</title>
</head>
<body>
<h2>Order List</h2>
OL : This is an order list. It will created numbers in a list.
<ol>
<li>One</li>	
<li>Two</li>	
<li>Three</li>
</ol>
<h2>Unordered List</h2>
UL is for Unordered list. It will create a buillet list item structure. 
<ul>	
<li>Bullet</li>	
<li>Bullet</li>	
<li>Bullet</li>
</ul>

</body>
</html>

Next Lesson

Ordered Lists and Unordered List Absolute Beginner Web Development was last modified: June 18th, 2017 by Maximus Mccullough

Please like, share and subscribe.

Advanced Programming Made Easy

I hope you enjoyed the article. If I was able to help you please consider a tip for the content.

One Time Tip

more tips

Reoccuring Tips

Tips

Cool People Share:
ordered-list-unordered-list-beginner-web-development

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.