Tuesday, 7 March 2023

HTML List

 

HTML Lists

HTML Lists are used to specify lists of information. All lists may contain one or more list elements. There are three different types of HTML lists:

  1. Ordered List or Numbered List (ol)
  2. Unordered List or Bulleted List (ul)
  3. Description List or Definition List (dl)

HTML Ordered List or Numbered List

In the ordered HTML lists, all the list items are marked with numbers by default. It is known as numbered list also. The ordered list starts with <ol> tag and the list items start with <li> tag.

HTML Unordered List or Bulleted List

In HTML Unordered list, all the list items are marked with bullets. It is also known as bulleted list also. The Unordered list starts with <ul> tag and list items start with the <li> tag.

HTML Description List or Definition List

HTML Description list is also a list style which is supported by HTML and XHTML. It is also known as definition list where entries are listed like a dictionary or encyclopedia.

The definition list is very appropriate when you want to present glossary, list of terms or other name-value list.

The HTML definition list contains following three tags:

  1. <dl> tag defines the start of the list.
  2. <dt> tag defines a term.
  3. <dd> tag defines the term definition (description).

HTML Nested List

A list within another list is termed as nested list. If you want a bullet list inside a numbered list then such type of list will called as nested list.

Example:
Order List Program:

<html>

                <head>

                                <title>Body and its attribute</title>

                </head>

                <body bgcolor="pink">

                                                   <ol type=1>

                                                       <li>India</li>

                                                                   <li>America</li>

                                                                   <li>France</li>

                                                                   <li>Itly</li>

                                                                   <li>Japan</li>

                                                  </ol>

                                                   <ol type="I">

                                                       <li>India</li>

                                                                   <li>America</li>

                                                                   <li>France</li>

                                                                   <li>Itly</li>

                                                                   <li>Japan</li>

                                                  </ol>

                                                   <ol type="i">

                                                       <li>India</li>

                                                                   <li>America</li>

                                                                   <li>France</li>

                                                                   <li>Itly</li>

                                                                   <li>Japan</li>

                                                  </ol>

                                                  <ol type="A">

                                                       <li>India</li>

                                                                   <li>America</li>

                                                                   <li>France</li>

                                                                   <li>Itly</li>

                                                                   <li>Japan</li>

                                                  </ol>

                                                   <ol type="a">

                                                       <li>India</li>

                                                                   <li>America</li>

                                                                   <li>France</li>

                                                                   <li>Itly</li>

                                                                   <li>Japan</li>

                                                  </ol>

                                                  <ol type="A" start="3">

                                                       <li>India</li>

                                                                   <li>America</li>

                                                                   <li>France</li>

                                                                   <li>Itly</li>

                                                                   <li>Japan</li>

                                                  </ol>

                                 

                </body>

</html>

Unorder List Program:

<html>

                <head>

                                <title>Body and its attribute</title>

                </head>

                <body bgcolor="pink">

                                             <ul>

                                                       <li>India</li>

                                                                   <li>America</li>

                                                                   <li>France</li>

                                                                   <li>Itly</li>

                                                                   <li>Japan</li>

                                                  </ul>

                                                   <ul type="circle">

                                                       <li>India</li>

                                                                   <li>America</li>

                                                                   <li>France</li>

                                                                   <li>Itly</li>

                                                                   <li>Japan</li>

                                                  </ul>

                                            <ul type="disc">

                                                       <li>India</li>

                                                                   <li>America</li>

                                                                   <li>France</li>

                                                                   <li>Itly</li>

                                                                   <li>Japan</li>

                                                  </ul>

                                                 

                                                  <ul type="square">

                                                       <li>India</li>

                                                                   <li>America</li>

                                                                   <li>France</li>

                                                                   <li>Itly</li>

                                                                   <li>Japan</li>

                                                  </ul>

                                              <ul type="none">

                                                       <li>India</li>

                                                                   <li>America</li>

                                                                   <li>France</li>

                                                                   <li>Itly</li>

                                                                   <li>Japan</li>

                                                  </ul>

                 </body>

</html>

Nested List Program:

<html>

                <head>

                                <title>Body and its attribute</title>

                </head>

                <body bgcolor="pink">

                                    <ol>

                                                  <li>India

                                                           <ol>

                                                                  <li>Agra</li>

                                                                    <li>Mumbai</li>

                                                                    <li>Chennai</li>

                                                                    <li>Delhi</li>

                                                           </ol>

                                                  </li>

                                                   <li>America</li>

                                                     <li>France</li>

                                                    <li>Itly</li>

                                                       <li>Japan</li>

                                    </ol>

                             </body>

</html>

Definition List Program:

<html>

                <head>

                                <title>Body and its attribute</title>

                </head>

                <body bgcolor="pink">

            <dl>

                                <dt>Html:-</dt>

                     <dd> HTML is an markup language that is used to create webpage or website </dd>

                     <dt>CSS:-</dt>

                      <dd> CSS is an markup language that is used to create webpage or website</dd>

                        <dt>MS Access:-</dt>

                   <dd> MS Access is an markup language that is used to create webpage or website  </dd>

             </dl>

                </body>

</html>





No comments:

Post a Comment

Full Form of IT and ITes Industry

                                                 Full Form (IT and ITeS) ICT - Information Communication Technology IT - Information Tec...