initial commit

1 files changed, 148 insertions, 0 deletions

diff --git a/files/ru/web/html/element/div/index.html b/files/ru/web/html/element/div/index.html
new file mode 100644
index 0000000000..27ca73a4ae
--- /dev/null
+++ b/files/ru/web/html/element/div/index.html
@@ -0,0 +1,148 @@
+---
+title: '<div>: Элемент разделения контента'
+slug: Web/HTML/Element/div
+tags:
+  - Element
+  - HTML
+  - Web
+  - div
+  - Веб
+  - Группировка контента
+  - Потоковый контент
+  - Разделение контента
+  - Справка
+  - Элемент
+translation_of: Web/HTML/Element/div
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong>Элемент разделения контента HTML</strong> (<code><strong>&lt;div&gt;</strong></code>) является универсальным контейнером для <a href="/ru/docs/Web/Guide/HTML/Content_categories#Потоковый_контент">потокового контента</a>. Он не влияет на контент или макет до тех пор, пока не будет стилизован с помощью {{glossary("CSS")}}.</span></p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/div.html","tabbed-standard")}}</div>
+
+<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p>
+
+<p>Являясь "чистым" контейнером, элемент <code>&lt;div&gt;</code>, по существу, не представляет ничего. Между тем, он используется для группировки контента, что позволяет легко его стилизовать, используя атрибуты {{htmlattrxref("class")}} или {{htmlattrxref("id")}}, помечать раздел документа, написанный на разных языках (используя атрибут {{htmlattrxref("lang")}}), и так далее.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ru/docs/Web/Guide/HTML/Content_categories">Категории контента</a></th>
+   <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Потоковый_контент">Потоковый контент</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#Явный_контент">явный контент</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенное содержимое</th>
+   <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Потоковый_контент">Потоковый контент</a> или (в {{glossary("WHATWG")}} HTML), если родительским является элемент {{HTMLElement("dl")}}: один или несколько элементов {{HTMLElement("dt")}}, сопровождаемых одним или более элементами {{HTMLElement("dd")}}, в ряде случаев смешанных с элементами {{HTMLElement("script")}} и {{HTMLElement("template")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Пропуск тега</th>
+   <td>Ни одного; Оба тега, открывающий и закрывающий, являются обязательными.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенные родительские элементы</th>
+   <td>Любой элемент, который разрешает <a href="/ru/docs/Web/Guide/HTML/Content_categories#Потоковый_контент">потоковый контент</a> в качестве содержимого..<br>
+    Или (в {{glossary("WHATWG")}} HTML): элемент {{HTMLElement("dl")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенные роли ARIA</th>
+   <td>Любые</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM-интерфейс</th>
+   <td>{{domxref("HTMLDivElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<p>К этому элементу применимы <a href="/ru/docs/Web/HTML/Общие_атрибуты">глобальные атрибуты</a>.</p>
+
+<div class="blockIndicator note">
+ <p><strong>Заметка:</strong> Атрибут <code>align</code> устарел и вышел из употребления; не используйте его больше. Вместо этого, вам следует использовать свойства {{glossary("CSS")}} или методы, такие как <a href="/ru/docs/Web/CSS/CSS_Grid_Layout">CSS Grid</a> или <a href="/ru/docs/Learn/CSS/CSS_layout/Flexbox">CSS Flexbox</a> для выравнивания и изменения положения элементов <code>&lt;div&gt;</code> на странице.</p>
+</div>
+
+<h2 id="Примечание">Примечание</h2>
+
+<ul>
+ <li>Элемент <code>&lt;div&gt;</code> следует использовать только в том случае, если никакой другой семантический элемент (такой как {{HTMLElement("article")}} или {{HTMLElement("nav")}}) не подходит.</li>
+</ul>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Простой_пример">Простой пример</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p&gt;Любой тип контента. Например,
+  &amp;lt;p&amp;gt;, &amp;lt;table&amp;gt;. Все что угодно!&lt;/p&gt;
+&lt;/div&gt; </pre>
+
+<p>Результат будет выглядеть так:</p>
+
+<p>{{EmbedLiveSample("Простой_пример", 650, 60)}}</p>
+
+<h3 id="Стилизованный_пример">Стилизованный пример</h3>
+
+<p>Этот пример создаёт прямоугольник с тенью, применяя стили к  <code>&lt;div&gt;</code> с помощью CSS. Заметьте, что использование атрибута {{htmlattrxref("class")}} на элементе <code>&lt;div&gt;</code> даёт применение стилей <code>"shadowbox"</code> (в дословном переводе означает "теневая коробка") к элементу.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div class="shadowbox"&gt;
+  &lt;p&gt;Вот очень интересная заметка в прекрасном прямоугольнике с тенью.&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">.shadowbox {
+  width: 15em;
+  border: 1px solid #333;
+  box-shadow: 8px 8px 5px #444;
+  padding: 8px 12px;
+  background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc);
+}</pre>
+
+<h4 id="Результат">Результат</h4>
+
+<p>{{EmbedLiveSample("Стилизованный_пример", 650, 120)}}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'grouping-content.html#the-div-element', '&lt;div&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Нет изменений с последнего "snapshot" (снапшот или снимок - состояние сохраненное в определенный момент времени)</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-div-element', '&lt;div&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Атрибут <code>align</code> больше не поддерживается</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.5.4', '&lt;div&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("html.elements.div")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Семантические секционные элементы: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}</li>
+ <li>Элемент {{HTMLElement("span")}} для стилизации фразового контента.</li>
+</ul>