В HTML (Hypertext Markup Language — мові гіпертекстової розмітки) елементи зазвичай бувають або блокові, або рядкові. Блокові елементи, або блок-елементи, займають всю ширину батьківського блока (контейнера), утворюючи таким чином блок. У цій статті пояснюється, як це працює.
Браузери зазвичай відображають кожний блоковий елемент з нового рядка. Це можна уявити як стопку блоків, у якій всі блоки розміщуються над або один під одним.
Блокові елементи завжди починаються з нового рядка та займають всю доступну ширину (розтягуються ліворуч та праворуч настільки, наскільки це дозволяє ширина вікна браузера).
Приклади нижче показують, як працюють блокові елементи:
Блокові елементи
HTML
<p>Цей параграф є блоковим елементом; колір його бекграунду змінений, щоб показати батьківський елемент параграфа.</p>
CSS
p { background-color: #8ABB55; }
Застосування
- Блокові елементи можуть існувати тільки всередині елементу
<body>.
Блокові проти рядкових
Є кілька ключових відмінностей між блоковими і рядковими елементами:
- Форматування
- Типово, блоковий елемент починається з нового рядка, тоді як рядковий елемент може починатися будь-де в рядку.
- Модель контенту
- Зазвичай блокові елементи можуть містити в собі рядкові елементи, а також інші блокові елементи. Ця структурна відмінність відображає ідею, що блокові елементи утворюють "більші" структури, ніж рядкові елементи.
Розрізнення "блокові елементи 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- Відеоплеєр.