Home

This is an example of different LIST tags

Example of an ORDERED LIST <ol>

Cannot have a <h1 - h6> header inside the <ol> tag

  1. First Item in List
  2. Second Item in List
    1. Can NEST lists too
    2. with another <ol>
    3. Last Item in List
  3. Third Item in List
  4. Fourth Item in List
    • Can NEST lists too
    • or with a <ul>
    • Last Item in List

Example of an UN-ORDERED LIST <ul>

With BULLET POINTS

  • First Item in List
  • Second Item in List
  • Third Item in List
  • Fourth Item in List

Without BULLET POINTS

  • First Item in List
  • Second Item in List
  • Third Item in List
  • Fourth Item in List

A Description/Definition List uses the dl, dd, and dt elements

These elements are used to create a description list:

Coffee
Black hot drink
White hot drink
Creamy hot drink
Milk
White cold drink

A LIST with pictures as Bullet Points

  • First Item in List
  • Second Item in List
  • Third Item in List
  • Fourth Item in List

A horizontal list is just a matter of making the ul & li 'display:inline;'

Note there will be no bullet points...so this...

would become...

It could be used to create a navigation bar by adding some styles to give you this...
(you can click the first item to take you to the INDEX page)


(Note you need to remove the underline AND the changing of the color of the text when the link has been clicked...see code)

Moving bullet points <ul>

Default
(outside content area)

  • First Item in List
  • Second Item in List
  • Third Item in List
  • Fourth Item in List plus a longer line to show what happens

inside content area

  • First Item in List
  • Second Item in List
  • Third Item in List
  • Fourth Item in List plus a longer line to show what happens

I removed all the padding values from the lists to make it more obvious

Uses the style list-style-position:inside; to make it look like the second display

Top