Блочные элементы html (block elements) отображаются как прямоугольник и занимают всю доступную им ширину. Высота блочных элементов зависит от их содержимого.
В начале и конце блочных элементов в html (<div>, <h1>-<h6>, <p> и другие) идет перевод на новую строку. На странице это будет выглядеть как абзац.
Это отличается от строчных элементов html (<span>, <a>) — которые будут отобраться последовательно друг за другом, в одну строку.
Список блочных элементов html
* отмечены блочные элементы, появившиеся в HTML5
| Селектор | Использование | Селектор | Использование |
|---|---|---|---|
| article* | Содержимое статьи | header* | Заголовок страницы или секции |
| aside* | Aside Content | hgroup* | Groups Header Information |
| blockquote | Цитирование | hr | Горизонтальная линия |
| body | Содержимое страницы | li | Элемент списка |
| br | Перевод на новую строку (разрыв строки) | map | Image Map |
| button | Кнопка | object | Встроенный объект |
| canvas* | Область для рисования | ol | Нумерованный список |
| caption | Заголовок таблицы | output* | Form Output |
| col | Столбец таблицы | p | Абзац |
| colgroup | Группа столбцов таблицы | pre | Отформатированный текст |
| dd | Описание термина | progress* | Отображение прогресса выполняемой задачи |
| div | Блок | section* | Раздел страницы |
| dl | Список терминов | table | Таблица |
| dt | Термин (определение) | tbody | Содержимое таблицы |
| embed | Внешний контент (встроенный элемент) | textarea | Область для ввода текста в форме |
| fieldset | Fieldset Label | tfoot | Нижняя часть таблицы |
| figcaption* | Figure Caption | th | Строка заголовока таблицы |
| figure* | Groups Media Content and Caption | thead | Загололовок таблицы |
| footer* | Нижняя часть страницы или секции | tr | Строка таблицы |
| form | Форма для ввода данных | ul | Ненумерованный список |
| h1–6 | Заголовок (уровня 1–6) | video* | Видео плейер |
Виды HTML элементов
HTML включает большое число элементов, каждый из которых имеет соответствующий ему тег и используется для структурирования документа.
Все элементы HTML разделяются на две категории:
- Строчные элементы (Inline elements)
- Блочные элементы (Block-level elements)
English
Русский
Чисто теоритически, можно себя как то успокоить мыслью что больше нету блочных и инлайновых, что бы сильно не тревожится о разноглассии терминологий. Но практически, прочитыв и осознав суть статьи, ничего ведь не поменяеться, будем использовать те же ресеты и делать нативно блочные элементы инлайновыми, как раньше.