Aninhamento Hierarquia

Aninhamento em HTML significa colocar uma tag dentro da outra, porém não é qualquer tag que podemos colocar dentro de outra, existe uma hierarquia por trás delas, por exemplo:

<p> 
    <em>texto<em>
    <p> texto2</p> 
</p>

Podemos ver no exemplo acima que a tag <em></em>(usada para dar enfase em um texto) é pertencente a Tag <p></p>(usada para criar um parágrafo).

Também é possível notar que há um fluxo, onde as tags são lidas por ordem de cima para baixo.

Por fim o posicionamento de elementos, podemos ver que a tag <em></em> não está em uma outra linha como na tag <p></p>, existem tags que quebram a linha, então mesmo que colocarmos a tag <p></p> uma do lado da outra, visualmente vai dar quebra de linha.