Lists in html

In this article we are going to learn about types of lists in html and how to combine more than one lists in one list which is called nested list.

We learnt about html in general learning the structure of html and text in html so, now we are going to go through lists.

Lists

Lists are used in HyperText Markup Language (HTML) to create lists in webpages.

Types of lists

  1. Ordered list
  2. Unordered or bullet list
  3. Definition list

Ordered list

Ordered list is a type of list in html that all iterms in the list are ordered consecutively, numbering from one upward and we use <ol></ol> tags in ordered list.

Example

Le us create ordered list, copy and paste bellow code.

<ol>

<li>Headings</li>

<li>Bold</li>

<li>Italic</li>

<li>Strong</li>

</ol>

So, we should have the following results.

  1. Headings
  2. Bold
  3. Italic
  4. Strong

Unordered list

Unordered list is a type of list in html that all iterms in the list are ordered consecutively with bullets, without numbering and we use <ul></ul> tags in unordered list.

Example

Le us create unordered list, copy and paste bellow code.

<ul>

<li>Headings</li>

<li>Bold</li>

<li>Italic</li>

<li>Strong</li>

</ul>

So, we should have the following results.

  • Headings
  • Bold
  • Italic
  • Strong

Definition list

Definition list is a type of list in html that all set of iterms in the list are ordered consecutively without bullets, without numbering and each iterm has definition and we use <dl></dl> tags in definition list.

Example

Le us create definition list, copy and paste bellow code.

<dl>

<dt>Headings</dt>

<dd>This is heading text.</dd>

<dt>Bold</dt>

<dd>This is bold text.</dd>

<dt>Italic</dt>

<dd>This is italic text.</dd>

<dt>Strong</dt>

<i>This is strong text.</i>

</dl>

So, we should have the following results.

Headings
This is heading text.
Bold
This is bold text.
Italic
This is italic text.
Strong
This is strong text.

Nested list

We can combine more than one lists in one list and we call this nested list.

Example

Let us create nested list with ordered and unordered lists, copy and paste bellow code.

<ol>

<li>Headings</li>

<li>Font style

<ul>

<li>Bold</li>

<li>Italic</li>

</ul>

</li>

<li>Strong</li>

<li>Emphasis</li>

</ol>

So, we should have the following results.

  1. Headings
  2. Font style
    • Bold
    • Italic
  3. Strong
  4. Emphasis

Conclusion

In this article we learnt about lists in html with examples and three types of lists which are ordered, unordered and definition list and we learnt how to combine more than one lists in one list which is called nested list.