Nested lists in HTML

Nested lists are designed to organize a complex hierarchical structure of any text, usually those are documents, legal or technical. In fact on a web page by default you can not set a multileveled numbered list, for example using sub-paragraphs 1.1 or 2.1.3. So you have to input the numbers yourself or simplify the list. Thus, in the example 1 paragraphs and sub-paragraphs are designated as numbers.

Example 1. Creating a nested numbered list.

<ol>
  <li>Paragraph 1
    <ol>
      <li>Sub-paragraph 1.1</li>
      <li>Sub-paragraph 1.2</li>
    </ol>
  </li>
  <li>Paragraph 2
    <ol>
      <li>Sub-paragraph 2.1</li>
      <li>Sub-paragraph 2.2</li>
    </ol>
  </li>
</ol>

The result of this example is shown below. Please note that the sub-paragraphs have additional horizontal spacings but no vertical, this is a feature of the ol tag.

Similarly, you can use bulleted lists. This automatically changes the type of marker in nested list (example 2).

Example 2. Creating a nested bulleted list.

<ul>
  <li>Paragraph 1
    <ul>
      <li>Sub-paragraph 1.1</li>
      <li>Sub-paragraph 1.2</li>
    </ul>
  </li>
  <li>Paragraph 2
    <ul>
      <li>Sub-paragraph 2.1</li>
      <li>Sub-paragraph 2.2</li>
    </ul>
  </li>
</ul> 

The result of this example is shown below.