HTML list is showing III where it should be II

Question

I am just using simple HTML to code something like this:

This is what I wanted to code:

But this is the output I’m getting:

The section 1.2 should have started from II instead of III because of the outer ordered list.

This is the code I am using:

<h1>Table of Contents For My Book</h1>
<ol>
  <li>Chapter One</li>
  <ol type="I">
    <li>Section 1.1</li>
    <ol type="i">
      <li>First Topic</li>
      <li>Second Topic</li>
      <ul>
        <li>subtopic 1</li>
        <li>subtopic 2</li>
      </ul>
    </ol>
    <li>Section1.2</li>
    <li>Section1.3</li>
  </ol>

Your lists aren’t valid. Please [validate your HTML](https://html5.validator.nu/). — Sebastian Simon, Oct 09 '19 at 11:06
move the closing `` of the list item which contains the `ol` to *after* the closing `` of the nested ordered list. Same with the nested `ul` — Johannes, Oct 09 '19 at 11:17

Chüngel · Accepted Answer · 2019-10-09T11:25:27.323

Try nesting the list as follows:

<h1>Table of Contents For My Book</h1>
<ol>
  <li>Chapter One
    <ol type="I">
      <li>Section 1.1
        <ol type="i">
          <li>First Topic</li>
          <li>Second Topic
          <ul>
            <li>subtopic 1</li>
            <li>subtopic 2</li>
          </ul>
         </li>
        </ol>
      </li>
      <li>Section1.2</li>
      <li>Section1.3</li>
    </ol>
  </li>
  <li>Chapter Two</li>
</ol>

HTML list is showing III where it should be II

1 Answers1