Самозакрывающийся тэг глотает своего соседа

Question

Если 2 тега являются самозакрывающимися, должны ли они находиться в одной и той же позиции в иерархии или следующий тег должен быть дочерним по отношению к первому?

Я всегда думал, что обе структуры синтаксически одинаковы :

Образец 1

<div>
<div class="bordered"></div>
<div class="bordered"></div>
</div>

Образец 2

<div>
<div class="bordered"/>
<div class="bordered"/>
</div>

Однако jsFiddle говорит мне, что 2-й такой же, как :

Пример 3

<div>
<div class="bordered">
  <div class="bordered"></div>
</div>
</div>

Я обнаружил это поведение, когда обновил jquery в npm зависимостях. В то время как jquery версии до 3.4.1 преобразовали Образец 2 в Образец 1, самая новая (3.5.0) преобразовывает Образец 2 в Образец 3.

Какое из этих поведений является правильным?

Answer 1

DIV не является пустым элементом (как <br> is), поэтому в современном HTML не должно быть самозакрывающимся .

движок браузера может попытаться исправить ситуацию, но обычно <div .../> означает <div>. Таким образом, закрывающий </div> будет вставлен разумно , что является общим техническим термином, означающим «не в том месте, но автоматически».