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.
- Paragraph 1
- Sub-paragraph 1.1
- Sub-paragraph 1.2
- Paragraph 2
- Sub-paragraph 2.1
- Sub-paragraph 2.2
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.
- Paragraph 1
- Sub-paragraph 1.1
- Sub-paragraph 1.2
- Paragraph 2
- Sub-paragraph 2.1
- Sub-paragraph 2.2