Element ol is not allowed here (HTML)- Not sure what's going on

Question

Admittedly, I'm new to coding so I'm sure there may be many issues in my code. The errors that are showing up right now are all " Element ol is not allowed here." If someone can please help me resolve this, it would be greatly appreciated, thank you. My code is listed below:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Paula's Lists</title>
    <link rel="stylesheet" href="lists.css">
    <style>
        .instagramlogo{
            position: absolute;
            width: 50px;
            left: 20px;
            top: 20px;
            cursor: pointer;
        }
        .linkedinlogo{
            position: absolute;
            width: 50px;
            left: 100px;
            top: 20px;
            cursor: pointer;
        }
        * {
            box-sizing: border-box;
        }

        .column1 {
            margin-top: 40px;
            margin-bottom: 20px;
            margin-left: 600px;
            width: 40%;
            padding: 10px;
            border-radius: 25px;
        }
        .column2{
            margin-top: 20px;
            margin-bottom: 20px;
            margin-left: 600px;
            width: 40%;
            padding: 10px;
            border-radius: 25px;
        }
        .column3{
            margin-top: 20px;
            margin-bottom: 20px;
            margin-left: 600px;
            width: 40%;
            padding: 10px;
            border-radius: 25px;
        }
        .column4{
            margin-top: 20px;
            margin-bottom: 20px;
            margin-left: 600px;
            width: 40%;
            padding: 10px;
            border-radius: 25px;
        }
        .column5{
            margin-top: 20px;
            margin-bottom: 20px;
            margin-left: 600px;
            width: 40%;
            padding: 10px;
            border-radius: 25px;
        }
        hr{
            position: center;
            margin-top: 10px;
            border-color: #009688;
            width: 40%;
            margin-left: 31.5%;
        }




    </style>
</head>

<body>
<div class="banner">
    <div class="navbar">
        <a href="https://www.instagram.com/shegonnacode/"><img src="images/pngfind.com-instagram-png-22629.png" alt="Instagram logo" class="instagramlogo"></a>
        <a href="https://www.linkedin.com/in/paula-m-175737200/"><img src="images/pngfind.com-linkedin-png-533561.png" alt="Linkedin logo" class="linkedinlogo"></a>
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="resume.html">Resume</a></li>
            <li><a href="lists.html">Lists</a></li>
            <li><a href="contacts.html">Contact</a></li>
        </ul>
    </div>

    <h1>Paula's Lists</h1>
    <span>Get to know me better with the following lists which showcase my perspectives on tech-related concepts!</span>
    <div class="row">
        <div class="column1" style="background-color:#aaa;">
            <h3>Programming Languages I'd Like to Learn</h3>
            <ol>
                <ol type="1">
                    <li>Python</li>
                </ol>
                <ol type="a">
                    <li>Javascript</li>
                </ol>
                <ol type="A">
                    <li>C</li>
                </ol>
                <ol type="i">
                    <li>Swift</li>
                </ol>
                <ol type="I">
                    <li>PHP</li>
                </ol>
            </ol>
        </div>
        <hr>
        <div class="column2" style="background-color:#bbb;">
            <h3>Career Aspirations</h3>
            <ul style="list-style-type:disc;">
                <li>Software Engineer</li>
            </ul>
            <ul style="list-style-type:circle;">
                <li>Video Game Developer</li>
            </ul>
            <ul style="list-style-type:square;">
                <li>Cyber Security Analyst</li>
            </ul>
        </div>
        <hr>
        <div class="column3" style="background-color:#ccc;">
            <h3>Favorite Language so Far</h3>
            <dl>
                <dt>CSS</dt>
                <dd>CSS stands for Cascading Style Sheets</dd>
            </dl>
        </div>
        <hr>
        <div class="column4" style="background-color:#ddd;">
            <h3>Favorite Class + Topic</h3>
            <ol>
                <li>Introduction to Web Development</li>
                <ul>
                    <li>HTML</li>
                    <li>CSS</li>
                </ul>
            </ol>
        </div>
        <hr>
        <div class="column5" style="background-color:#ddd;">
            <h3>My Inspiration in Tech</h3>
            <ul>
                <li>Elon Musk</li>
                <ul>
                    <li>Founder and CEO of Tesla + SpaceX</li>
                </ul>
            </ul>
        </div>
    </div>
</div>
<script src=https://my.gblearn.com/js/loadscript.js></script>
</body>
</html>

As I stated, I am a noob with coding as I have just begun so I believe it may have something to do with spacing. I have tried to rearrange, but have failed miserably. Any help would be appreciated, thank you!

user3425506 · Answer 1 · 2022-11-01T23:24:42.827

In your code you have

        <ol>
            <ol type="1">
                <li>Python</li>
            </ol>
            <ol type="a">
                <li>Javascript</li>
            </ol>
            <ol type="A">
                <li>C</li>
            </ol>
            <ol type="i">
                <li>Swift</li>
            </ol>
            <ol type="I">
                <li>PHP</li>
            </ol>
        </ol>

You have ol elements directly inside an ol element. You should have li elements as the direct children of ol. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol

You could have

<ol>
  <li>
     <ol type="1">
       <li>Python</li>
     </ol>
  </li>
</ol>

Incorrect HTML often does work and may do what you want but it is likely to be different in different browsers and lead to problems later on.

score 1 · Answer 2 · answered Nov 01 '22 at 23:37

What you're trying to achieve is nesting of <ol> (ordered list).

A nested list or a sublist is a list within a list. The trick to marking nested lists up correctly in HTML is to recognize that the sublist is actually a child of a list item and not of a list.

Start by creating a list. It can be ordered or unordered:

    <ul>
        <li>Python</li>
        <li>JavaScript</li>
        <li>C</li>
        <li>Swift</li>
        <li>PHP</li>
    </ul>

Now add a nested list to the first list item:

<ul>
    <li>Python
      <ul>
        <li>Item</li>
        <li>Item2</li>
      </ul>
    </li>
    <li>JavaScript</li>
    <li>C</li>
    <li>Swift</li>
    <li>PHP</li>
  </ul>

Notice that the sublist is a child and not a sibling of an <li> tag.

And you can keep adding levels:

  <ul>
    <li>Python
      <ul>
        <li>Item</li>
        <li>Item2</li>
        <ul>
            <li>Item 2-1</li>
            <li>Item 2-2</li>
        </ul>
      </ul>
    </li>
    <li>JavaScript</li>
    <li>C</li>
    <li>Swift</li>
    <li>PHP</li>
  </ul>

This is the only correct way of nesting <ol>

Results:

Element ol is not allowed here (HTML)- Not sure what's going on

2 Answers2

Linked