Others


HTML Lists


HTML lists are used to present list of information to group a set of related items in lists. All lists must contain one or more list elements.

  • Unordered list — Used to create a list of related items, in no particular order.
  • Ordered list — Used to create a list of related items, in a specific order.
  • Description list — Used to create a list of terms and their descriptions.

HTML Unordered Lists

An unordered list created using the <ul> element, and each list item starts with the <li> element.The list items in unordered lists are marked with bullets.

Values Description
type="disc" List item bullet (default)
type="square" List item square
type="circle" List item circle
type="none" No list item
Example 
<ul type="square">
    <li>First Item</li>
    <li>Second Item</li>
    <li>Third Item</li>
</ul>
Try it Yourself

Output:

  • First Item
  • Second Item
  • Third Item

HTML Ordered List

An ordered list created using the <ol> element, and each list item starts with the <li> element. The list items in an ordered list are marked with numbers.

Values Description
type="1" List item with number (default)
type="A" List item with uppercase
type="a" List item with lowercase
type="I" List item with upper roman
type="i" List item with lower roman
type="none" No list item
Example 
<ol type="1">
    <li>First Item</li>
    <li>Second Item</li>
    <li>Third Item</li>
</ol>
Try it Yourself

Output:

  1. First Item
  2. Second Item
  3. Third Item

HTML Ordered List - Start Attribute

The numbering of items in an ordered list typically starts with 1. However, if you want to change that you can use the start attribute.

Example 
<ol type="A" start="11">
    <li>First Item</li>
    <li>Second Item</li>
    <li>Third Item</li>
</ol>
Try it Yourself

Output:

  1. First Item
  2. Second Item
  3. Third Item

HTML Description List

A description list is a list of items with a description or definition of each item. The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag describes each term:

Example 
<dl>
    <dt>HTML</dt>
    <dd>Hyper Text Markup Language</dd>
    <dt>CSS</dt>
    <dd>Cascading Style Sheets</dd>
</dl>
Try it Yourself

Output:

HTML
         Hyper Text Markup Language
CSS
         Cascading Style Sheets

HTML Nested List

Example 
<ol type="1">
  <li>Programming</li>
     <ul type="disc">
       <li>Javascript</li>
       <li>Java</li>
       <li>PHP</li>
       <li>Python</li>
      </ul>
  <li>Web Development</li>
     <ul type="disc">
       <li>HTML</li>
       <li>CSS</li>
       <li>Bootstrap</li>
       <li>MySQL</li>
     </ul>
</ol>
Try it Yourself

Output:

  1. Programming
    • Javascript
    • Java
    • PHP
    • Python
  2. Web Development
    • HTML
    • CSS
    • Bootstrap
    • MySQL