HTML List

HTML List is use for listing information, so that they are clearly associated with each other. Lists are used all the time on the website for navigation menus, product features etc.

In HTML, there are 3 types of List available, they are:

  1. Unordered list
  2. Ordered list
  3. Description list

Unordered List

An unordered list is a collection of related list items that have no special order or sequence. An unordered list is created by using HTML <ul> tag, each item in the list is defined with <li> tag, and will be displayed as a bullet.

Example 1: HTML unordered list

Web Designing Tools
<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JS</li>
    <li>jQuery</li>
</ul>
Attribute Value Syntax Output
type disc (default) <ul type="disc">
  • disc list
  • circle <ul type="circle">
  • circle list
  • square <ul type="square">
  • square list
  • Ordered List

    If you are required to put your list items in a number or in a sequence instead of bullets, then HTML ordered list is useful. <ol> tag is used to create HTML Ordered List.

    Example 2: HTML ordered list.

    Web Designing Tools
    <ol>
        <li>HTML</li>
        <li>CSS</li>
        <li>JS</li>
        <li>jQuery</li>
    </ol>
    Attribute Description
    start Specify the starting value for a list.
    type Specify ordered list type, value can be '1','a','A','i','I'

    Example 3: HTML ordered list with start attribute.

    1. List item 1
    2. List item 2
    3. List item 3
    <ol type="a" start="5">
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
    </ol>

    Description List

    A description list is a list of terms, with a description of each term. The <dl> tag defines the description list, the <dt> tag defines the term (Heading), and the <dd> tag, describes each term.

    Example 4: HTML Description list.

    <html>
       <body>
          <dl>
             <dt>HTML</dt>
             <dd>Hyper Text Markup Language is use to define tags that are useful to create a website layout.</dd>
             <dt>CSS</dt>
             <dd>Cascading Style Sheet is use to style the html elements i.e. color, font, background etc.</dd>
             <dt>Js</dt>
             <dd>JavaScript is a client side scripting language use to create website dynamic.</dd>
          </dl>
       </body>
    </html>