Breaking News
Home / Lists in Html / What Are Lists in Html? How to Create These Lists Using Tags

What Are Lists in Html? How to Create These Lists Using Tags

Sometimes we want to right something in particular order such as in bullets form or giving numbers to each one. So using html list we write group related information together. In these days we have no time to read too much thick content same like readers feel not well when you present such kind of content having big paragraphs.

Lists are the best as for as structural point of view is concerned as they help to create a well-structured, more accessible, easy-to-maintain document. They are also useful for a purely practical reason — they give you extra elements to attach CSS styles too, for a whole variety of styling using CSS.

Types of list:

There are three types of list that are formally used in Web Pages

Un-Ordered List:

It is used to list items using plain bullets, no in particular order.

Ordered Lists:

It is used to  list items using your defined scheme, no in particular order, in a specific order.

Description List:

It is used to arrange your item with your specific particular scheme and also using description of your items in particular manner.

 

Un-Ordered List:

In this type of list bulleted are only used for items in any order, as an example a list of compulsory books as

  • Urdu
  • English
  • Pakstudies
  • Islamiat

In following code <ul> declares the unordered list and <li> describes specific item in a list, try following code for it

Code Example :

 

 

ORDERED LISTS:

It is used to display such kind of list of items that are required to be placed in a particular order.

An example would be preparing tea instructions, which must be completed in a specific order

  1. Put tea leaves in a pot
  2. Boil water
  3. Add water to pot
  4. Wait for five minutes
  5. Pour tea into cup

 

 

Following code will be used for this one, very little change has been done <ol> tag in the place of <ul> to produce above result.

Code  Example:

 

 

 

In ordered list we can use other schemes by using attribute as you can use type attribute for <ul> tag to specify the type of bullet you like.

Following are the possible options:

 

 

Now we use them all in a single code you may use what you like:

Code Example:

 

In ordered list “start” attribute can be used to define your begging point as under

<ol type=”1″ start=”3″>    ——first value will be 3 to onward

<ol type=”i” start=”6″>    ——first value will be vi to onward

<ol type=”a” start=”5″>    —– Letters starts with e.

 

 

 

Description List:

It define name and its value within the list, it means when you write a part items n your list you can define your item in description tag. Consider well under example ,

 

Pakistan Cricket Team:

Sarfraz Ahmed

— captain & wicketkeeper Batsman

Muhammad Hafeez

— Vice captain & Middle Order Batsman

Junaid Khan

–Left hand fast bowler

Yasir Shah

–Right hand Leg spin bowler

 

 

In the above list you can see how player’s names and & their role is defined using very simple list. This is done in webpage by using description lists tags

Example:

 

In this code

<dl> : It declare to the on your webpage description list

<dt>: It is the  description title, name of your item

<dd>:  Description data, it is your actual description of an item

 

Nested List:

List within a list is called nested list, actually it is useful for things like tables of contents, such as the one at the start of this article:

1.   Chapter One

                    1. Section One

                    2. Section Two

                       3. Section Three

 2.  Chapter Two

      3.  Chapter Three

 

The key to nesting lists is to remember that the nested list should relate to one specific list item. To reflect that in the code, the nested list is contained inside that list item. The code for the list above looks something like this:

 

Try these codes, if you have any question related to this post must tell us in comment section

Check Also

How to Add Graphic OR Embed Video In HTML Web Page

Graphics are very important component of a webpage. It defines more clearly to your topic, …

<