1 files changed, 119 insertions, 0 deletions
diff --git a/files/ru/web/html/block-level_elements/index.html b/files/ru/web/html/block-level_elements/index.html
new file mode 100644
index 0000000000..ce640274c9
--- /dev/null
+++ b/files/ru/web/html/block-level_elements/index.html
@@ -0,0 +1,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">&lt;p&gt;Этот абзац — блочный элемент; его цвет фона покрашен, чтобы показать родительский элемент абзаца.&lt;/p&gt;</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>