html - lists

 What is LISTS ?

A list is a record of short pieces of information, such as people's names, usually written or printed with a single thing on each line and ordered in a way that makes a particular thing easy to find. For example,  

  • A shopping list.
  • A to-do lost.
LISTS IN HTML

HTML offers three ways for specifying lists of information. All lists must contain one or more list
elements.

The types of lists that can be used in HTML are :

  • ul : An unordered list. This will list items using plain bullets.
  • ol : An ordered list. This will use different schemes of numbers to list your items.
  • dl : A definition list. This arranges your items in the same way as they are arranged in a dictionary.

The Unordered HTML List


An unordered list starts with the “ul” tag. Each list item starts with the “li” tag.The list items are marked with bullets i.e small black circles by default.

<!DOCTYPE html> 
<html> 
<body> 

<h2>Grocery list</h2> 

<ul> 
<li>Bread</li> 
<li>Eggs</li> 
<li>Milk</li> 
<li>Coffee</li> 
</ul> 

</body> 
</html> 

Output:



The HTML Unordered List has various List Item Markers:-

    1. Disc : Sets the list item marker to a bullet i.e default.

    <!DOCTYPE html> 
    <html> 
    <body> 
    <h2>Unordered List with Disc Bullets</h2> 
    <h2>Grocery List</h2> 
    <ul style="list-style-type:disc"> 
    <li>Bread</li> 
    <li>Eggs</li> 
    <li>Milk</li> 
    <li>Coffee</li> 
    </ul> 
    </body> 
    </html> 

    Output:




    2. Circle : Sets the list item marker to a circle. 

    <!DOCTYPE html> 
    <html> 
    <body> 
    <h2>Unordered List with Circle Bullets</h2> 
    <h2>Grocery list</h2> 
    <ul style="list-style-type:circle"> 
    <li>Bread</li> 
    <li>Eggs</li> 
    <li>Milk</li> 
    <li>Coffee</li> 
    </ul> 
    </body> 
    </html> 

    Output:


    3. Square : Sets the list item marker to a square.

    <!DOCTYPE html> 
    <html> 
    <body> 

    <h2>Unordered List with Square Bullets</h2> 

    <h2>Grocery list</h2> 

    <ul style="list-style-type:square"> 
    <li>Bread</li> 
    <li>Eggs</li> 
    <li>Milk</li> 
    <li>Coffee</li> 
    </ul> 

    </body> 
    </html> 

    Output:



    The HTML Ordered List

    An ordered list starts with the “ol” tag. Each list item starts with the “li” tag. The list items are marked with numbers by default.
    Example:

    <!DOCTYPE html> 
    <html> 
    <body> 

    <h2>Grocery List</h2> 

    <ol> 
    <li>Bread</li> 
    <li>Eggs</li> 
    <li>Milk</li> 
    <li>Coffee</li> 
    </ol> 

    </body> 
    </html> 

    Output:



    The HTML Ordered List has various List Item Markers:

    The type attribute of the <ol> tag, defines the type of the list item marker.

    1. Type=”1″ : The list items will be numbered with numbers i.e default.
    <!DOCTYPE html> 
    <html> 
    <body> 

    <h2>Ordered List with Numbers</h2> 

    <ol type="1"> 
    <li>Bread</li> 
    <li>Eggs</li> 
    <li>Milk</li> 
    <li>Coffee</li> 
    </ol> 

    </body> 
    </html> 

    Output:



    2. Type=”A” : The list items will be numbered with uppercase letters.

    <!DOCTYPE html> 
    <html> 
    <body> 

    <h2>Ordered List with Letters</h2> 

    <ol type="A"> 
    <li>Bread</li> 
    <li>Eggs</li> 
    <li>Milk</li> 
    <li>Coffee</li> 
    </ol> 

    </body> 
    </html> 

    Output: 




    3. Type=”a” : The list items will be numbered with lowercase letters.

    <!DOCTYPE html> 
    <html> 
    <body> 

    <h2>Ordered List with Lowercase Letters</h2> 

    <ol type="a"> 
    <li>Bread</li> 
    <li>Eggs</li> 
    <li>Milk</li> 
    <li>Coffee</li> 
    </ol> 

    </body> 
    </html> 

    Output:


    4. Type="I": The list items will be numbered with uppercase roman numbers.

    <!DOCTYPE html> 
    <html> 
    <body> 

    <h2>Ordered List with Roman Numbers</h2> 

    <ol type="I"> 
    <li>Bread</li> 
    <li>Eggs</li> 
    <li>Milk</li> 
    <li>Coffee</li> 
    </ol> 

    </body> 
    </html> 

    Output: 







    5. Type="i":     The list items will be numbered with lowercase roman numbers.

    <!DOCTYPE html> 
    <html> 
    <body> 

    <h2>Ordered List with Lowercase Roman Numbers</h2> 

    <ol type="i"> 
    <li>Bread</li> 
    <li>Eggs</li> 
    <li>Milk</li> 
    <li>Coffee</li> 
    </ol> 

    </body> 
    </html> 

    Output: 


    The HTML Description List

    A description list is a list of terms, with a description of each term.
    The <dl> tag defines the description list, the <dt> tag defines the term name, and the <dd> tag describes each term.
    Example:

    <!DOCTYPE html> 
    <html> 
    <body> 

    <h2>A Description List</h2> 

    <dl> 
    <dt>Coffee</dt> 
    <dd>- 500 gms</dd> 
    <dt>Milk</dt> 
    <dd>- 1 ltr Tetra Pack</dd> 
    </dl> 

    </body> 
    </html> 

    Output: 



    Nested List in HTML:

    A nested list is a list which has a list inside a list.

    <!DOCTYPE html> 

    <html> 

    <body> 

    <h2>A Nested List</h2> 

    <ul> 

    <li>Coffee</li> 

    <li>Tea 

    <ul> 

    <li>Black tea</li> 

    <li>Green tea</li> 

    </ul> 

    </li> 

    <li>Milk</li> 

    </ul> 

    </body> 

    </html> 


    Output:


    Comments

    Post a Comment

    Popular posts from this blog

    HTML Images

    Image
     HTML IMAGE:-    HTML img  tag is used to display image on the web page. HTML img tag is an empty tag that contains attributes only, closing tags are not used in HTML image element. Let's see an example of HTML image. < h2 > HTML Image Example </ h2 >    < img   src = "good_morning.jpg"   alt = "Good Morning Friends" />   Attributes of HTML tags:- The src and alt are the two most important attributes of HTML image tag are given below-: (1)  ALT-:  The alt attribute defines an alternate text for the image, that can be displayed. The value of the alt attribute describes the image in words. The alt attribute is considered good for SEO prospective. (2)  SRC-: It is a necessary attribute that describes the source or path of the image. It instructs the browser where to look for the image on the server. The location of the image may be on the same directory or another service. There are two ways...
    Read more

    Html - Text Links, Image Links, E-mail Links

    Image
      HTML - TEXT LINKS   A webpage can contain various links that take you directly to other pages and even specific parts of a given page. These links are known as hyperlinks. Hyperlinks allow visitors to navigate between Web sites by clicking on words, phrases, and images. Thus you can create hyperlinks using text or images available on a webpage. Linking Documents A link is specified using HTML tag <a>. This tag is called  anchor tag  and anything between the opening <a> tag and the closing </a> tag becomes part of the link and a user can click that part to reach to the linked document. Following is the simple syntax to use <a> tag. <a href = "Document URL" ... attributes-list>Link Text</a> The target Attribute We have used  target  attribute in our previous example. This attribute is used to specify the location where linked document is opened. Following are the possible options − Sr.No Option & Description 1 _blank ...
    Read more

    Html - Tables

    Image
     A table is an arrangement of data in rows and columns, or possibly in more complex structure.Tables are widely used in communication, research, and data analysis. Tables are useful for various tasks such as presenting text information and numerical data. Table can be used to compare two or more items in tabular form layout. Tables are used to create databases. Defining Tables In HTML An HTML table is defined with the "table" tag. Each table row is defined with "tr" tag. A table is defined with the "th" tag. By default tables heading are bolt and centered. A table data/cell  is defined with the "td" tag.  <!DOCTYPE html>  <html>  <body>  <table style="width:100%">  <tr>  <th>Firstname</th>  <th>Lastname</th>  <th>Age</th>  </tr>  <tr>  <td>Priya</td>  <td>Sharma</td>  <td...
    Read more