Table of Contents

HTML Lists

An HTML list is a way to display data in a particular order. Using lists we can display elements in a specific order with numbers, bullet points, and multiple other styles.

Let's try out an example list. Say that we have an unordered list <ul></ul> of ninja weapons. We could display each of these weapons in their own list item <li></li> like so:

<ul>
  <li>Throwing Star</li>
	<li>Sword</li>
	<li>Staff</li>
</ul>

The code above will have a result of the following:

Unordered List of Ninja Weapons

As you can see the default style that the unordered list uses is the bullet point disc, but we could also specify the bullet point to be circle, square, or none. Take a look at each of these examples below:

Style Description
list-style-type: disc The list style will be filled in circles or bullet points (this is the default)
list-style-type: circle The list style will be circle outlines
list-style-type: square The list style will be squares
list-style-type: none There will be no styles or bullet points

list-style-type: disc

list-style-type: circle

list-style-type: square

list-style-type: none

In addition to unordered lists, we can also use ordered lists <ol></ol>, and ordered lists will list the items in a sequential order. Take a look at the following example:

<ol>
  <li>Throwing Star</li>
	<li>Sword</li>
	<li>Staff</li>
</ol>

This will create the following:

Ordered List of Ninja Weapons

The default style for an ordered list is to use numbers. But, there are also several other ways we can show the order of the list which include numbers, letters, or roman numerals. Take a look at each of these below:

Style Description
type="1" The default order will be displayed as numbers (this is the default)
type="A" The list will be ordered using uppercase letters
type="a" The list will be ordered using lowercase letters
type="I" The list will be ordered using uppercase roman numerals
type="i" The list will be ordered using lowercase roman numerals

type="1"

type="A"

type="a"

type="I"

type="i"

Next, let's move on to talking about links.