
PROVIDING ACCURATE, RELIABLE AND STRAIGHT TO THE POINT KNOWLEDGE ABOUT DIFFERENT IT TOOLS EXPLAINED WITH PRACTICAL EXAMPLES
- CONTENTS
- INTRODUCTION
- GENERAL FORMAT OF LIST ELEMENT
- TYPES OF LISTS
- WHAT IS UNORDERED LIST
- UNORDERED LIST EXAMPLE
- CHOOSING TYPES OF BULLETS
- TAG FOR CHOOSING BULLETS
- EXAMPLE FOR SETTING BULLETS
- CUSTOM POSITIONING OF BULLETS
- EXAMPLE OF CUSTOM POSITIONING OF BULLETS
- SETTING CUSTOM BULLET
- EXAMPLE OF SETTING CUSTOM BULLETS
HTML-LISTS-unordered list
If we go by the definition of a LIST, its a set of the items which belong to the same group or class.
Same is the case with the LISTS in HTML.
If you remember the history of the HTML, it was developed for Research AND Educational work, so LISTS AND TABLES were part of HTML from very beginning.
HTML-GENERAL FORMAT OF LIST ELEMENT
The LIST TAG is used to tell the browser that the following text is to be represented as LISTS. Although there are three types of lists present, the format for this element is almost similar to all the three types. Here is the format.
<TAG OF TYPE OF LIST>
<LI> ITEM DESCRIPTION </LI>
.
.
.
.
</TAG OF TYPE OF LIST>
This is the standard format of using any list.
DO YOU KNOW ????
HTML 5 IS THE LATEST HTML VERSION WHICH IS BEING FOLLOWED IN THIS TUTORIAL.
HTML-TYPES OF LISTS
There are mainly THREE TYPES OF LISTS in HTML.
- ORDERED LIST
- UNORDERED LIST
- DEFINITION LIST
html-what is UNordered list?
As the name itself is self explanatory, it is unordered one. We don’t have any kind of numbering in front of the UNORDERED LISTS. So unordered list is the one which
- is not preceded by any number, a roman numeral or an alphabet to show that show any sequence or precedence but just by any bullet which shows equal importance to all the constituents of the list.
html-UNordered list example
Let us make an UNordered list.
STEPS:
- Open the NOTEPAD.
- COPY OR TYPE the following code for the ordered list.
- The explanation follows after the pictorial description.
SCENARIO: Let us make a list of steps to switch on the tv.
To accomplish this target, we have to do the following steps.
STEPS:
- Plug in the TV.
- Take out the remote.
- Press standby button on remote and the tv will turn on.
<!doctype html5>
<html>
<head>
<title>Example Ordered List</title>
</head>
<body>
<ul>
<li>
Plug in the TV.
</li>
<li>
Take out the remote.
</li>
<li>
Press standby button on remote and the tv will turn on.
</li>
</ul>
</body>
</html>

HTML-ATTRIBUTES-CHOOSING TYPE OF BULLETS
There are few attributes which can be used in unordered lists too.
For example types of bullets, fixing the position of bullets inside the margin or outside the margin etc.
In the following code , take a look at the attribute setting in the <OL> tag.(ordered list tag)
THE TAG FORMAT TO SET BULLET TYPE OF UNORDERED LIST
DESCRIPTION OF ATTRIBUTE SETTING TAG:
- disc
- circle
- square
- none
HTML:example of SETTING THE different types of bullets in unordered list
HTML:example code-ready to be copied
<!doctype html5>
<html>
<head>
<title>GYANKOSH UNORDERED LIST</title>
</head>
<body>
<ul style=”list-style-type: circle;”>
<li>
THIS IS CIRCLE TYPE
</li>
</ul>
<ul style=”list-style-type: disc;”>
<li>
THIS IS DISC TYPE
</li>
</ul><ul style=”list-style-type: square;”>
<li>
THIS IS SQUARE TYPE
</li>
</ul><ul style=”list-style-type:none;”>
<li>
THIS IS NONE TYPE
</li>
</ul>
</body>
</html>

HTML:POSITIONING BULLETS INSIDE OR OUTSIDE THE MARGIN
This function allows us to keep the bullets within the list or want to keep the bullets outside the list. Following is the example for the same.
THE TAG FOR SETTING THE INSIDE POSITION OR OUTSIDE POSITION OF THE BULLETS IS:
THE ATTRIBUTE TO SET UNORDERED LIST POSITION
HTML:example for POSITIONING BULLETS INSIDE OR OUTSIDE THE MARGIN
HTML:example code-ready to be copied
<!doctype html5>
<html>
<head>
<title>GYANKOSH UNORDERED LIST</title>
</head>
<body>
<ul style=”list-style-position: inside;”>
<li>
THIS IS INSIDE OF MARGIN POSITION
</li>
</ul>
<ul>
<li>
THIS IS STANDARD/OUTSIDE POSITION
</li>
</ul>
</body>
</html>


HTML:SETTING A CUSTOM BULLET FOR UNORDERED LIST
In unordered list, an option to introduce your self styled bullet is present.
Any image can be made and used as a bullet.
We have created a small icon with a letter “G” and try to put into bullet.
THE TAG ATTRIBUTE TO SET A CUSTOM BULLET
HTML:example for SETTING A CUSTOM BULLET FOR UNORDERED LIST
example code-ready to be copied
<!doctype html5>
<html>
<head>
<title>GYANKOSH UNORDERED LIST</title>
</head>
<body>
<ul style=”list-style-image:url(https://gyankosh.net/wp-content/uploads/2019/12/GYANKOSH_BULLET.jpg);”>
<li>
THIS IS INSIDE OF MARGIN POSITION
</li>
<li>
THIS IS STANDARD/OUTSIDE POSITION
</li>
</ul>
</body>
</html>



OTHER WAYS TO REACH THIS ARTICLE
UNORDERED LIST EXCEL, HOW TO MAKE LIST OF EQUAL WEIGHTAGE, UNORDERED LIST IN EXCEL, HOW TO CHANGE STYLE OF LISTS, USE CUSTOM IMAGE TO SET AS BULLET IN LIST, HTML
YOU MAY LIKE
- HTML-LISTS-ORDERED LIST
- HTML-TEXT FORMATTING TAGS
- html-introduction
- FOR MORE ARTICLES, CLICK EXCEL OR TYPE IN SEARCH BELOW.
LEARN
- EXCEL
- HTML
- JAVASCRIPT
- MORE TO COME…
If you have any queries or suggestions or any problem which you would like us to solve for you, kindly mail at