MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

Переклад не закінчено. Будь ласка, допоможіть перекласти цю статтю з англійської.

В HTML (Hypertext Markup Language — мові гіпертекстової розмітки) елементи зазвичай бувають або блокові, або рядкові. Блокові елементи, або блок-елементи, займають всю ширину батьківського блока (контейнера), утворюючи таким чином блок. У цій статті пояснюється, як це працює. 

Браузери зазвичай відображають кожен блоковий елемент з нового рядка. Це можна уявити як стопку блоків, у якій всі блоки розміщуються над або під один одним. Приклади нижче показують, як працюють блокові елементи: 

Блокові елементи

HTML

<p>Цей параграф є блоковим елементом; колір його бекграунду змінений, щоб показати батьківський елемент параграфа.</p>

CSS

p { background-color: #8ABB55; }

Застосування

  • Блокові елементи можуть існувати тільки всередині елементу <body>.

Блокові vs. рядкові

Є кілька ключових відмінностей між блоковими і рядковими елементами:

Форматування
За замовчанням, блоковий елемент починається з нового рядка, тоді як рядковий елемент може починатися будь-де в рядку. 
Модель контенту
Зазвичай блокові елементи можуть містити в собі рядкові елементи, а також інші блокові елементи. Ця структурна відмінність відображає ідею, що блокові елементи утворюють "більші" структури, ніж рядкові елементи.

Розрізнення "блокові елементи vs. рядкові елементи" вживається в специфікаціях HTML до версії 4.01. В HTML5 це протиставлення заміщене більш складними поняттями категорій контенту. Блокові елементи здебільшого відповідають категорії flow content (розміщення контенту) в HTML5, тоді як рядкові — категорії phrasing content (текст і його розмітка), з декількома додатковими категоріями.

Елементи

Нижче подається повний перелік усіх блокових елементів HTML (технічно, у нових елементів, представлених у HTML5, "блоковість" вже не визначається). 

<address>
Контактна інформація.
<article> HTML5
Вміст статті.
<aside> HTML5
Бічний контент.
<blockquote>
Довга блок-цитата.
<canvas> HTML5
Канва для малюнків.
<dd>
Описує термін в переліку визначень.
<div>
Поділ документа.
<dl>
Перелік визначень.
<dt>
Термін в переліку визначень.
<fieldset>
Лейбл (назва) для набору полів.
<figcaption> HTML5
Підпис зображення.
<figure> HTML5
Групує медіаконтент з підписом (див. <figcaption>).
<footer> HTML5
Секція або футер сторінки. 
<form>
Форма введення.
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
Заголовки рівнів 1-6.
<header> HTML5
Секція або хедер сторінки.
<hgroup> HTML5
Групує контент хедера.
<hr>
Горизонтальна роздільна лінія.
<li>
Пункт переліку.
<main>
Містить основний контент, унікальний для цього документу.
<nav>
Містить навігацію посилань. 
<noscript>
Контент, який буде відображатися, якщо скрипт не підтримується або вимкнений. 
<ol>
Нумерований список (перелік).
<output> HTML5
Вихідні дані форми.
<p>
Параграф.
<pre>
Попередньо відформатований текст.
<section> HTML5
Секція веб-сторінки.
<table>
Таблиця.
<tfoot>
Футер таблиці.
<ul>
Ненумерований список (перелік).
<video> HTML5
Відеоплеєр.


Також дивися:

Мітки документа й учасники

Мітки: 
 Зробили внесок у цю сторінку: mdymytrova
 Востаннє оновлена: mdymytrova,