JavaScript is disabled! Please enable JavaScript in your web browser!

Freestyle Academy of Communication Arts & Technology

1299 Bryant Ave, Mt. View, CA 94040 T 650-940-4650 x5090
2 Required Classes: English and Digital Media 3rd/Elective Class:  + Animation or Design or Film

Back to list of all examples

Useful Stuff About:

Lists - Bulleted or Numbered

These are bulleted lists

The HTML code for this looks like this


<ul>/* ul stands for UNordered List */
         <li>     Bulleted item 1 where order doesn't matter</li>/*li stands for List Item*/
         <li>     Bulleted item 2 where order doesn't matter</li>
         <li>     Bulleted item 3 where order doesn't matter</li>
         <li>     Bulleted item 4 where order doesn't matter</li>
</ul>

These are numbered lists

  1. Numbered item 1 where order DOES matter
  2. Numbered item 2 where order DOES matter
  3. Numbered item 3 where order DOES matter
  4. Numbered item 4 where order DOES matter

The HTML code for this looks like this


<ol>/* ol stands for Ordered List */
        <li>Numbered item 1 where order DOES matter</li>/*li stands for List Item*/
        <li>Numbered item 2 where order DOES matter</li>
        <li>Numbered item 3 where order DOES matter</li>
        <li>Numbered item 4 where order DOES matter</li> 
</ol>


These are bulleted lists with custom images for bullets

The HTML code for this looks the same as above but the CSS is different


ul li{
      list-style-image:url(path/to/custom/image.png);/*Path is relative to css file, NOT the HTML/PHP file*/
}

These are numbered lists with multi levels

  1. Numbered item 1 where order DOES matter
    1. Sub-level one
      1. Sub-level two
      2. Sub-level two
      3. Sub-level two
    2. Sub-level one
      1. Sub-level two
      2. Sub-level two
      3. Sub-level two
    3. Sub-level one
      1. Sub-level two
      2. Sub-level two
      3. Sub-level two
  2. Numbered item 2 where order DOES matter
    1. Sub-level one
      1. Sub-level two
      2. Sub-level two
      3. Sub-level two
    2. Sub-level one
      1. Sub-level two
      2. Sub-level two
      3. Sub-level two
    3. Sub-level one
      1. Sub-level two
      2. Sub-level two
      3. Sub-level two

The HTML code for this looks like this


<ol>
    <li>Numbered item 1 where order DOES matter
      <ol type="a">
        <li>Sub-level one
          <ol type="i">
            <li>Sub-level two</li>
            <li>Sub-level two</li>
            <li>Sub-level two</li>
          </ol>
        </li>
        <li>Sub-level one
          <ol type="i">
            <li>Sub-level two</li>
            <li>Sub-level two</li>
            <li>Sub-level two</li>
          </ol>
        </li>
        <li>Sub-level one
          <ol type="i">
            <li>Sub-level two</li>
            <li>Sub-level two</li>
            <li>Sub-level two</li>
          </ol>
        </li>
      </ol>
    </li>
    <li>Numbered item 2 where order DOES matter
      <ol type="a">
        <li>Sub-level one
          <ol type="i">
            <li>Sub-level two</li>
            <li>Sub-level two</li>
            <li>Sub-level two</li>
          </ol>
        </li>
        <li>Sub-level one
          <ol type="i">
            <li>Sub-level two</li>
            <li>Sub-level two</li>
            <li>Sub-level two</li>
          </ol>
        </li>
        <li>Sub-level one
          <ol type="i">
            <li>Sub-level two</li>
            <li>Sub-level two</li>
            <li>Sub-level two</li>
          </ol>
        </li>
      </ol>
    </li>
  </ol>