Hey guys!! Welcome to flower brackets blog. In this post we are going to check out an example of unordered lists in html.
This web page is actually pretty similar to the web page that we created in the previous post for ordered lists.
Example : unordered lists in html
So I have an html document,
<!DOCTYPE html> <html> <head> <title>Unordered Lists In Html</title> </head> <body> <center><h2>Ex : Unordered Lists</h2></center> <ul> <li>AppleIphone</li> <li>LG</li> <li>Samsung</li> <li>OnePlus</li> <li>HTC</li> </ul> </body> </html>
In the body section I have the center tag and the <h2> tag and the text “Ex : Unordered Lists” and I have closed the <h2> tag and center tag in the set order.
You know <h2> tag is going to be the heading of the page. Then I have the <ul> element opening tag and “ul” is a short form for unordered list.
Now unordered list firstly is a list that does not follow an observable sequence.
Also Read – Learn Ordered Lists In Html
Right, so if suppose you are listing things that cannot be arranged in a particular order or you know do not have to be necessarily put into some specific order.
Then you would probably want to use an unordered list. Like, let’s say someone asks you ok name the top five smartphones in the world.
And you just want to list them and you don’t have to necessarily mention Samsung before OnePlus or Apple Iphone before LG.
You could mention them in any order as long as you mention all of them. It’s fine.
That is, you know the application area where you would want to use unordered list.
And rest of the syntax is pretty similar to ordered list. You have the opening <li> tag and the closing <li> tag.
In between that you have your item. So let’s say I want to mention Apple Iphone first for so, I will have the opening <li> tag and closing <li> tag.
In between that I have Apple Iphone and then so on and so forth I have LG, Samsung, OnePlus & HTC.
I will save the file and let’s see it in google chrome
And this is how it looks. Now at the moment I see normal dots or disks or you know the conventional bullets being used as the word for the list items.
If suppose you want to change above to you know square bullets then that’s also possible.
All you have to do is go to your <ul> element and give a space and type “type” and equal to symbol and inside double quotes “square”.
This is an attribute that we used with the <ol> element. Here “square” is the value to the attribute.
Save the file
<!DOCTYPE html> <html> <head> <title>Unordered Lists In Html</title> </head> <body> <center><h2>Ex : Unordered Lists</h2></center> <ul type = "square"> <li>AppleIphone</li> <li>LG</li> <li>Samsung</li> <li>OnePlus</li> <li>HTC</li> </ul> </body> </html>
and refresh the page in google chrome
I see that the bullets have now been changed to square bullets. And if suppose you want to use hollow circles then that’s also possible.
You type in circle like this,
<ul type = "circle">
Save the file again and go back and refresh the page.
And there we go we see hollow circles. If you want to change it back to default mode you could either set the type to disk and save the file.
Or you could remove the type attribute completely. You know it does not have to be there.
Without it also it would show you the default setting.
So anyway this is all about unordered list in html. I assume you guys have understood the concept and found this post informative and interesting.
You may subscribe to my blog flower brackets and share this post across social networks.