将<h>标记放在<a> tag(document type does not allow element &#34;h2&#34;)</a> </h>中时出现验证错误

Question

使用此代码时：

<div class="menu">
            <ul id="mainnav">
                <li><h2><a href="dir1/" >AAAAA</a></h2>
                    <ul>
                        <li><a href="dir1/xxx.php"><h3>xxx</h3></a></li>
                        <li><a href="dir1/xxx2.php"><h3>xxx2</h3></a></li>
                        <li><a href="dir1/hxxx3.php"><h3>hxxx3</h3></a></li>
                    </ul>
                </li>

我在验证说我应该将<h2>置于<a>之外时收到错误消息。 文档类型不允许元素<h2> 当我这样做时，验证通过没有任何问题，但我的造型中断。 有没有办法保持验证和样式？ 这是menu和<h2>

的样式

.menu  li a{
        font: 100%  Helvetica, Arial, sans-serif;
        display:inline-block;
        color: #fff;
        }
    .menu li a:hover{
        color: #014661;
        background: url('../images/menu1.png') center left no-repeat;
    }        
        .menu li a h2{
            font-size: 92%;
            padding: 8px 18px;
            font-weight: bold;
            text-transform: uppercase;
        }
                .menu h3{
            font-size: 87%;
            font-weight: bold;
            text-transform: uppercase;
        }
        .menu li a h2:hover{
            background: url('../images/menu2.png') center right no-repeat;
        }      

Answer 1

虽然批准的答案可能有效，但这是不好的做法。验证错误是问题的证据。

<a>是一个内联元素<h2>是一个块元素

内联元素不能直接放在body元素内;它们必须完全嵌套在块级元素中。

内联元素不应包含包含块级元素。

Answer 2

h2位于a之外，您需要将a h2样式表中的所有匹配项更改为h2 a，因此样式表中的顺序与HTML中的顺序相匹配，并将应用样式。