initial commit

1 files changed, 133 insertions, 0 deletions

diff --git a/files/uk/web/html/block-level_elements/index.html b/files/uk/web/html/block-level_elements/index.html
new file mode 100644
index 0000000000..2e1b9eef0f
--- /dev/null
+++ b/files/uk/web/html/block-level_elements/index.html
@@ -0,0 +1,133 @@
+---
+title: Блокові елементи
+slug: Web/HTML/Block-level_elements
+tags:
+  - HTML
+  - HTML5
+translation_of: Web/HTML/Block-level_elements
+---
+<p><span class="seoSummary">В HTML (<strong>Hypertext Markup Language </strong>— мові гіпертекстової розмітки) елементи зазвичай бувають або блокові, або <a href="/en-US/docs/HTML/Inline_elements">рядкові</a>. Блокові елементи, або блок-елементи, займають всю ширину батьківського блока (контейнера), утворюючи таким чином блок. У цій статті пояснюється, як це працює. </span></p>
+
+<p>Браузери зазвичай відображають кожний блоковий елемент з нового рядка. Це можна уявити як стопку блоків, у якій всі блоки розміщуються над або один під одним. </p>
+
+<div class="note">
+<p>Блокові елементи завжди починаються з нового рядка та займають всю доступну ширину (розтягуються ліворуч та праворуч настільки, наскільки це дозволяє ширина вікна браузера).</p>
+</div>
+
+<p>Приклади нижче показують, як працюють блокові елементи: </p>
+
+<h2 id="Block-level_Example" name="Block-level_Example">Блокові елементи</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>Типово, блоковий елемент починається з нового рядка, тоді як рядковий елемент може починатися будь-де в рядку. </dd>
+ <dt>Модель контенту</dt>
+ <dd>Зазвичай блокові елементи можуть містити в собі рядкові елементи, а також інші блокові елементи. Ця структурна відмінність відображає ідею, що блокові елементи утворюють "більші" структури, ніж рядкові елементи.</dd>
+</dl>
+
+<p>Розрізнення "блокові елементи vs. рядкові елементи" вживається в специфікаціях HTML до версії 4.01. В HTML5 це протиставлення заміщене більш складними поняттями <a href="/en-US/docs/HTML/Content_categories">категорій контенту</a>. Блокові елементи здебільшого відповідають категорії <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="/en-US/docs/HTML/Content_categories#Flow_content">flow content</a> (розміщення контенту) в HTML5, тоді як рядкові — категорії <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a> (текст і його розмітка), з декількома додатковими категоріями.</p>
+
+<h2 id="Елементи">Елементи</h2>
+
+<p>Нижче подається повний перелік усіх блокових елементів HTML (технічно, у нових елементів, представлених у HTML5, "блоковість" вже не визначається). </p>
+
+<div class="threecolumns">
+<dl>
+ <dt>{{ HTMLElement("address") }}</dt>
+ <dd>Контактна інформація.</dd>
+ <dt>{{ HTMLElement("article") }} {{ HTMLVersionInline(5) }}</dt>
+ <dd>Вміст статті.</dd>
+ <dt>{{ HTMLElement("aside") }} {{ HTMLVersionInline(5) }}</dt>
+ <dd>Бічний контент.</dd>
+ <dt>{{ HTMLElement("blockquote") }}</dt>
+ <dd>Довга блок-цитата.</dd>
+ <dt>{{ HTMLElement("canvas") }} {{ HTMLVersionInline(5) }}</dt>
+ <dd>Канва для малюнків.</dd>
+ <dt>{{ HTMLElement("dd") }}</dt>
+ <dd>Описує термін в переліку визначень.</dd>
+ <dt>{{ HTMLElement("div") }}</dt>
+ <dd>Поділ документа.</dd>
+ <dt>{{ HTMLElement("dl") }}</dt>
+ <dd>Перелік визначень.</dd>
+ <dt>{{ HTMLElement("dt") }}</dt>
+ <dd>Термін в переліку визначень.</dd>
+ <dt>{{ HTMLElement("fieldset") }}</dt>
+ <dd>Лейбл (назва) для набору полів.</dd>
+</dl>
+
+<dl>
+ <dt>{{ HTMLElement("figcaption") }} {{ HTMLVersionInline(5) }}</dt>
+ <dd>Підпис зображення.</dd>
+ <dt>{{ HTMLElement("figure") }} {{ HTMLVersionInline(5) }}</dt>
+ <dd>Групує медіаконтент з підписом (див. {{ HTMLElement("figcaption") }}).</dd>
+ <dt>{{ HTMLElement("footer") }} {{ HTMLVersionInline(5) }}</dt>
+ <dd>Секція або футер сторінки. </dd>
+ <dt>{{ HTMLElement("form") }}</dt>
+ <dd>Форма введення.</dd>
+ <dt>{{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }}, {{ HTMLElement("h6") }}</dt>
+ <dd>Заголовки рівнів 1-6.</dd>
+ <dt>{{ HTMLElement("header") }} {{ HTMLVersionInline(5) }}</dt>
+ <dd>Секція або хедер сторінки.</dd>
+ <dt>{{ HTMLElement("hgroup") }} {{ HTMLVersionInline(5) }}</dt>
+ <dd>Групує контент хедера.</dd>
+ <dt>{{ HTMLElement("hr") }}</dt>
+ <dd>Горизонтальна роздільна лінія.</dd>
+ <dt>{{ HTMLElement("li") }}</dt>
+ <dd>Пункт переліку.</dd>
+ <dt>{{ HTMLElement("main") }}</dt>
+ <dd>Містить основний контент, унікальний для цього документу.</dd>
+ <dt>{{ HTMLElement("nav") }}</dt>
+ <dd>Містить навігацію посилань. </dd>
+</dl>
+
+<dl>
+ <dt>{{ HTMLElement("noscript") }}</dt>
+ <dd>Контент, який буде відображатися, якщо скрипт не підтримується або вимкнений. </dd>
+ <dt>{{ HTMLElement("ol") }}</dt>
+ <dd>Нумерований список (перелік).</dd>
+ <dt>{{ HTMLElement("output") }} {{ HTMLVersionInline(5) }}</dt>
+ <dd>Вихідні дані форми.</dd>
+ <dt>{{ HTMLElement("p") }}</dt>
+ <dd>Параграф.</dd>
+ <dt>{{ HTMLElement("pre") }}</dt>
+ <dd>Попередньо відформатований текст.</dd>
+ <dt>{{ HTMLElement("section") }} {{ HTMLVersionInline(5) }}</dt>
+ <dd>Секція веб-сторінки.</dd>
+ <dt>{{ HTMLElement("table") }}</dt>
+ <dd>Таблиця.</dd>
+ <dt>{{ HTMLElement("tfoot") }}</dt>
+ <dd>Футер таблиці.</dd>
+ <dt>{{ HTMLElement("ul") }}</dt>
+ <dd>Ненумерований список (перелік).</dd>
+ <dt>{{ HTMLElement("video") }} {{ HTMLVersionInline(5) }}</dt>
+ <dd>Відеоплеєр.</dd>
+</dl>
+</div>
+
+<h3 id="See_also" name="See_also"><br>
+ Також дивися:</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTML/Inline_elements">Рядкові елементи</a></li>
+</ul>