comment Add Comment
Posted on Last updated

HTML Lists

Hi, welcome to this lesson of our HTML Course. Join me as I unfold the next lesson called HTML Lists. HTML Lists, just as the phrase says is used to list items in an orderly or disorderly manner in HTML or in our websites. An example is the one below.

List of World`s Greatest Footballers

  1. Messi
  2. Ronaldo
  3. Neymar Jr.

References – HTML Lists Examples, QuackIT Tutorials

So, let’s begin by looking at the sections under this unit:

  1. HTML Ordered Lists
  2. HTML Unordered Lists
  3. HTML Definition Lists

HTML Ordered Lists

An ordered list is a list of items arranged in order of importance. It uses the <ol></ol> tag. For example:

World`s Greatest Footballers

Code Appearance
<ol><li>Messi<li/>

<li>Ronaldo<li/>

<li>Neymar Jr.<li/>

</ol>

  1. Messi
  2. Ronaldo
  3. Neymar Jr.

You would realise that I used <li></li> tags between my <ol></ol> tag. This refers to as list items. It is used both in ordered and unordered lists to specify the items in the list.

HTML Lists (Unordered)

Unordered list is a list of items that are not arranged in an orderly manner. It uses the <ol></ol> tag. For example:

World`s Greatest Footballers

Code Appearance
<ul><li>Messi<li/>

<li>Ronaldo<li/>

<li>Neymar Jr.<li/>

</ul>

  • Neymar Jr.
  • Messi
  • Ronaldo

HTML Definition Lists

Sometimes, you may want to add some defintion or kind of additional information to a list of items; and that’s what definition lists seek to achieve. For exmple:

World`s Greatest Footballers

Code Appearance
<dl><dt>Messi</dt>

<dd>Plays for Barcelona</dd>

<dt>Ronaldo</dt>

<dd>Plays for Real Madrid</dd>

<dt>Neymar Jr.</dt>

<dd>Plays for Barcelona</dd>

</dl>

Messi
Plays for Barcelona
Ronaldo
Plays for Real Madrid
Neymar Jr.
Plays for Barcelona

This brings us to the end of this unit titled HTML Lists. Please remember to practice with your editor, preview it in your browser and post your code customization in the forum.

Thank you for participating, and see you in the next lesson.


Leave a Reply

Your email address will not be published. Required fields are marked *