HTML Блокові та вбудовані елементи
Кожен HTML елемент має відображуване значення за замовчуванням, залежно від типу елемента.
Є два значення відображення: блокове (block) та вбудоване (inline).
Блокові елементи
Блоковий елемент завжди починається з нового рядка і займає всю доступну ширину (розтягується вліво та вправо, наскільки це можливо).
<div> є блоковим елементом.Це блокові елементи в HTML:
Вбудовані елементи (рядкові)
Вбудований елемент не починається з нового рядка, і він займає лише стільки ширини, скільки потрібно.
Це <span> елемент в середині параграфу.
Це вбудовані елементи в HTML:
Примітка: Вбудований (рядковий) елемент не може містити в собі блоковий елемент!
Елемент <div>
Елемент <div> часто використовується як контейнер для інших елементів HTML.
Елемент <div> не має необхідних атрибутів, але style, class та id є загальними.
При використанні разом із CSS елемент <div> може використовуватися для стилювання блоків вмісту:
Приклад
<div style="background-color:black;color:white;padding:20px;">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>
Спробуйте самі »
Елемент <span>
Елемент <span> - це вбудований контейнер, який використовується для розмітки частини тексту або частини документа.
Елемент <span> не має необхідних атрибутів, але style, class та id є загальними.
При використанні разом із CSS елемент <span> можна використовувати для стилізації частин тексту:
Приклад
<p>My mother has <span style="color:blue;font-weight:bold">blue</span> eyes and my father has <span style="color:darkolivegreen;font-weight:bold">dark green</span> eyes.</p>
Спробуйте самі »
Підсумок
- Є два значення відображення: блочне та вбудоване
- Блочний елемент завжди починається з нового рядка і займає всю доступну ширину
- Вбудований елемент не починається з нового рядка, і він займає лише стільки ширини, скільки потрібно
- Елемент
<div>є блоковим і часто використовується як контейнер для інших елементів HTML - Елемент
<span>- це вбудований контейнер, який використовується для розмітки частини тексту або частини документа
HTML теги
| Тег | Опис |
|---|---|
| <div> | Визначає розділ у документі (блочний елемент) |
| <span> | Визначає розділ у документі (вбудований елемент) |
Для отримання повного списку всіх доступних HTML тегів відвідайте HTML Довідник тегів на нашому сайті W3Schools українською.
Запитання для самоконтролю
- Які є способи відображення HTML-елементів на вебсторінці?
- Який HTML-елемент починається з нового рядка і займає всю доступну ширину на сторінці?
- Який HTML-елемент не починається з нового рядка і займає лише стільки ширини, скільки потрібно?
- Яким елементом є елемент
<div>? - Яким елементом є елемент
<span>? - Чи може вбудований елемент містити в собі блоковий елемент?
- Чи може блоковий елемент містити в собі вбудований елемент?
- Для чого найчастіше використовується HTML-елемент
<div>? - Для чого найчастіше використовується HTML-елемент
<span>?
