Блочная модель документа⁠⁠

В современной верстке выделяется 2 типа элементов:

• Блочные (block level) - в основном, отвечают за каркас страницы.

• Строчные (inline level) - в основном, помогающие нам при стилизации страницы и тд.

Блочные элементы

Они занимают всю доступную ширину родителя в которого вложены, из-за чего выталкивают соседствующие элементы не могут располагаться с ними на одной строке и переносятся под них.

<div class="block">Block Element #1</div>
<div class="block">Block Element #2</div>
<div class="block">Block Element #3</div>

Основные блочные элементы:

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

<div>div element</div>
<p>p element</p>
<hr>

Списочные теги

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

Маркированный список:

<ul>
<li>Lorem ipsum.</li>
<li>Similique, voluptas?</li>
<li>Enim, et!</li>
</ul>

Нумерованный список:

<ol>
<li>Lorem ipsum.</li>
<li>Beatae, fugit?</li>
<li>Id, molestiae.</li>
</ol>

Список описаний ( документация ):

<dl>
<dt>Lorem</dt>
<dd>Lorem ipsum dolor sit.</dd>
<dt>Lorem ipsum.</dt>
<dd>Lorem ipsum dolor sit.</dd>
</dl>

Теги заголовков

Теги заголовков имеют семантическое значение для страницы, тег <h1> имеет наибольшее значение, является главным заголовком HTML документа. Использовать заголовки нужно в правильной последовательности от h1 до h6, если вы используете младший заголовок без старшего это будет ошибкой. Теги заголовков тоже являются блочными.

<h1>Lorem ipsum.</h1>
<h2>Lorem ipsum.</h2>
<h3>Lorem ipsum.</h3>
<h4>Lorem ipsum.</h4>
<h5>Lorem ipsum.</h5>
<h6>Lorem ipsum.</h6>

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

<div class="post">
<div class="post-title">
<h2>Hello world</h2>
</div>
<div class="post-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, ducimus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, ducimus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, ducimus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, ducimus.</p>
</div>
</div>

Из примера выше видно, что в div c классом post вложенные другие элементы. На самом деле, вложенность может достигать любого уровня, но не стоит сильно увлекаться так как чем больше будет вложенность тем сложнее будет браузеру и компьютеру это все обрабатывать.

Как делать нельзя?

Нельзя вкладывать теги <p> друг в друга.

<p>
Lorem ipsum dolor sit amet.
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
</p>

Нельзя вкладывать заголовки друг в друга.

<h2>
Some title
<h3>Some subtitle</h3>
<h3>Some another subtitle</h3>
</h2>

ВАЖНО!

Сами по себе элементы не являются ни блочными ни строчными, а также не имеют никаких стилей сами по себе. HTML - это все лишь разметка. Для всех тегов существуют стандартные стили которые по-умолчанию настроены в браузере. За стилизацию элементом всегда отвечает язык CSS который и будет определять то блочный элемент или строчный, а также множество других стилей.

P.S. О строчных элементах напишу в следующем посте.