MyBlogHelp– A Blog for Digital Marketing, Affiliate Marketing, Organic Lead Generation.
  • Home
  • About
  • Contact
  • Privacy
  • Sitemap
  • BLOG
  • AFFILIATE MARKETING
    • LeadsArk
  • MORE
    • MAKE MONEY
      • ONLINE BUSINESS
      • ADSENSE
      • AFFILIATE MARKETING
    • BLOGGING
      • SEO
      • BlogSpot
      • WORPRESS
      • GOOGLE
      • COMPUTER TIPS
    • WEB DESIGN
      • HTML
      • CSS
      • BOOTSTRAP
      • JAVASCRIPT
      • JQUERY
    • WEB DESIGN
      • HTML
      • CSS
      • BOOTSTRAP
      • JAVASCRIPT
      • JQUERY
    • WEB DEVELOPMENT
      • PHP
      • WORDPRESS
  • DOWNLOADS
    • Blogger Template
    • Wordpress Theme
    • PDF

Wednesday, December 5, 2018

How to use Lists in HTML?

 MyBlogHelp     December 05, 2018     html     5 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?             


  • Share This:  
  •  Facebook
  •  Twitter
  •  Stumble
  •  Digg
Newer Post Older Post Home

5 comments:

  1. velrajApril 22, 2019 at 2:57 PM

    This is an interesting blog that you have posted,Good job.
    Html5 Training in Chennai
    Html5 Training Institutes in Chennai
    Html5 Training in Porur
    DOT NET Training in Chennai
    .Net training in chennai
    QTP Training in Chennai
    LoadRunner Training in Chennai
    Html5 Training in Chennai

    ReplyDelete
    Replies
      Reply
  2. Anjali VinuSeptember 14, 2019 at 5:30 PM

    Fabulous post admin, hats off to your creativity. I got lots of information here.
    Web Designing Course in chennai
    web designing training in chennai
    Web Designing Institute in Chennai
    Ethical Hacking Training in Chennai
    PHP Training in Chennai
    Angular 6 Training in Chennai
    Web Designing Course in Porur
    Web Designing Course in Tambaram
    Web Designing Course in Adyar

    ReplyDelete
    Replies
      Reply
  3. Banu RaviSeptember 27, 2019 at 4:37 PM

    Great blog, I was searching this for a while. Do post more like this.
    AngularJS Training in Chennai
    Angular 4 Training in Chennai
    Angular 5 Training in Chennai
    Angular Training in Chennai
    ReactJS Training in Chennai
    PHP course in Chennai
    Web Designing Training in Chennai
    AngularJS Training in Anna Nagar
    AngularJS Training in Vadapalani
    AngularJS Training in Velachery

    ReplyDelete
    Replies
      Reply
  4. sasiMarch 4, 2020 at 6:15 PM

    I really enjoyed this article. I need more information to learn so kindly update it.
    Salesforce Training in Chennai
    salesforce training in bangalore
    Salesforce Course in bangalore
    best salesforce training in bangalore
    salesforce institute in bangalore
    salesforce developer training in bangalore
    Big Data Course in Coimbatore
    Python Training in Bangalore
    salesforce training in marathahalli
    salesforce institutes in marathahalli

    ReplyDelete
    Replies
      Reply
  5. jamunaMarch 30, 2020 at 11:37 AM

    Thanks for updating this information. Good job.
    German Classes in Chennai
    German Language Classes in Chennai
    French Classes in Chennai
    pearson vue test center in chennai
    Informatica Training in Chennai
    ielts centre in chennai
    best english coaching in chennai
    chennai spoken english classes
    Data Analytics Courses in Chennai
    spanish language in chennai
    content writing training in chennai
    spanish language course in chennai
    German Classes in T Nagar
    German Classes in Anna Nagar

    ReplyDelete
    Replies
      Reply
Add comment
Load more...

Thank you for reading this post. Please do not enter any spam link in the comment box.

Followers

Blog Archive

  • ►  2020 (4)
    • ►  October (1)
    • ►  September (1)
    • ►  August (2)
  • ►  2019 (52)
    • ►  December (1)
    • ►  November (2)
    • ►  October (1)
    • ►  August (1)
    • ►  July (1)
    • ►  May (11)
    • ►  April (10)
    • ►  March (6)
    • ►  February (3)
    • ►  January (16)
  • ▼  2018 (54)
    • ▼  December (27)
      • How to use html5 nav tag?
      • How to install Google Fonts on your Blogger Blog?
      • How to use section tag in html5?
      • How to use meter tag in html5?
      • How to use time tag in html5?
      • How to use header tag in HTML5?
      • How to use figure tag in html5?
      • How to use aside tag in html5?
      • How to use details Tag in HTML5?
      • How to use wbr tag in html5?
      • How to use article tag in HTML 5 ?
      • How to use menu tag in html?
      • How to use base tag in HTML?
      • How to use HTML hr and br Tag?
      • How to use HTML address tag?
      • How to use HTML Meta Tags?
      • How to use HTML script & noscript Tag?
      • How to use DOCTYPE declaration in HTML?
      • How to use Form Tag in HTML?
      • How to use Block and Inline Tags in HTML?
      • How to use Lists in HTML?
      • How to use Image Tag in HTML?
      • How to use Table Tag in HTML?
      • How to use anchor Tag in HTML?
      • How to Format & Style in HTML?
      • How to use Heading in HTML?
      • What is Attribute in HTML?
    • ►  November (5)
    • ►  May (5)
    • ►  April (4)
    • ►  February (3)
    • ►  January (10)
  • ►  2017 (17)
    • ►  December (9)
    • ►  November (8)

Popular Posts

  • How to use the main tag in html5?
  • How to use keygen tag in html5?
  • How to use html5 mark tag to highlight text?
  • How to start Online Business without money from home?
  • What is a search engine?

Contact Us

Name

Email *

Message *

About MyBlogHelp

Most of the posts, we share on this blog related to Affiliate Marketing, Organic Lead Generation, Digital Marketing, Social Media Marketing, Make Money Online, SEO, and web design.

Featured Post

LeadArk - Affiliate Marketing | Qualified Organic Lead Generation | LeadsArk Review

Copyright © MyBlogHelp– A Blog for Digital Marketing, Affiliate Marketing, Organic Lead Generation.
Design by Md. Abdussamad | MyBlogHelp.com