Wednesday, December 5, 2018

How to use Lists in HTML?

                No comments   

HTML Lists

          You can represent any information through the lists in HTML.  HTML list make your webpage in well-formed look. There are three types of the list in HTML. These are an ordered list, unordered list, description list and nested list is nothing but list inside a list. In the web designing and development, lists play the vital role, basically creating menu or navigation bar.

 There are some terms, you should have to know.

 <ul>:- It is used for the unordered list.
<ol>:- It is used for the ordered list.
<li>:- It is used for list item.
<dl>:- It is used for description list.
<dt>:- It is used for the term in the description list.
<dd>:- It is used to describe the term in a description list.
type:- This an attribute which is used to define item serial number.
start:- This an attribute which is used to define start point. 

Ordered-Lists

This list is in the order form. You can order such a list in many ways, such as numbers (1, 2, 3, 4), small Roman numbers (I, ii, iii, iv), capital Roman (I, II, III, IV) small alphabets (a, b, c, d), capital alphabets (A, B, C, D) etc. This type of list you can create by using <ol> tag.

    Example of Ordered Lists

You use the <ol> tag to create the ordered list as I told you earlier. After this tag, you define the list item to use <li> tag. This tag is also used in the unordered list. An example of this is being given below.

The above script will generate the given web page.


order-list


Attribute

Attribute type in the ordered lists

You can also use the type attribute with the Ordered List. By Type Attribute, you tell how you want to order the list. Like if you want a list of numbers, then you define the value of type attribute 1. Apart from this, if you want to list in alphabet order, the value of the type attribute will be a. You can also define the list with roman letters, for this, you give the value I of the type attribute. 
type="1“ --> start numbering with numbers (default)
type="A“ --> start numbering with uppercase (capital) letters
type="a“ --> start numbering with lowercase (small)  letters
type="I“ --> start numbering with uppercase (capital) roman numbers
type="i“  --> start numbering with lowercase (small) roman numbers

 Attribute start in the ordered lists

         This an attribute which is used to define start point from where item serial number will continue.
Start=“20” à By default, an ordered list will start counting from 1. If you want to start counting from a specified number, you can use the start attribute.

 <ol type=“1” start=“20”>
    <li>Book</li>
              <li>Copy</li>
              <li>Pen</li>
           </ol>

 Output:-           20 Book
                21 Copy
                22 Pen



 Now you can use the below code and try to get the output using both attribute type and start.

The above script will generate the given web page.


type-attribute

Unordered-Lists

This type of list is in unordered form. Items like this list are represented with bullets, circle and squire etc. This type of list you can create by using <ul> tag.

 Attribute type unordered lists
Disc --> Sets bullet (default)
Circle --> Sets circle
Square --> Sets square

None --> The list items will not be marked

    Example of Unordered Lists

You use the <ul> tag to create an unordered list. After this tag <li> tag item list is defined. In this type of list, 3 types of type attribute can be given.
With disc, circle and square values, you can create different types of unordered lists. An example is given below.

The above script will generate the given web page.


unordered-list

Description Lists

In the Description list first, you define a list item and then provide its definition. This type of list you can create by using <dl> tag. The <dt> tag is used to declare list item and <dd> tag for its definition.

Example of Description Lists

By definition Definition lists you provide a definition of a term. To create Definition lists, you use <dl>, <dt> and <dd> tags. An example is given below.

The above script will generate the given web page.


definition-list

Nested Ordered Lists

            List under list is called nested list. It can be defined for each list ordered list, unordered list and definition list accordingly. You can see in the below example. Inside Tea, there are two items Black tea and Green tea.
<ul>
    <li>Coffee</li>
    <li>Tea
            <ul>
<li>Black Tea</li>
                  <li>Green Tea</li>
     </ul>
     </li>
     <li>Milk</li>
</ul>


For your practice, you can use the below code.


The above script will generate the web page as below.


ordered-nested-list

Nested Unordered Lists

                This is the same as nested ordered lists only you have to replace <0l> into <ul>.  


The above script will generate the given web page.


unordered-neststed-list

Nested Description Lists

This is the also description list inside the description list.


The above script will generate the given web page.


definition-nested-list
Hopefully, this "HTML Tutorial - Lists” would be helpful for you. If it's so please help your friends and other bloggers to share this post on social media. If you have any question related to the post, please comment on the comment box and also follow this website for more information about the blogging and SEO tips. 

Previous:- Img tag in HTML?           Next:- Block & Inline tag in HTML?             


0 comments:

Post a Comment

Thank you for reading the post.

About MyBlogHelp

Most of the post, we share on this blog related to SEO, Blogging, BlogSpot(Blogger), Wordpress, Online Business, Online Make Money, Online Earnings, Training tutorials such as HTML, CSS, Bootstrap, JavaScript, PHP, and Computer Tips.

Featured Post

How to use keygen tag in html5?

Follow by Email