What are HTML Lists?

 | 

Lists in HTML are used to present a similar set of information such as categories or names in an orderly fashion, usually line-by-line.




HTML Comments

HTML Lists

HTML Lists are used to define list type of information in HTML. Lists may contain one or more list elements. List in HTML present such similar set of information in an orderly fashion, often easy to find.

There are three different types of HTML lists.

1. Unordered/ Bulleted Lists

Unordered lists are used to group a set of related items, basically in no particular order. An unordered list starts with a <ul> and ends with a </ul> tag. Subsequently the list elements in the unordered lists are enclosed in <li> and </li> tags.

List items in unordered lists are usually marked with small black circles by default.

Sample Code

<ul>
    <li>Java</li>
    <li>Ruby</li>
    <li>Perl</li>
</ul>

Output

  • Java
  • Ruby
  • Perl

Bullet style in unordered lists can be modified using the CSS list-style-type property. By default unordered list elements are provided using disc type bullets.

The syntax for modifying the bullet style in unordered lists: <ul style="list-style-type:disc;">

The following table consists of available list style types for the unordered lists.

CSS ValueDescription
discSets the list item marker to a circle (dark) type — default
circleSets the list item marker to circle (hollow) type

squareSets the list item marker to square type
noneThe list items will be left unmarked

2. Ordered/ Numbered Lists

Ordered lists are used to group a set of related items in a specific order. An ordered list starts with a <ol> and ends with a </ol> tag. Subsequently the list elements in the ordered lists are enclosed in <li> and </li> tags.

List items in ordered lists are usually marked with numbers by default.

Sample Code

<ol>
    <li>Java</li>
    <li>Ruby</li>
    <li>Perl</li>
</ol>

Output

  1. Java
  2. Ruby
  3. Perl

List marker type of the ordered lists can be modified using the HTML type attribute. By default the marker type is numbers in ordered type lists.

By default the marker list starts from 1 or I depending on the list marker type. But this can be changed by controlling list counting using start attribute. If we want the list count start from 25, the syntax is <ol start="25">

The syntax for modifying the list marker style in ordered lists: <ul type="1">

The following table consists of available list style types for the ordered lists.

Attribute ValueDescription
type=”1″Sets the list item markers with numbers — default
type=”A”Sets the list item markers with uppercase letters

type=”a”Sets the list item markers with lowercase letters

type=”I”Sets the list item markers with uppercase Roman numbers

type=”i”Sets the list item markers with lowercase Roman numbers

3.Definition/ Description Lists

Definition lists are used to display list of elements along with descriptions. A definiton list starts with a <dl> and ends with a </dl> tag. Subsequently the list elements in the definition lists are enclosed in <dt> and </dt> tags and their respective definitions/ descriptions are enclosed in <dd> and </dd> tags.

List items in definition lists usually doesn’t have any bullets.

Sample Code

<dl>
    <dt>Java</dt>
        <dd>class-based and object-oriented</dd>
    <dt>Ruby</dt>
        <dd>procedural and object-oriented</dd>
    <dt>Perl</dt>
        <dd>imperative and object-oriented</dd>
</dl>

Output



Java
class-based and object-oriented
Ruby
procedural and object-oriented
Perl
imperative and object-oriented

Foot Notes





Comments