Why is div flying outside of a?

Question

HTML

Hello. There is this part of the markup:

<a class="tasks__item task task--overdue" href="#">
  <header class="task__header">
    <div class="task__name">
      <span class="task__address">Спортивная, 10, 1 подъезд, 17 этаж, 23 квартира</span>
      <span class="task__num">№540042</span>
    </div>
    <div class="task__dates">
      <span class="task__start-date">Поставлена 12 марта</span>
      <span class="task__end-date">До 22 марта</span>
    </div>
  </header>
  <p class="task__description">Контрольное списание показаний ИПУ, осмотр общего имущества в квартирах</p>
  <div class="task__characters">
    <div class="task__character">
      <img class="task__character-photo" src="imgs/task/task__character-photo.png" alt="character-photo" width="132" height="132">
      <div class="task__character-info">
        <div class="task__character-role">Житель:</div>
        <div class="task__character-name">Андрей Михайловский</div>
        <a class="task__character-phone" href="tel:[phone]">[phone]</a>
      </div>
    </div>
    <div class="task__character">
      <img class="task__character-photo" src="imgs/task/task__character-photo.png" alt="character-photo" width="132" height="132">
      <div class="task__character-info">
        <div class="task__character-role">Исполнитель:</div>
        <div class="task__character-name">Алексей Кунгуров</div>
        <a class="task__character-phone" href="tel:[phone]">[phone]</a>
      </div>
    </div>
  </div>
</a>

If you open it in a browser (opened it in the latest versions of chrome and firefox), then the following picture occurs

. The task_characters block flies out of tasks_item.
https://codepen.io/anon/pen/VXZZgE

Answer 1

a > div
https://stackoverflow.com/questions/3092610/div-in...
UPD: they are trying to explain to you that wrapping such blocks with the a tag is bad.
The browser sees the first closing tag </a>and processes the markup normally, not like yours.

Answer 2

<div onclick="window.open('http://google.com, '_blank');"></div>

so it's probably better