HTML Lists – Descriptive, Ordered, Unordered lists

HTML Lists are used to group a set of related items. These are of three types :
1) Ordered List or Numbered List (ol)
2) Unordered List or Bulleted List (ul)
3) Description List or Definition List (dl)

Ordered List or Numbered List :

  • In order to list items in any number or any countable format, we use Ordered or Numbered lists.
  • By default, all the items are marked with numbers in the ordered lists.
  • It is created using the <ol> tag and the list item is specified using the <li> tag.

For Example :

<ol>
  <li>Hi</li>
  <li>Techno Brainz</li>
  <li>How are you?</li>
</ol>

Output :

1. Hi
2. Techno Brainz
3. How are you?

  • The type attribute of the <ol> tag defines the type of numbering format.

It can have five values :-

  • “1” -> Numbers. It is the default value of type attribute
  • “i” -> Lower-Case numerals
  • “I” -> Upper-Case numerals
  • “a” -> Lower-Case letters
  • “A” -> Upper-Case letters

For Example :

<ol type = "I">
<li>Hello</li>
<li>Techno Brainz</li>
<li>How are you?</li>
</ol>

Output :

I. Hello
II. Techno Brainz
III. How are you?

<ol type = "i">
<li>Hello</li>
<li>Techno Brainz</li>
<li>How are you?</li>
</ol>

Output :

i. Hello
ii. Techno Brainz
iii. How are you?

<ol type = "A">
<li>Hello</li>
<li>Techno Brainz</li>
<li>How are you?</li>
</ol>

Output :

A. Hello
B. Techno Brainz
C. How are you?

<ol type = "a">
<li>Hello</li>
<li>Techno Brainz</li>
<li>How are you?</li>
</ol>

Output :

a. Hello
b. Techno Brainz
c. How are you?

  • The start attribute of the <ol> tag defines the start of numbering format.

For Example :

<ol start="4">
  <li>Hi</li>
  <li>Techno Brainz</li>
  <li>How are you?</li>
</ol>

Output :

4. Hi
5. Techno Brainz
6. How are you?

Unordered List or Bulleted List :

  • HTML Lists are also used to create Unordered or Bulleted lists
  • It is used to lists elements that do not require any order or sequence.
  • By default, all the items are marked with discs in the unordered lists.
  • It is created using the <ul> tag and the list item is specified using the <li> tag.

For Example :

<ul>
<li>Hello</li>
<li>Techno Brainz</li>
<li>How are you?</li>
</ul>

Output :

  • Hello
  • Techno Brainz
  • How are you?
  • The type attribute of the <ul> tag defines the type of unordered list.

It can have three values :

  • “square”
  • “circle”
  • “disc”
  • “none”

For Example :

<ul type="square">
<li>xyz</li>
<li>pqr</li>
<li>abc</li>
</ul>

Output :

For Example :

<ul type="circle">
<li>but</li>
<li>and</li>
<li>or</li>
</ul>

Output :

type=”circle”

For Example :

<ul type="none">
<li>aaaa</li>
<li>bbbb</li>
<li>cccc</li>
</ul>

Output :

aaaa
bbbb
cccc

Description List or Definition List :

  • Description or definition list is used to list terms along with their description.
  • The terms here, are listed like in a dictionary or encyclopedia.

The tags used here are :

  • <dl> : used to define the definition list
  • <dt> : used to define the term in the definition list
  • <dd> : used to define the term definition in definition list

For Example :

<dl>
<dt><b>HTML</b></dt>
<dd>This stands for Hyper Text Markup Language</dd>
<dt><b>HTTP</b></dt>
<dd>This stands for Hyper Text Transfer Protocol</dd>
</dl>

Output :

Note :-

Watch HTML Ordered List video on YouTube – Click here
Watch HTML Unordered List video on YouTube – Click here
HTML Links and Anchor tag – Click here

Topic

Join Telegram Group