Publish Numbered Nested Lists Using HTML

While there are other solutions using CSS code, this is a simple method to render numbered nested lists.

To move to a lower class of ordered list class.

 <ol>

 <li>

Leave the list 'hanging' when opening nested list.

 <ol>

Close each list using the code below, only when the lists (all nested lists) are complete.

 </li>

Display size is determined by the heading markers here:

 <h2> </h2>

Here is the code template:

  <h2>Benefits of Dancing</h2>
<p>Paragraph text here.</p>
<br>
<ol><h2><li>Physical</h2><ol type="a"><!-- 'hanging' </li> tag, closing tag not here! -->
  <h3><li>Major Detail</h3><ol type="i"><!-- 'hanging' </li> tag, closing tag not here! -->
        <h4><li>Minor Detail</h4></li>
       <h4><li>Minor Detail</h4></li></ol>
    <h3><li>Major Detail</h3></li><ul><!-- Here's the closing </li> tag -->
          <h4><li>Minor bullet</h4></li></ul></ol>
<br>

<h2><li>Psychological</h2><ol type="a"><!-- 'hanging' </li> tag, closing tag not here! -->
   <h3><li>Major Detail</h3><ol type="i"><!-- 'hanging' </li> tag, closing tag not here! -->
        <h4><li>Minor Detail</h4></li>
        <h4><li>Minor Detail</h4></li></ol>
   <h3><li>Major Detail</h3></li><ol type="i"><!-- Here's the closing </li> tag -->
           <h4><li>Minor Detail</h4></li></ol></ol>
<br>

<h2><li>Social</h2></li><ol type="a"><!-- Here's the closing </li> tag -->
    <h3><li>Major Detail</h3><ol type="I"><!-- 'hanging' </li> tag, closing tag not here! -->
        <h4><li>Minor Detail</h4></li>
        <h4><li>Minor Detail</h4></li></ol>
    <h3><li>Major Detail</h3></li><ol type="i"><!-- Here's the closing </li> tag -->
            <h4><li>Minor Detail</h4></li></ol></ol>
 

In the example, mixed unordered (bullets) with ordered (numbered) lists. The upper case Roman and lower case Roman types are also useful. Bullet markers will default in order: disc (1st order), circle (2nd order), square (3rd order), or none (4th order). The order can be overridden by expressly defining the bullet marker:

 <ul style="list-style-type:disc;">
  

The code above renders like this,

Benefits of Dancing

Paragraph text here.

Physical

Major Detail

Minor Detail

Minor Detail

Major Detail

Minor bullet

Psychological

Major Detail

Minor Detail

Minor Detail

Major Detail

Minor Detail

Social

Major Detail

Minor Detail

Minor Detail

Major Detail

Minor Detail

✪ ✪ ✪ 

References:

1. MDN Web Docs, Mozilla Foundation The Ordered List Element
2. w3schools, Refsnes Data Unordered List element (type)