----

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