Элемент <a>не допускается в качестве дочернего элемента элемента <dl>в этом контексте - ошибка валидатора

Question

После запуска w3Validator в HTML 5 (экспериментальная) кодировка windows-1252 я получил следующую ошибку -

Строка 11, столбец 20: Элемент a не разрешен в качестве дочернего элемента элемента dl в этом контексте,(Подавление дальнейших ошибок из этого поддерева.)

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

Если <a> не может содержать дочерний элемент <dl>, то как должен использоваться код?

ПРИМЕЧАНИЕ:код выше используется js, поэтому в коде не должно быть серьезных изменений.

ОБНОВЛЕНИЕ: весь код такой, как показано ниже -

<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

Все ответы, опубликованные до сих пор, неверны.

Якоря (или <a> элементы) по умолчанию встроены, да - но вы можете изменить это, используя некоторые базовые CSS:

a {
  display: block;
}

Кроме того, с HTML5 разрешены якоря на уровне блоков. Это означает, что вы можете делать классные вещи, как:

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

И ваш код должен быть проверен как HTML5. (Этот код всегда работал в браузерах, он был недействителен до HTML5.)

реальная причина, по которой он не проверяется (и, следовательно, ответ на ваш вопрос) очень проста: элементы <dt> и <dd> могут отображаться только как прямые дочерние элементы элемента <dl>.

Answer 2

Список определений имеет очень специфическую структуру

<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>

Единственное место, куда вы можете поместить ссылку, находится внутри DT или DD. Если я правильно помню, DD считается элементом уровня блока и ни в коем случае не входит в LINK.

EDIT : Как @Mathias Bynens указывает в комментариях, только Элементы DT и DD могут появляться как прямые дочерние элементы DL.

Также в HTML5 допускается размещение встроенных тегов вокруг элементов уровня блока

Answer 3

В основном это проблема с блочными и встроенными элементами . Соглашения заключаются в том, что вы не должны помещать элемент блока внутри встроенного элемента, тег <a> является встроенным, а элемент <dl> (а элементы <dt> и <dd>, которые должны быть внутри него) - блоком. То, что вы делаете, сродни размещению элемента <strong> или <a> вокруг <form> или <div>, что, очевидно, кажется неправильным.

«Ответ» на ваш вопрос заключается в том, чтобы поместить тег <a> внутри отдельных тегов <dt> и <dd> и иметь только теги термина определения и определения внутри вашего списка определений.

Не обращать внимания : не осознавал, что вы пытались проверить HTML 5. В этом случае ответ заключается в том, что вы не можете поместить что-либо кроме <dt> и <dd> в качестве прямых потомков <dl>.