Блокові елементи
В 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)- Відеоплеєр.