HTML Code: Numbered Nested List

I thought that sharing this template might save someone, some time, some day. I know too little about CSS code to solve some of the issues I encountered applying the other solutions. By comparison, this is a simple method, easily learned for later application.

Read the source document (link below) to understand the logic behind the code. Briefly, to move to a lower class of ordered list class <ol>, leave the list <li> 'hanging' when opening another <ol> and close each list using </li> only when that ordered list numbering is complete. Only display size is determined by the heading markers here: <h2> </h2>. In Write Freely environment, the post title is still defined by placing a hash character, followed by a space, before the very first line of the post: # Post Title.

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.


  1. Physical

    1. Major Detail

      1. Minor Detail

      2. Minor Detail

    2. Major Detail

      • Minor bullet


  2. Psychological

    1. Major Detail

      1. Minor Detail

      2. Minor Detail

    2. Major Detail

      1. Minor Detail


  3. Social

    1. Major Detail

      1. Minor Detail

      2. Minor Detail

    2. Major Detail

      1. Minor Detail

    Find me on my Rebased server @bushgrad@zov.oti.st to let me know about omissions, errors, different solutions.

    #writefreely #code #blog #website #write

    Source:

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

    Donate using Liberapay