Блочные элементы
Описание
Исторически HTML-элементы было принято делить на блочные и строчные.
Блочные элементы занимают всю ширину своего родителя (контейнера), формально создавая «блок», отсюда и название. Браузеры обычно отображают блочные элементы с переводом строки до и после элемента. Блочные элементы можно представить в виде стопки книг.
Как правило, блочные элементы могут содержать строчные элементы и другие блочные элементы. Неотъемлемой частью этого структурного различия является идея, что блочные элементы создают «более крупную» структуру, чем встроенные элементы.
Ниже в таблице приведён полный список всех блочных элементов (формально понятие «блочный» не применяется к новым элементам в HTML5).
Таблица
| Тег | Описание |
|---|---|
| Тег <address> | Контактная информация автора/владельца документа или статьи |
| Тег <article> | Раздела страницы, содержащий завершенную, независимую композицию |
| Тег <aside> | Контент в стороне, где содержимое не является основным на странице по смыслу |
| Тег <blockquote> | Выделяет текст как цитату, применяется для описания больших цитат |
| Тег <center> | Выравнивает содержимое по центру относительно родительского элемента. Устарел и не поддерживается в HTML5. Вместо него используйте CSS стили |
| Тег <dd> | Устанавливает описание термина |
| Тег <details> | Определяет дополнительную информацию, которую пользователь может просмотреть или скрыть |
| Тег <dialog> | Определяет диалоговое окно/интерактивный элемент в котором можно выводить сообщение или форму |
| Тег <dir> | Определяет список директорий (системных папок). Устарел и не поддерживается в HTML5. Вместо него используйте тег <ul> |
| Тег <div> | Группирует элементы документа с целью изменения вида содержимого через CSS стили |
| Тег <dl> | Элемент-контейнер, внутри которого находятся термин и его описание |
| Тег <dt> | Используется для задания термина |
| Тег <fieldset> | Группа связанных элементов в форме |
| Тег <figcaption> | Заголовок/описание для тега <figure> |
| Тег <figure> | Контейнер для группирования любых элементов (иллюстраций, фрагментов кода, схем, графиков, диаграмм и др.) |
| Тег <footer> | Определяет нижний колонтитул («подвал») веб-сайта или раздела |
| Тег <form> | Используется для создания формы на веб-странице |
| Тег <h1>-<h6> | Заголовки разного уровня: <h1>, <h2>, <h3>, <h4>, <h5> и <h6>. Тег <h1> является наиболее важным заголовком первого уровня, а тег <h6> служит для обозначения заголовка шестого уровня и является наименее значимым |
| Тег <header> | Задаёт «шапку» сайта или верхнюю часть раздела веб-страницы |
| Тег <hgroup> | Используется для группирования заголовков веб-страницы или раздела. Устарел и не поддерживается в HTML5 |
| Тег <hr> | Горизонтальная линия, которая по своему виду зависит от используемых параметров, а также браузера |
| Тег <isindex> | Отображает в текущем документе строки поиска по сайту. Устарел и не поддерживается в HTML5. Для установки однострочного поля для ввода следует использовать тег <input> в сочетании с тегом <label> |
| Тег <li> | Элемент маркированного или нумерованного списка |
| Тег <main> | Контейнер для основного содержимого документа |
| Тег <nav> | Контейнер для навигационных элементов по веб-странице или по всему сайту |
| Тег <ol> | Устанавливает нумерованный (упорядоченный) список |
| Тег <p> | Определяет текстовый абзац |
| Тег <pre> | Выводит текст без форматирования, с сохранением пробелов и переносов текста |
| Тег <ruby> | Предназначен для добавления небольшой аннотации сверху или снизу от заданного текста |
| Тег <section> | Определяет логическую область (раздел) страницы, обычно с заголовком |
| Тег <table> | Контейнер для тегов, определяющих содержимое таблицы |
| Тег <tr> | Контейнер для создания строки в таблице |
| Тег <ul> | Устанавливает маркированный (неупорядоченный) список |