Lists of HTML

More options for you.


General KnowledgeEnglish GrammarMathScienceIQ-TestQuiz-Test

There are three ways for specifying lists of information in HTML.
All lists must contain one or more list elements.
Let's have a look how lists to be contain:

Unordered List

  • First Item
  • Second Item
  • Third Item

Ordered List

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

Definition List

HTTP
Hyper Text Transfer Protocol
HTML
Hyper Text Markup Language
CSS
Cascading Style Sheet

Unordered HTML lists

An unordered list is created by using <ul> tag.
This list is a collection of related items that have no special order.
Each list item starts with the <li> tag.
Each item in the list is marked with a bullet.

How to make an unorderd list?

We can use style attribute for <ul> tag to specify the type of bullet we like.
There are three types of bullets we can use for unordered lists: Disc, Circle, and Square
By default it is a disc.
The types are these:

Style Description
list-style-type:disc
The list items will be marked with bullets (default)
list-style-type:square
The list items will be marked with squares
list-style-type:circle
The list items will be marked with circles
Let's apply the style attribute for <ul> tag to specify the square type of bullet.

HTML Editor

<html>
<body>
<ul style="list-style-type:square;">
<li> Item no-1 </li>
<li> Item no-2 </li>
<li> Item no-3 </li>
</ul>
</body>
</html>

Web Browser

  • Item no-1
  • Item no-2
  • Item no-3

Ordered HTML lists

An Ordered list is created by using <ol> tag.
This list is a collection of related items that have a special order.
Each list item starts with the <li> tag.

How to make an orderd list?

We can use type attribute for <ol> tag to specify the type of bullet we like.
By default it is a number.
The types are these:

Type Description
type="1" The list items will be numbered with numbers (default)
type="A" The list items will be numbered with uppercase letters
type="a" The list items will be numbered with lowercase letters
type="I" The list items will be numbered with uppercase roman numbers
type="i" The list items will be numbered with lowercase roman numbers
Let's apply the type attribute for <ol> tag to specify the type="A".

HTML Editor

<html>
<body>
<ol type="A">
<li> Item no-1 </li>
<li> Item no-2 </li>
<li> Item no-3 </li>
</ol>
</body>
</html>

Web Browser

  1. Item no-1
  2. Item no-2
  3. Item no-3

Definition/Description HTML lists

HTML support a list style that is called definition/Description lists where entries are listed like in a dictionary.
A description list is a list of terms, with a description of each term.
Description List makes use of following three tags:

Tag Description
<dl>
Defines a description list
<dt>
Defines the description term
<dd>
Defines the description data

Let's have a look an example of definition list.

HTML Editor

<html>
<body>
<dl>
<dt> HTTP </dt>
<dd> Hyper Text Transfer Protocol </dd>
<dt> HTML </dt>
<dd> Hyper Text Markup Language </dd>
<dt> CSS </dt>
<dd> Cascading Style Sheet </dd>
</dl>
</body>
</html>

Web Browser
HTTP
Hyper Text Transfer Protocol
HTML
Hyper Text Markup Language
CSS
Cascading Style Sheet


More options for you.


General KnowledgeEnglish GrammarMathScienceIQ-TestQuiz-Test