There are three types of lists in the HTML, Ordered
list, unorderedlist or definition or description list. These lists define a
block structure of the document and are block formatting elements. Some HTML
attributes like style, type may be used. If the list is to be displayed
horizontal the css property display:inline
may also be used. Some other HTML elements like <dt>, <dd> may also be used to describe the term and
description. The details of the tags
used in all the three types of the lists and elements commonly used with them
are mentioned below in brief –
<DL>…</DL> Used to define a Definition or Description List
<OL>…</OL> Used to define an Ordered List
![]() |
HTML Basics-LISTS tag, type of lists and the unordered list |
<DL>…</DL> Used to define a Definition or Description List
<OL>…</OL> Used to define an Ordered List
<UL>…</UL> Used
to define an Unordered List
<li> …
</li> Used to define a list item.
<dt>…</dt> sed
in definition or description list to define term.
<dd>…</dd> Used
in definition or description list to define the definition
or
description
These HTML attributes can also be used in HTML lists – Style – This
attribute is used to define the style of the bullets.
Type - This attribute is used to define the type ofnumbering
Type - This attribute is used to define the type ofnumbering
To display the list horizontally use css property
display:inline.
Other HTML elements can be used and a list can be
nested inside the list.
The Unordered List
<ul> will be the starting tag and </ul>
will be the closing tag in an unordered list. Each item in side the list will
start with <li> tag and end with </li> tag. A bullet mark will be
displayed before each list item.
Example, without using any attribute – Result
-
<ul>
<li>note books</li> •note books
<li>pens</li> •pens
<li>pencils</li> •pencils
<li>erasors</li> •erasors
</ul>
The style of the marker may be defined using the style
attribute in an unordered list.
List-style-type:disk – This the default styele and the
list items will be marked with a bullet.
Example using attribute list-style-type:disk – Result -
<ul style=”list-style-type:disk”>
<li>note books</li> •note books
<li>pens</li> •pens
<li>pencils</li> •pencils
<li>erasors</li> • erasers
</ul>
List-style-type:circle – Each list items will be
marked with a circle instead of the bullet.
Example using attribute list-style-type:circle – Result -
<ul style=”list-style-type:circle”>
<li>note books</li> ○ Note books
<li>pens</li> ○ pens
<li>pencils</li> ○ pencils
<li>erasors</li> ○ erasors
</ul>
List-style-type:square - Each list items will be
marked with a square.
Example using attribute list-style-type:square – Result -
<ul style=”list-style-type:square”>
<li>note
books</li> n note books
<li>pens</li> n pens
<li>pencils</li> n pencils
<li>erasors</li> n erasors
</ul>
List-style-type:none – No list Item will bear any
mark.
Example using attribute list-style-type:none – Result -
<ul style=”list-style-type:none”>
<li>note books</li> note books
<li>pens</li> pens
<li>pencils</li> pencils
<li>erasors</li> erasors
</ul>
Note- HTML 5 does not support the ‘type’ attribute in
unoedered list
Good......
जवाब देंहटाएंThanks a lot of for the comment manoj kumar
जवाब देंहटाएं