Midterm Activity 1

HTML Nested Lists

Activity Output

Output

LISTS

Main Topic 1
Main Topic 2
1. Topic 1
2. Topic 2
  - Subtopic 1
  - Subtopic 2
3. Topic 3
  1. Subtopic 1
  2. Subtopic 2
    - Mini Topic 1
    - Mini Topic 2
  3. Subtopic 3
Main Topic 3

HTML Code

The list uses four levels of nesting. Level 1 uses type="A" (uppercase letters). Level 2 uses type="I" (uppercase Roman numerals). Level 3 branches into either a square unordered list or a type="i" ordered list (lowercase Roman). Level 4 uses the default disc unordered list.

Code

<ol type="A">
  <li>Main Topic 1</li>
  <li>Main Topic 2
    <ol type="I">
      <li>Topic 1</li>
      <li>Topic 2
        <ul style="list-style-type: square;">
          <li>Subtopic 1</li>
          <li>Subtopic 2</li>
        </ul>
      </li>
      <li>Topic 3
        <ol type="i">
          <li>Subtopic 1</li>
          <li>Subtopic 2
            <ul style="list-style-type: disc;">
              <li>Mini Topic 1</li>
              <li>Mini Topic 2</li>
            </ul>
          </li>
          <li>Subtopic 3</li>
        </ol>
      </li>
    </ol>
  </li>
  <li>Main Topic 3</li>
</ol>