---
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>