Очень неинтуитивная непредвиденная ошибка закрывающего тега в действительном шаблоне

Это мой первый день изучения angular, и я столкнулся с очень неинтуитивным сообщением об ошибке, в котором говорится:

Неперехваченная ошибка: ошибки синтаксического анализа шаблона: неожиданный закрывающий тег "p". Это может произойти, когда тег уже закрыт другим тегом. Для получения дополнительной информации см. https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags ("Номер {{ i + 1 }}: {{ phoneNumber }} [ ОШИБКА ->]

"): ng:///AppModule/AddressCardComponent.html@5:0

Ошибка выдается в действительном HTML-шаблоне, который выглядит следующим образом:

<p>Phones:</p>
<p *ngFor="let phoneNumber of user.phone; index as i">
  <h3>
      Number {{ i + 1 }}: {{ phoneNumber }}
  </h3>
</p>

а в самом компоненте это выглядит так:

@Component({
  selector: 'app-address-card',
  templateUrl: './address-card.component.html',
  styleUrls: ['./address-card.component.scss']
})
export class AddressCardComponent implements OnInit {

  user: any;

  constructor() {
    this.user = {
      name: 'Foo Bar',
      title: 'Software Developer',
      address: '1234 Main St., State, City 610010',
      phone: [
        '123-123-1234',
        '456-546-4574'
      ]
    }
  }

  ngOnInit() {
  }

}

Круто то, что если я изменяю внутренний тег h3 на span или a, он работает идеально, как и ожидалось, тогда как когда внутренний тег p, h3, h2, h1, div и т. д., он просто ломается с той же ошибкой.

Похоже, ему просто не нравятся определенные теги, лол

Так или иначе,

1. Я делаю что-то не так здесь? Если да, то как мне исправить шаблон? Что мне не хватает?

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

PS: я использую Angular v7.0.5, если это имеет значение.