HTML报错‘Element ol is not allowed here’，求新手友好的解决方案

错误根源 #

你碰到的Element ol is not allowed here错误，本质是违反了HTML列表的嵌套语法规范：

• 有序列表(<ol>)和无序列表(<ul>)的直接子元素只能是列表项(<li>)，不能直接嵌套另一个<ol>或<ul>。
• 你在第一个列表模块中，把多个<ol>直接放在了外层<ol>内部，这完全不符合HTML的语法要求。

修正方案 #

1. 修复第一个列表的结构问题 #

如果你只是想展示不同编号格式的独立列表，不需要用外层<ol>包裹，直接依次编写每个单独的列表即可：

<div class="column1" style="background-color:#aaa;">
    <h3>Programming Languages I'd Like to Learn</h3>
    <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>
</div>

2. 优化嵌套列表的可读性 #

你后面的嵌套列表（比如<ol>里放<ul>）是符合规范的，但可以调整写法让结构更清晰，把内层列表和上级列表项的文本放在同一个<li>中：

<div class="column4" style="background-color:#ddd;">
    <h3>Favorite Class + Topic</h3>
    <ol>
        <li>Introduction to Web Development
            <ul>
                <li>HTML</li>
                <li>CSS</li>
            </ul>
        </li>
    </ol>
</div>

完整修正后的代码 #

<!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{
            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 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>
        </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
                    <ul>
                        <li>HTML</li>
                        <li>CSS</li>
                    </ul>
                </li>
            </ol>
        </div>
        <hr>
        <div class="column5" style="background-color:#ddd;">
            <h3>My Inspiration in Tech</h3>
            <ul>
                <li>Elon Musk
                    <ul>
                        <li>Founder and CEO of Tesla + SpaceX</li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</div>
<script src=https://my.gblearn.com/js/loadscript.js></script>
</body>
</html>

额外提示 #

• 列表嵌套的正确逻辑：<ol>/<ul> → <li> → 可包含文本、其他元素（包括内层<ol>/<ul>）
• 建议用CSS统一管理列表样式，避免重复写style="list-style-type:xxx"，让代码更简洁易维护。

内容的提问来源于stack exchange，提问作者kalilinuxus