HTML Lists


HTML HTML Lists List-style-type Circle

Unordered List

Unordered list typically is a bulleted list of items. The <ul>tag defines an unordered (bulleted) list. Use the<ul> tag together with the <li> tag to create unordered lists.

Example:-

<ul> <li>Monday</li> <li>Tuesday</li> <li>wednesday</li> <li>Thursday</li> </ul>

Output:-

  • Monday
  • Tuesday
  • wednesday
  • Thursday

Unordered List Item Marker

The list-style-type in style Tag is used to define list marker.

Example:-

<ul style="list-style-type:square"> <li>Monday</li> <li>Tuesday</li> <li>wednesday</li> <li>Thursday</li> </ul>

By default value is disc. Other values are circle, square, none.

Output:-

  • Monday
  • Tuesday
  • wednesday
  • Thursday

Ordered List

Ordered list typically is a numbered list of items. Use the <ol> tag together with the <li> tag to create ordered lists.

Example:-

<ol> <li>Monday</li> <li>Tuesday</li> <li>wednesday</li> <li>Thursday</li> </ol>

Output:-

  1. Monday
  2. Tuesday
  3. wednesday
  4. Thursday

Ordered List Type Attribute

The type attribute in ordered list is used to define list item marker. type="1" (for number). type="A" (for uppercase alphabets). type="a" (for lowercase alphabets). type="I"(for uppercase romarn numbers). type="i" (for lowercase roman numbers).

Example:-

<ol type="A"> <li>Monday</li> <li>Tuesday</li> <li>wednesday</li> <li>Thursday</li> </ol>

Output:-

  1. Monday
  2. Tuesday
  3. wednesday
  4. Thursday

Description List

Description list typically is a list of terms with description of each term. Use the <dl> tag (description list) together with <dt> tag (term) and <dd> tag (description of term).

Example:-

<dl> <dt>Computer</dt> <dd>Computer is an electronic device that takes input process it and then give output.</dd> <dt>Hardware</dt> <dd>Parts that we can touch and feel.</dd> </dl>

Output:-

Computer
Computer is an electronic device that takes input process it and then give output.
Compuer Hardware
Parts of computer which we can touch or feel.

Nested Lists

List with in list(Nested list).

Example:-

<ul> <li>Syrup</li> <li>Tablet <ul> <li>Panadol</li> <li>Paracetamol</li> </ul></li> <li>Injection</li> </ul>

Output:-

  • Syrup
  • Tablet
    • Panadol
    • Paracetamol
  • Injection
HTML List-style-type Circle Chapter Next »