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 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
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 Value | Description |
|---|---|
| disc | Sets the list item marker to a circle (dark) type — default |
| circle | Sets the list item marker to circle (hollow) type |
| square | Sets the list item marker to square type |
| none | The 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
- Java
- Ruby
- Perl
List marker type of the ordered lists can be modified using the HTML type attribute. By default the marker type is
By default the marker list starts from start attribute. If we want the list count start from <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 Value | Description |
|---|---|
| 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
