Nested lists in HTML

Nested lists in HTML
 
Nested lists in HTML
  • Currently 0 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Rating: 0/5 (0 votes cast)

Thank you for rating!

You have already rated this page, you can only rate it once!

Your rating has been changed, thanks for rating!

Log in or create a user account to rate this page.


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.

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

 

Read also

Bulleted lists in HTML

Bulleted lists in HTML

Numbered lists in HTML

Numbered lists in HTML

Post comment

basicuse.net
html5_css
106160485398655174790

Quick navigation

General navigation