1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
|
---
title: Блочные элементы
slug: Web/HTML/Block-level_elements
tags:
- HTML
- HTML5
- Web
- Начинающий
- Разработка
translation_of: Web/HTML/Block-level_elements
---
<p><span class="seoSummary">Исторически HTML-элементы было принято делить на блочные и <a href="/ru/docs/Web/HTML/Строчные_Элементы" title="/en-US/docs/HTML/inline_elements">строчные</a>. Блочные элементы занимают всю ширину своего родителя (контейнера), формально создавая «блок» (отсюда и название). </span></p>
<p>Браузеры обычно отображают блочные элементы с переводом строки до и после элемента. Блочные элементы можно представить в виде стопки коробок. Следующий пример демонстрирует, как это выглядит:</p>
<h2 id="Block-level_Example" name="Block-level_Example"><span style="color: #333333; margin-left: -3px; text-transform: none;">Блочные элементы</span></h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><p>Этот абзац — блочный элемент; его цвет фона покрашен, чтобы показать родительский элемент абзаца.</p></pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: css">p { background-color: #8ABB55; }
</pre>
<p>{{ EmbedLiveSample('Block-level_Example') }}</p>
<h2 id="Использование">Использование</h2>
<ul>
<li>Блочные элементы могут отображаться только внутри элемента {{ HTMLElement("body") }} и его потомков.</li>
</ul>
<h2 id="Блочные_против_строчных">Блочные против строчных</h2>
<p>Существует несколько ключевых отличий между блочными и строчными элементами:</p>
<dl>
<dt>Содержание</dt>
<dd>Как правило, блочные элементы могут содержать строчные элементы и другие блочные элементы. <span id="result_box" lang="ru"><span class="hps">Неотъемлемой частью этого</span> <span class="hps">структурного</span> <span class="hps">различия</span> <span class="hps">является идея, что</span> <span class="hps">блочные элементы</span> <span class="hps">создают</span> <span class="hps">«более крупную»</span> <span class="hps">структуру</span><span>, чем</span> <span class="hps">встроенные элементы</span><span>.</span></span></dd>
<dt>Форматирование по умолчанию</dt>
<dd>По умолчанию блочные элементы начинаются с новой строки, а строчные могут начинаться в любом месте строки.</dd>
</dl>
<p><span id="result_box" lang="ru"><span class="hps">Разделение элементов на</span> <span class="hps">блочные</span> и строчные <span class="hps">использовалось в спецификации</span> <span class="hps">HTML </span><span class="hps">до версии</span> <span class="hps">4.01</span><span>.</span> <span class="hps">В</span> <span class="hps">HTML5</span> <span class="hps">это</span> противопоставление <span class="hps">заменено более</span> <span class="hps">сложным набором </span><a href="/ru/docs/Web/Guide/HTML/Content_categories">категорий контента</a><span>.</span> <span class="atn hps">Категория </span></span>«<span lang="ru"><span>строчных</span></span>» элементов<span lang="ru"> примерно соответствует категории <a href="https://developer.mozilla.org/ru/docs/Web/Guide/HTML/Content_categories#Phrasing_content">текстового контента</a>, а для </span>«блочных» элементов прямого соответствия нет, но «блочные» и «строчные» элементы вместе <span lang="ru"><span class="hps">примерно соответствуют</span> <span class="hps">категории</span> <a href="/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток">потокового контента</a><span class="hps"> в</span> <span class="hps">HTML5 (т.е., грубо говоря, «блочные» элементы — это потоковый контент минус текстовый контент).</span><span> </span></span><span lang="ru">Кроме того, <span class="hps">есть</span> и <span class="hps">другие категории, например, интерактивный контент.</span></span></p>
<h2 id="Элементы">Элементы</h2>
<p><span id="result_box" lang="ru"><span class="hps">Ниже приведён</span> <span class="hps">полный список всех</span> блочных <span class="hps">элементов</span> <span class="hps">(хотя </span></span>формально <span lang="ru"><span class="hps">понятие </span></span>«<span lang="ru"><span>блочный</span></span>» не применяется <span lang="ru"><span class="hps">к</span> новым <span class="hps">элементам</span> <span class="hps">в HTML5</span><span>)</span><span>.</span></span></p>
<div class="threecolumns">
<dl>
<dt>{{ HTMLElement("address") }}</dt>
<dd><span class="short_text" id="result_box" lang="ru"><span class="hps">Контактная информация.</span></span></dd>
<dt>{{ HTMLElement("article") }} {{ HTMLVersionInline(5) }}</dt>
<dd><span class="short_text" id="result_box" lang="ru"><span class="hps">Содержание</span> <span class="hps">статьи.</span></span></dd>
<dt>{{ HTMLElement("aside") }} {{ HTMLVersionInline(5) }}</dt>
<dd><span class="short_text" id="result_box" lang="ru"><span class="hps">Побочное содержание.</span></span></dd>
<dt>{{ HTMLElement("blockquote") }}</dt>
<dd><span class="short_text" id="result_box" lang="ru"><span class="hps">Длинная («блочная») цитата.</span></span></dd>
<dt>{{ HTMLElement("details") }} {{ HTMLVersionInline(5) }}</dt>
<dd>Раскрывающийся блок с подробностями.</dd>
<dt>{{ HTMLElement("dialog") }} {{ HTMLVersionInline(5) }}</dt>
<dd>Диалоговое окно.</dd>
<dt>{{ HTMLElement("dd") }}</dt>
<dd><span class="short_text" id="result_box" lang="ru"><span class="hps">Описание определения.</span></span></dd>
<dt>{{ HTMLElement("div") }}</dt>
<dd><span class="short_text" id="result_box" lang="ru"><span class="hps">Фрагмент документа.</span></span></dd>
<dt>{{ HTMLElement("dl") }}</dt>
<dd><span class="short_text" id="result_box" lang="ru"><span class="hps">Список определений.</span></span></dd>
<dt>{{ HTMLElement("dt") }}</dt>
<dd>Термин в списке определений.</dd>
<dt>{{ HTMLElement("fieldset") }}</dt>
<dd>Группирование элементов формы.</dd>
<dt>{{ HTMLElement("figcaption") }} {{ HTMLVersionInline(5) }}</dt>
<dd><span class="short_text" id="result_box" lang="ru"><span class="hps">Описание для тега {{ HTMLElement("figure") }}.</span></span></dd>
<dt>{{ HTMLElement("figure") }} {{ HTMLVersionInline(5) }}</dt>
<dd><span class="short_text" id="result_box" lang="ru">Группирование медиа-контента <span class="hps">с подписью</span></span> (см. {{ HTMLElement("figcaption") }}).</dd>
<dt>{{ HTMLElement("footer") }} {{ HTMLVersionInline(5) }}</dt>
<dd><span class="short_text" id="result_box" lang="ru"><span class="hps">Нижняя часть (</span></span>«<span class="short_text" lang="ru"><span class="hps">подвал</span></span>»<span class="short_text" lang="ru"><span class="hps">) раздела или страницы</span><span class="hps">.</span></span></dd>
<dt>{{ HTMLElement("form") }}</dt>
<dd><span class="short_text" id="result_box" lang="ru"><span class="hps">Форма ввода.</span></span></dd>
<dt>{{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }}, {{ HTMLElement("h6") }}</dt>
<dd><span class="short_text" id="result_box" lang="ru"><span class="hps">Заголовки от первого до шестого уровня.</span></span></dd>
<dt>{{ HTMLElement("header") }} {{ HTMLVersionInline(5) }}</dt>
<dd><span class="short_text" id="result_box" lang="ru"><span class="hps">Верхняя часть (</span></span>«<span class="short_text" lang="ru"><span class="hps">шапка</span></span>»<span class="short_text" lang="ru"><span class="hps">) раздела</span> <span class="hps">или</span><span class="hps"> страницы.</span></span></dd>
<dt>{{ HTMLElement("hgroup") }} {{ HTMLVersionInline(5) }}</dt>
<dd>Группирование заголовков раздела или страницы.</dd>
<dt>{{ HTMLElement("hr") }}</dt>
<dd><span class="short_text" id="result_box" lang="ru"><span class="hps">Горизонтальная разделительная линия.</span></span></dd>
<dt>{{ HTMLElement("li") }}</dt>
<dd>Пункт списка.</dd>
<dt>{{ HTMLElement("main") }} {{ HTMLVersionInline(5) }}</dt>
<dd>Содержит основной контент, уникальный для страницы.</dd>
<dt>{{ HTMLElement("nav") }} {{ HTMLVersionInline(5) }}</dt>
<dd>Содержит навигационные ссылки.</dd>
<dt>{{ HTMLElement("ol") }}</dt>
<dd><span class="short_text" id="result_box" lang="ru"><span class="hps">Упорядоченный список.</span></span></dd>
<dt>{{ HTMLElement("p") }}</dt>
<dd><span class="short_text" id="result_box" lang="ru"><span class="hps">Текстовый абзац.</span></span></dd>
<dt>{{ HTMLElement("pre") }}</dt>
<dd><span class="short_text" id="result_box" lang="ru"><span class="hps">Предварительно форматированный текст.</span></span></dd>
<dt>{{ HTMLElement("section") }} {{ HTMLVersionInline(5) }}</dt>
<dd><span class="short_text" id="result_box" lang="ru"><span class="hps">Раздел</span> <span class="hps">веб-страницы</span><span>.</span></span></dd>
<dt>{{ HTMLElement("table") }}</dt>
<dd><span class="short_text" id="result_box" lang="ru"><span class="hps">Таблица.</span></span></dd>
<dt>{{ HTMLElement("ul") }}</dt>
<dd><span class="short_text" id="result_box" lang="ru"><span class="hps">Неупорядоченный список.</span></span></dd>
</dl>
</div>
<p> </p>
<h3 id="See_also" name="See_also">Смотрите также</h3>
<ul>
<li><a href="/ru/docs/Web/HTML/Строчные_Элементы">Строчные элементы</a></li>
</ul>
|
