PROVIDING ACCURATE, RELIABLE AND STRAIGHT TO THE POINT KNOWLEDGE ABOUT DIFFERENT IT TOOLS EXPLAINED WITH PRACTICAL EXAMPLES

PREVIOUS ARTICLE
NEXT ARTICLE

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
We will discuss every type with examples and try to understand them.
The ORDERED LIST of HTML has been already discussed here in full details. Click anywhere on this line.

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.
*The list used in this text is showing bullets i.e. unordered list.

html-UNordered list example

Let us make an UNordered list.

STEPS:

  1. Open the NOTEPAD.
  2. COPY OR TYPE the following code for the ordered list.
  3. 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:

  1. Plug in the TV.
  2. Take out the remote.
  3. Press standby button on remote and the tv will turn on.
*The above list is ordered one as the numbering is present, but we will make unordered list.

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

unrodered list code
CODE-UNORDERED LIST IN HTML
gyankosh.net html tutorial
unordered list output
OUTPUT-UNORDERED LIST IN 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:

The STYLE  is used to set the attributes(property).
The type of bullet can be set by the use of above mentioned TAG FORMAT.
Just put the desired bullet type in the above written tag in place of “PROPERTY AS DESIRED”.
The available options are :
  • disc
  • circle
  • square
  • none
 THE FOLLOWING EXAMPLE SHOWS THE DEMONSTRATION.

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>

UNORDERED LIST CODE
CODE: UNORDERED LIST TYPE SETTING
gyankosh.net html tutorial
UNORDERED LIST OUTPUT
OUTPUT:UNORDERED LIST OUTPUT
DESCRIPTION OF EXAMPLE:
The example code starts with the standard tags.
The list shows the type of bullets present in HTML.
There are four different lines where the type changes and shown in output picture.

 

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>

UNORDERED LIST EXAMPLE CODE
CODE:UNORDERED LIST POSITION EXAMPLE
gyankosh.net html tutorial
OUTPUT:UNORDERED LIST POSITION EXAMPLE

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>

CODE:CUSTOM BULLET UNORDERED LIST
gyankosh.net html tutorial
gyankosh custom bulletoutput
OUTPUT:CUSTOM BULLET UNORDERED LIST

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

PREVIOUS ARTICLE
NEXT ARTICLE

LEARN

  • EXCEL
  • HTML
  • JAVASCRIPT
  • MORE TO COME…

Encourage us by following at …

Facebook Twitter Pinterest

If you have any queries or suggestions or any problem which you would like us to solve for you, kindly mail at

gyankosh060309@gmail.com

Pin It on Pinterest

Share This

KINDLY SPEND FEW SECONDS HERE....

%d bloggers like this: