Блочные теги в HTML - это основа построения страницы. Они занимают все пространство родительского элемента (как минимум родителем будет тег body), имеют свойство display: block и свойство width: auto.

К блочным элементам относятся:

• body,
• header,
• footer,
• section,
• aside,
• div,
• p,
• blockquote
• списки ul, ol, dl, а также их элементы, хотя свойство display для элементов li имеет значение list-item,
• заголовки h1 ... h6.
• figure и figcaption
• form
• pre

Абзацы - тег <p>

Это блочный элемент, который предназначен для форматирования основного текста. В книгах, журналах, газетах текст статьи всегда разбит на абзацы, для того чтобы как-то выделить отдельные смысловые блоки. То же самое касается текста на сайте - чтобы он нормально воспринимался, все содержимое страницы необходимо делить на абзацы, добавляя в разметку теги <p> ... </p>.

По умолчанию в браузерах эти теги имеют отступы сверху и снизу, которые позволяют визуально отделить один абзац от другого.

Пример:

Вживую:

На скриншоте видно, что абзацы выровнялись вдоль всей страницы. Поскольку текста в них немного, то каждый абзац занимает всего одну строку. Если текста будет больше, то, соответственно, текст расположится в 2, 3, 4 или более строк. Но даже между нашими короткими абзацами видны отступы. Внизу картинки показан открытый Инспектор элементов, в котором слева мы видим html-код, а справа - css-свойства, которые существуют в любом браузере для каждого элемента по умолчанию, а также те, которые будем назначать сами. Открыть Инспектор можно с помощью сочетания клавиш Ctrl + Shift + I или F12, а также сделав правый клик на элементе и выбрав опцию "Просмотреть код" (Chrome, Opera, Yandex, Saphari) или "Исследовать элемент" (Firefox).

На картинке справа подчеркнуты свойства display: block, -webkit-margin-before и  -webkit-margin-after со значением 1em, т.е. это значение соответствует размеру шрифта, установленного в браузере по умолчанию. Обычно это 16px. Собственно, именно это значение видно для выделенной полосы сверху и снизу блока в виде margin 16px.

Поскольку для форматирования текста одних абзацев недостаточно, разбавим текст заголовками.

Заголовки на странице

Заголовков в HTML существует 6 видов. все они начинаются с h и цифры, т.е. h1, h2,  h3 ... и до h6. Они также являются блочными, и занимают все пространство до конца родительского элемента, даже, если текста в них намного меньше. На скриншоте ниже видно, что h1, выделенный голубым, занимает всю строку.

Самым главным и самым большим по размеру является h1. С точки зрения SEO, т.е. оптимизации сайта для продвижения его в поисковых системах, h1 на странице должен быть только один. Как правило, это название страницы (Главная, О компании, Контакты и т.п.) или название статьи, например,  "Блочные теги в HTML".

Заголовки различаются по размеру. Это свойство в css определяются как font-size. Например, для h1, как видно из картинки это свойство составляет 2em.

Заголовки, как и абзацы имеют по умолчанию отступ сверху и снизу, определяемый значением свойства margin (выделены оранжевым цветом), а также выделение жирным цветом, которое задается css-свойством font-weight: bold.

Основные блоки - <div>

Для разметки страницы очень важны элементы, которые будут, по сути "кирпичиками", т.е. основой визуального форматирования. Для этого существуют блоки, задаваемые тегом <div>. Они также имеют свойство display: block, но при этом не имеют отступов.

На скриншоте видно, что div имеет свойство display: block, а вот свойство  margin у него отсутствует.

Div-ы - это важные элементы для формирования внешнего вида сайта, хотя, казалось бы, ничем особым они не выделяются. Дело все в том, что этим элементам чаще всего задают такие атрибуты, как class и id, для того, чтобы задать собственные css-свойства. Например, div-ы c class="dark" будут в примере ниже иметь рамку (border: 2px solid #aaa), темный цвет фона (background-color), светлый цвет текста (color: #aaa), а также внутренние отступы (padding: 10px)  и внешние отступы, которые отодвигают блоки друг от друга (margin: 10px).

Кстати, у тега body тоже по умолчанию есть отступы в 8px:

Блочная цитата <blockquote>

Не слишком часто используемый элемент. Но в некоторых случаях незаменимый. <blockquote> - это блочная цитата, которая по умолчанию имеет отступы сверху и снизу, как у абзацев, но также у нее есть отступы справа и слева в 40px (см. скриншот), которые смещают ее по сравнению с остальным текстом как бы внутрь. Поэтому используют этот тег для выделения текста, который может быть некой цитатой: либо кого-то из известных людей, либо какого-то текста из статьи, который стоит выделить, либо чужого текста в сообщении на форуме.

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

Скопируйте код, вставьте в свой текстовый редактор и попробуйте самостоятельно исследовать элемент.

Тег <pre>

Тег <pre> происходит от слов "преформатированный текст", т.е. это тот текст, который браузер выводит в том виде, в котором вы его видите в текстовом редакторе. Как правило, его используют для форматирования кода, который вы копируете и с этого сайта в том числе. Можно в этом теге выводить стихи или поздравления, но нужно также помнить, что браузер по умолчанию выводит текст внутри <pre> моноширинным шрифтом. Здесь вы увидите работу тега <pre>, который подсвечивает код и расставляет номера строк с помощью JavaScript.

Пример:

О списках вы можете прочитать в другой статье, также к блочным элементам относятся тег form и теги для описания и стилевого оформления изображений или кода figure и figcption. Остальные элементы рассмотрим несколько позже.

Кроме блочных, в HTML часто используются строчные, или линейные, теги и строчно-блочные элементы, которые находятся как бы между ними, т.к. имеют свойство display: inline-block.