List Examples

Ordered List: Numbering Style Options

HTML Example

  1. List 1 item #1
  2. List 1 item #2
  3. List 1 item #3
  4. List 2 item #4
  5. List 2 item #5
  6. List 2 item #6

HTML Source Code

<ol style="list-style-type: lower-roman">
  <li>List 1 item #1</li>
  <li>List 1 item #2</li>
  <li>List 1 item #3</li>
  <li>List 2 item #4</li>
  <li>List 2 item #5</li>
  <li>List 2 item #6</li>
</ol>

Ordered List: Start Attribute

HTML Example

  1. List 1 item #1
  2. List 1 item #2
  3. List 1 item #3
  1. List 2 item #4
  2. List 2 item #5
  3. List 2 item #6

HTML Source Code

<ol>
  <li>List 1 item #1</li>
  <li>List 1 item #2</li>
  <li>List 1 item #3</li>
</ol>

<ol start="4">
  <li>List 2 item #4</li>
  <li>List 2 item #5</li>
  <li>List 2 item #6</li>
</ol>

Ordered List: Value Attribute

HTML Example

  1. List item #1
  2. List item #2
  3. List item #3
  4. List item #4
  5. List item #5
  6. List item #6

HTML Source Code

<ol>
  <li value="6">List item #1</li>
  <li value="5">List item #2</li>
  <li value="4">List item #3</li>
  <li value="3">List item #4</li>
  <li value="2">List item #5</li>
  <li value="1">List item #6</li>
</ol>

Unordered List: Square Bullets

HTML Example

  • List item #1
  • List item #2
  • List item #3
  • List item #4
  • List item #5
  • List item #6

HTML Source Code

<ul style="list-style-type: square">
  <li>List item #1</li>
  <li>List item #2</li>
  <li>List item #3</li>
  <li>List item #4</li>
  <li>List item #5</li>
  <li>List item #6</li>
</ul>

Unordered List: Circle Bullets

HTML Example

  • List item #1
  • List item #2
  • List item #3
  • List item #4
  • List item #5
  • List item #6

HTML Source Code

<ul style="list-style-type: circle">
  <li>List item #1</li>
  <li>List item #2</li>
  <li>List item #3</li>
  <li>List item #4</li>
  <li>List item #5</li>
  <li>List item #6</li>
</ul>

Unordered List: Custom Bullets Using List-Style-Image

HTML Example

  • List item #1
  • List item #2
  • List item #3
  • List item #4
  • List item #5
  • List item #6

HTML Source Code

<ul style="list-style-image: url(images/bullet-2.PNG)">
  <li>List item #1</li>
  <li>List item #2</li>
  <li>List item #3</li>
  <li>List item #4</li>
  <li>List item #5</li>
  <li>List item #6</li>
</ul>

Unordered List: Custom Bullets Using Background Image

HTML Example

  • List item #1
  • List item #2
  • List item #3
  • List item #4
  • List item #5
  • List item #6

HTML Source Code

<ul class="backgroundbullet">
  <li>List item #1</li>
  <li>List item #2</li>
  <li>List item #3</li>
  <li>List item #4</li>
  <li>List item #5</li>
  <li>List item #6</li>
</ul>

CSS Source Code

ul.backgroundbullet li {
  list-style-type: none;
  text-align: center left;
  background-image: url(../images/bullet-2.PNG);
  background-position: center left;
  background-repeat: no-repeat;
  padding: .3em 0 0 1.1em;
}

Definition List

HTML Example

Term 1
Definition 1 for Term 1
Definition 2 for Term 1
Definition 3 for Term 1
Term 2
Definition 1 for Term 2
Term 3
Definition 1 for Term 3
Definition 2 for Term 3

HTML Source Code

<dl>
  <dt>Term 1</dt>
  <dd>Definition 1 for Term 1</dd>
  <dd>Definition 2 for Term 1</dd>
  <dd>Definition 3 for Term 1</dd>
  <dt>Term 2</dt>
  <dd>Definition 1 for Term 2</dd>
  <dt>Term 3</dt>
  <dd>Definition 1 for Term 3</dd>
  <dd>Definition 2 for Term 3</dd>
</dl>