HTML Блочные и встроенные элементы
Каждый элемент HTML имеет значение по умолчанию для отображения в зависимости от типа элемента. По умолчанию для большинства элементов отображается значение блок или встроенный.
Элементы уровня блока
Элемент уровня блока всегда начинается на новой строке и занимает всю имеющуюся ширину (растягивается влево и вправо, насколько это возможно).
Пример
<div>Hello</div>
<div>World</div>
Блочные элементы в HTML:
Встроенные элементы
Встроенный элемент не запускается на новой строке и занимает столько ширины, сколько необходимо.
Это встроенный элемент <span> внутри абзаца.
Пример
<span>Hello</span>
<span>World</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> можно использовать для стиля частей текста:
Пример
<h1>My <span style="color:red">Important</span> Heading</h1>
Теги группирования HTML
| Тег | Описание |
|---|---|
| <div> | Определяет раздел в документе (блок-уровень) |
| <span> | Определяет раздел в документе (встроенный) |