Question

After running w3Validator on HTML 5 (Experimental) windows-1252 encoding,
I got the following error –

Line 11, column 20: Element a not
allowed as child of element dl in this
context. (Suppressing further errors
from this subtree.)

<a href="#link"><dt>Link</dt><dd>Sub heading of the link</dd></a>

If <a> can not contain child element <dl> then how should the code be used?

NOTE: the above code is used by js, so there sould not be major change in code.

UPDATE: the whole code is as below –

<div id="something">
    <dl>
        <a href="#link1"><dt>title1</dt><dd>Sub heading1</dd></a>
        <a href="#link2"><dt>title2</dt><dd>Sub heading2</dd></a>
        <a href="#link3"><dt>title3</dt><dd>Sub heading3</dd></a>
        <a href="#link4"><dt>title4</dt><dd>Sub heading4</dd></a>
        <a href="#link5"><dt>title5</dt><dd>Sub heading5</dd></a>
        <a href="#link6"><dt>title6</dt><dd>Sub heading6</dd></a>
    </dl>
</div>

Answer 1

All the answers posted so far are wrong.

Anchors (or <a> elements) are inline by default, yes — but you can change that by using some basic CSS:

a {
  display: block;
}

In addition to that, as of HTML5, block level anchors are allowed. This means you can do cool things like:

<a href="#">
 <h1>Foo</h1>
 <p>Bar</p>
</a>

And have your code validate as HTML5. (This code has always worked in browsers, it was just not valid before HTML5.)

The real reason it doesn’t validate (and thus, the answer to your question) is very simple: <dt> and <dd> elements may only appear as direct children of a <dl> element.