Validation error while putting <h> tag inside <a> tag(document type does not allow element "h2")
- by makmour
when using this code:
<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>
I get an error while validating saying that I should put <h2> outside of <a>.
document type does not allow element <h2>
When I do this validation passes without any problems but my styling breaks.
Is there a way to keep both validation and styling?
This is styling for menu and <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;
}
