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

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

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

Блокові елементи завжди починаються з нового рядка та займають всю доступну ширину (розтягуються ліворуч та праворуч настільки, наскільки це дозволяє ширина вікна браузера).

Приклади нижче показують, як працюють блокові елементи: 

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

HTML

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

CSS

p { background-color: #8ABB55; }

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

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

Блокові проти рядкових

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

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

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

Елементи

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

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


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