Element <a> not allowed as child of element <dl> in this context - Validator Error

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开发者_StackOverflow</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>

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.

A definition list has a very specific structure

<dl>
  <dt>Definition title<dt>
  <dd>Definition description </dd>

  <dt><a href='#'>Definition title</a><dt>
  <dd>Definition description </dd>

  <dt>Definition title<dt>
  <dd><a href='#'>Definition description</a></dd>
</dl>

The only place you can actually put the LINK is inside either the DT or the DD. If I remember correctly a DD is considered a block level element and doesn't go inside a LINK in any case.

EDIT : As @Mathias Bynens points out in the comments, only DT and DD elements may appear as direct child elements of a DL.

Also putting inline tags around block level elements are allowed in HTML5

Basically it's an issue with block and inline elements. The conventions are that you should not put a block element inside an inline element, an <a> tag is inline and a <dl> ( and the <dt> and <dd> elements that should be inside it) is block. What you are doing is akin to putting a <strong> or <a> element around <form> or <div>, which obviously doesn't seem right.

The 'answer' to your question is to put the <a> tag inside the individual <dt> and <dd> tags and only have the definition term and definition-definition tags inside your definition list.

Disregard: Didn't realise you were trying to validate HTML 5. In this case the answer is that you can't put anything other than <dt> and <dd> as direct children of <dl>.