Have Geek Brain

Validation error when placing <h> tag inside <a> tag (document type does not allow "h2" element)

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 am getting an error claiming that I should be putting <h2>

out <a>

. the document type does not allow the element. <h2>

When I do this check it passes without problems, but my style breaks. Is there a way to keep both validation and styling? This is the style 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;
        }
+2


a source to share


2 answers


From h2

outside, a

you need to change all occurrences in the style sheet from a h2

to h2 a

, so the order in the style sheet matches the order in the HTML, and the style will be applied.



+4


a source


While the approved answer may work, it is bad practice. A validation error is evidence of a problem.

<a>

is an inline element <h2>

is a block element



Inline elements cannot be placed directly inside a body element; they must be fully nested within block-level elements.

Inline elements should never contain block-level elements.

+7


a source






More articles:


All Articles