HTML Lists

      No Comments on HTML Lists

HTML Lists are used to display items in a list, or ones in relation to one another.

Unordered Lists

Unordered list represents items not in order. The list begins with <ul> tag. All list items are contained in <li> tag.List items ares marked with bullets disc (by default).
Example

  • Blue
  • Black
  • Green
  • Red
  • Pink
<ul>
	<li>Blue</li>
	<li>Black</li>
	<li>Green</li>
	<li>Red</li>
	<li>Pink</li>
</ul>

Unordered HTML Lists -Change the list marker

The CSS list-style-type property or the HTML attribute type of <ul> tag can be used to define the style of the list marker. The values can be:-

ValueDescription
discSets the list item marker to a bullet (default)
circleSets the list item marker to a circle
squareSets the list item marker to a square
noneThe list items will not be marked

Example- Square

  • Blue
  • Black
  • Green
  • Red
  • Pink
<ul type="square">
	<li>Blue</li>
	<li>Black</li>
	<li>Green</li>
	<li>Red</li>
	<li>Pink</li>
</ul>

Example -Circle

  • Blue
  • Black
  • Green
  • Red
  • Pink
<ul type="circle">
	<li>Blue</li>
	<li>Black</li>
	<li>Green</li>
	<li>Red</li>
	<li>Pink</li>
</ul>

Example -none

  • Blue
  • Black
  • Green
  • Red
  • Pink
<ul style="list-style-type:none">
	<li>Blue</li>
	<li>Black</li>
	<li>Green</li>
	<li>Red</li>
	<li>Pink</li>
</ul>

Ordered List

Ordered list beings with <ol> tag. Items are contained in <li> tag.List items are marked with numbers by default.

  1. Blue
  2. Black
  3. Green
  4. Red
  5. Pink
<ol>
	<li>Blue</li>
	<li>Black</li>
	<li>Green</li>
	<li>Red</li>
	<li>Pink</li>
</ol>

Ordered HTML Lists-change the list marker

the type attribute of <ol> tag is used to define the list marker. The values can be:

TypeDescription
type=”1″The list items will be numbered with numbers (default)
type=”A”The list items will be numbered with uppercase letters
type=”a”The list items will be numbered with lowercase letters
type=”I”The list items will be numbered with uppercase roman numbers
type=”i”The list items will be numbered with lowercase roman numbers

Example-Uppercase letters

  1. Blue
  2. Black
  3. Green
  4. Red
  5. Pink
<ol type="A">
	<li>Blue</li>
	<li>Black</li>
	<li>Green</li>
	<li>Red</li>
	<li>Pink</li>
</ol>

Example- lowercase letters

  1. Blue
  2. Black
  3. Green
  4. Red
  5. Pink
<ol type="a">
	<li>Blue</li>
	<li>Black</li>
	<li>Green</li>
	<li>Red</li>
	<li>Pink</li>
</ol>

Example- lowercase roman numbers

  1. Blue
  2. Black
  3. Green
  4. Red
  5. Pink
<ol type="i">
	<li>Blue</li>
	<li>Black</li>
	<li>Green</li>
	<li>Red</li>
	<li>Pink</li>
</ol>

Example- uppercase roman numbers

  1. Blue
  2. Black
  3. Green
  4. Red
  5. Pink
<ol type="I">
	<li>Blue</li>
	<li>Black</li>
	<li>Green</li>
	<li>Red</li>
	<li>Pink</li>
</ol>

Description list

List with items having description. The <dl> tag defines a description list. <dt> defines the terms, and < dd> holds the description.
Example:

Coffee
Black hot drink
Milk
– white cold drink
<dl>
  <dt>Coffee</dt>
  <dd>--Black hot drink</dd>
  <dt>Milk</dt>
  <dd>--white cold drink</dd>
</dl>

Nested HTML Lists

List can be contained inside another list, this is called nesting of lists.
Example:

  1. Blue
  2. Black
    • Blue
    • Black
    • Green
    • Red
    • Pink
  3. Red
  4. Pink
<ol type="I">
	<li>Blue</li>
	<li>Black</li>
	<li>
         <ul>
	   <li>Blue</li>
	   <li>Black</li>
	   <li>Green</li>
	   <li>Red</li>
	   <li>Pink</li>
         </ul>
       </li>
	<li>Red</li>
	<li>Pink</li>
</ol>

Leave a Reply

Your email address will not be published. Required fields are marked *