HTML Блочные и встроенные элементы
Каждый HTML элемент имеет отображаемое значение по умолчанию в зависимости от типа элемента.
Есть два значения отображения: блочное (block) и встроенное (inline).
Блочные элементы
Блочный элемент всегда начинается с новой строки и занимает всю доступную ширину (растягивается влево и вправо насколько это возможно).
Это блочные элементы в HTML:
Встроенные элементы (строчные)
Встроенный элемент не начинается с новой строки, и он занимает лишь столько ширины, сколько нужно.
Это <span> элемент внутри параграфа.
Это встроенные элементы в HTML:
Примечание: Встроенный элемент не может содержать в себе блочный элемент!
Элемент <div>
Элемент <div> часто используется как контейнер для других элементов HTML.
Элемент <div> не имеет обязательных атрибутов, но style, class и id являются общими.
При использовании вместе с CSS элемент <div> может использоваться для стилизации блоков содержимого:
Пример
<div style="background-color:black;color:white;padding:20px;">
<h2>Лондон</h2>
<p>Лондон - столица Англии. Это самый густонаселенный город Соединенного Королевства, в котором проживает более 13 миллионов жителей.</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>?
