HTML代码验证不通过，格式化工具与Intellisense提示li标签错误，求排查

问题描述 #

我尝试使用VS Code的Prettyfier工具时，发现HTML代码格式存在问题。我认为代码没有错误，但在线网页格式化工具均报错，Intellisense也提示我的li结束标签对应了错误的起始标签，请问错误出在哪里？

原问题代码 #

<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8" />
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1, shrink-to-fit=no"
        />
        <title>A Meaningful Page Title</title>

        <!-- Bootstrap CSS -->
        <link
            rel="stylesheet"
            href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
            integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N"
            crossorigin="anonymous"
        />

    </head>
    <body class="d-flex flex-column">
        <header>
            <nav
                class="navbar navbar-expand-md navbar-light border-bottom bg-light parent"
            >
                <a class="navbar-brand" href="#">Home</a>
                <button
                    class="navbar-toggler"
                    type="button"
                    data-toggle="collapse"
                    data-target="#navbarNav"
                    aria-controls="navbarNav"
                    aria-expanded="false"
                    aria-label="Toggle navigation"
                >
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNav">
                    <ul class="navbar-nav w-100 d-flex">
                        <li class="nav-item">
                            <a href="#" class="nav-link active">Feature</a>
                        </li>
                        <li class="ml-auto">
              <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="#">Login</a>
              </li>
              <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="#">Register</a>
              </li>
            </li>
                    </ul>
                </div>
            </nav>
        </header>

    </body>
</html>

错误分析 #

问题出在导航栏的<ul>列表结构中，存在无效的<li>标签嵌套：

• 代码中写了<li class="ml-auto">，但未给这个<li>添加任何合法内容，反而直接在其内部嵌套了两个<li class="nav-item">标签。
• 根据HTML语法规则，<li>只能作为<ul>或<ol>的直接子元素，不能嵌套其他<li>标签，这就是格式化工具和Intellisense报错的根本原因。

修正后的代码 #

<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8" />
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1, shrink-to-fit=no"
        />
        <title>A Meaningful Page Title</title>

        <!-- Bootstrap CSS -->
        <link
            rel="stylesheet"
            href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
            integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N"
            crossorigin="anonymous"
        />

    </head>
    <body class="d-flex flex-column">
        <header>
            <nav
                class="navbar navbar-expand-md navbar-light border-bottom bg-light parent"
            >
                <a class="navbar-brand" href="#">Home</a>
                <button
                    class="navbar-toggler"
                    type="button"
                    data-toggle="collapse"
                    data-target="#navbarNav"
                    aria-controls="navbarNav"
                    aria-expanded="false"
                    aria-label="Toggle navigation"
                >
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNav">
                    <ul class="navbar-nav w-100 d-flex">
                        <li class="nav-item">
                            <a href="#" class="nav-link active">Feature</a>
                        </li>
                        <!-- 将ml-auto类直接应用到第一个需要右对齐的li标签，替代无效嵌套 -->
                        <li class="nav-item ml-auto">
                            <a class="nav-link active" aria-current="page" href="#">Login</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link active" aria-current="page" href="#">Register</a>
                        </li>
                    </ul>
                </div>
            </nav>
        </header>

    </body>
</html>

修正逻辑 #

删除原来无效的<li class="ml-auto">嵌套，将ml-auto类直接添加到第一个需要右对齐的<li>标签上。这样既保留了Bootstrap实现元素右对齐的布局效果，又完全符合HTML的标签嵌套规范，格式化工具和Intellisense的报错会随之消失。

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