Помимо того что есть некоторые "договоренности" какой тэг для чего нужен
нюансы в стилях по умолчанию в каждом браузере
т.е. тэг имеет предустановки по отступам к примеру в каждом браузере
обычно это сбрасывается при помощи нормализации
Стили по умолчанию для p (будут выведены отступы снизу и сверху автоматом )
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
Стили по умолчанию для div (два дива склеятся)
display: block;
Ну и вопрос вложенности тэгов.
обычно применяется тэг обертка и в нем разное (связанное по смыслу) содержимое ложится в свой тэг для того что бы можно было их по разному изменять и позиционировать используя контейнер а не по отдельности каждый элемент
<style>
.left_block{
width: 50%;
float: left;
}
.right_block{
width: 50%;
float: right;
}
</style>
<div class="container">
<div class="left_block">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eaque ex voluptatem dolores sequi animi non magni ipsam dignissimos quas molestias at consequuntur consequatur dolore explicabo minima, recusandae deleniti officiis voluptatum.</p>
<button>Посмотреть подробнее</button>
</div>
<div class="right_block">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate pariatur omnis illum nam voluptates corrupti iure quis amet. Soluta hic modi ad, corrupti maiores harum rem incidunt explicabo, nobis accusamus?</p>
<button>Посмотреть подробнее</button>
</div>
</div>
два блока рядом через стили можно передвигать весь блок
