HTML Lists: Beyond The Basics

HTML lists: In this post we’ll explore the many options of HTML lists that go beyond your basic bullet lists.

HTML provides three different types to choose from: unordered, ordered, and description lists.  There are also further levels of customization that I will cover, including having your own custom bullet point designs.

Unordered HTML Lists

A list of related items whose order does not matter.

Code:

<ul>
<li>Apples</li>
<li>Oranges</li>
<li>Pears</li>
</ul>

Result:

  • Apples
  • Oranges
  • Pears

Ordered  HTML List

Uses an numbered list instead of bullets.

<ol>
<li>Fill pot with water</li>
<li>Heat till boiling</li>
<li>Add Rice</li>
<li>Cook for 15mins</li>
</ol>

 

  1. Fill pot with water
  2. Heat till boiling
  3. Add Rice
  4. Cook for 15mins

To set which number the list starts from

The start attribute defines the number from which an ordered list starts from.

<ol start = “5”>
<li>Fill pot with water</li>
<li>Heat till boiling</li>
<li>Add Rice</li>
<li>Cook for 15mins</li>
</ol>

 

  1. Fill pot with water
  2. Heat till boiling
  3. Add Rice
  4. Cook for 15mins

How to reverse the list order

Writing the reversed attribute inside the <ol> element, allows a list to appear in reverse order

<ol reversed>
<li>Fill pot with water</li>
<li>Heat till boiling</li>
<li>Add Rice</li>
<li>Cook for 15mins</li>
</ol>

 

4. Fill pot with water
3. Heat till boiling
2. Add Rice
1. Cook for 15mins

How to change individual numbering

You can make the list skip some numbers in a list with the value attribute.  This can be done inside the <li> tag, which will change that individual list item to the number your designate to it.  All list items after it will be numbered upwards from that number.

<ol>
<li>Fill pot with water</li>
<li value = “5”>Heat till boiling</li>
<li>Add Rice</li>
<li>Cook for 15mins</li>
</ol>

 

  1. Fill pot with water
  2. Heat till boiling
  3. Add Rice
  4. Cook for 15mins

Creating Description HTML Lists

These are lists where instead of using bullets or numbers, you can enter in your own values.  This ideal for glossaries, where you can outline multiple terms and provide their descriptions.

<dl>
  <dt>Page CTR</dt>
  <dd>
      Page click-through rate: the number of clicks received divided by the number of
      page impressions.
  </dd>
  <dt>CPC</dt>
  <dd>
      Cost-per-click: the amount that an advertiser pays each time a user clicks his
      or her ad. In your reports, your CPC column reflects your estimated earnings divided 
      by the number of clicks that you've received.
   </dd>
  <dt>Page RPM</dt>
  <dd>
      Total earnings divided by one thousand page views.
  </dd>
</dl>

 

Page CTR
Page click-through rate: the number of clicks received divided by the number of
page impressions.
CPC
Cost-per-click: the amount that an advertiser pays each time a user clicks his
or her ad. In your reports, your CPC column reflects your estimated earnings divided
by the number of clicks that you’ve received.
Page RPM
Total earnings divided by one thousand page views.

Nesting HTML Lists

Placing lists within lists.  Here I’ve placed an unordered list within an ordered one:

<ol>
  <li>Cafe</li>
  <li>
    Shop
    <ul>
      <li>Item A</li>
      <li>Item B</li>
      <li>Item C</li>
    </ul>
  </li>
  <li>Garage</li>
</ol> 
  1. Cafe
  2. Shop
    • Item A
    • Item B
    • Item C
  3. Garage

Changing the List Style

With a tiny bit of CSS, you can also change the style of unordered and ordered lists with the list-style-type property:

<ul>
    <li style="list-style-type: disc;">Filled Circle</li>
    <li style="list-style-type: none;">None</li>
    <li style="list-style-type: circle;">Hollow Circle</li>
    <li style="list-style-type: square;">Filled Square</li>
</ul>
<ol>
    <li style="list-style-type: decimal;">Decimal</li>
    <li style="list-style-type: decimal-leading-zero;">Decimal-leading-zero</li>
    <li style="list-style-type: lower-roman;">Lower-roman</li>
    <li style="list-style-type: upper-roman;">Upper-roman</li>
    <li style="list-style-type: lower-greek;">Lower-greek</li>
    <li style="list-style-type: lower-alpha;">Lower-alpha/lower-latin</li>
    <li style="list-style-type: upper-alpha;">Upper-alpha/upper-latin</li>
    <li style="list-style-type: armenian;">Armenian</li>
    <li style="list-style-type: georgian;">Georgian</li>
</ol> 
  • Filled Circle
  • None
  • Hollow Circle
  • Filled Square
  1. Decimal
  2. Decimal-leading-zero
  3. Lower-roman
  4. Upper-roman
  5. Lower-greek
  6. Lower-alpha/lower-latin
  7. Upper-alpha/upper-latin
  8. Armenian
  9. Georgian

Custom Item List Markers

Using an image (either .png or .svg) and a bit of CSS, you can use any image as your bullet points.  In this example I will be using my own custom star bullets.

In your CSS, the background property is used to identify a background image via a link, along with its position and to not repeat the image.  Setting list-style-type to none removes any existing list markers and padding-left adds some spacing between the bullet image and the text.

li {
  background: url("star.png") 0 50% no-repeat;
  list-style-type: none;
  padding-left: 15px;
}

html lists

Now you should be able to have fun creating your own unique bullets in your HTML Lists.

Leave a Reply