Ticker

20/recent/ticker-posts

Advertisement

HTML Lists

HTML Lists with Examples

Lists are an important part of hypertext markup language (HTML). The grouping of related parts of data so that they are associated with each other is done by lists. Using lists can make you read the information easily. In the present development of the web, lists represent the elements that are utilized to navigate as the normal content.

The lists are best from the point of view structurally. As they clearly make a well-designed, available, and simple to maintain document. They are also utilized as they create the elements that are specialized and can attach styles of CSS. The lists also help the guest visiting your website. Because they try to manage when your web pages are required to be upgraded. There are three kinds of lists. We will discuss this here.

 


1.      Unordered list –

The unordered list is utilized to group related items set without any order. You can place the particular item lists in any order there is no specific order for it. For example, see the list of shopping

 Bread

·       Milk

·       Butter

·       Cheese

·       Paneer

·       Ice cream

Again you can place this list in any order in an unordered list, still make sense.

Milk

·       Paneer

·       Butter

·       Cheese

·       Ice cream

·       Bread

Let’s see an example of unordered lists in using HTML code

<ul>

<li>bread</li>

<li>butter</li>

<li>milk</li>

<li>paneer</li>

</ul>

Output –

 Bread

·       Butter

·       Milk

·       Paneer

        Ordered lists -

      It is utilized to group the related items set in a particular order. You cannot place items in an ordered list in any order. If you do it, it doesn’t make any sense. So a particular order is required in ordered lists coding. You can show ordered lists in any options of sequencing.

Let’s see the example of an ordered list

<ol>

<li>mix the egg</li>

<li>put a pan on the stove</li>

<li>pour egg mixture on the pan</li>

<li>let it cook</li>

<li>your omelet is ready</li>

</ol>

Output -

1.mix the egg

2.put a pan on the stove

3.pour the egg mixture on the pan

4.let it cook

5.your omelet is ready

 Description lists –

It is the list that associates particular values and names within the list. This list is claimed to be flexible. So, you can associate the data with more than one value with one name.

In description lists, you are going to utilize tags <>dl</dl> here the tags are present in one or more groups of other tags <dt></dt> which represents name and <dd></dd> tags which represents the value.

For example

<dl>

  <dt>Name</dt>

  <dd>Value</dd>

  <dt>Name</dt>

  <dd>Value</dd>

  <dt>Name</dt>

  <dd>Value</dd>

</dl>

Output –

Name

 Value

Name

 Value

Name

 Value

Thus, these are the three types of lists you should understand while you are learning HTML programming language.

Read some more articles here:

 

 



Post a Comment

0 Comments