#11. Контейнеры: div и span — блочные и строчные элементы

Все теги, которые мы разобрали, что-то значили: <p> — абзац, <ul> — список, <img> — картинка.
А <div> и <span> — контейнеры без смысла и без собственного вида. Их задача — группировать содержимое, чтобы потом оформить его через CSS. Но сначала — ключевое понятие, которое объясняет разницу между ними.

Блочные и строчные элементы

Элементы делятся на два типа поведения:

• Блочные — начинаются с новой строки и занимают всю доступную ширину: <p>, заголовки из урока #5, списки, таблицы, сам <div>.
• Строчные (inline) — встают в строку друг за другом и занимают ширину по содержимому: <strong> и <em> из урока #6, ссылки, картинки, сам <span>.

Схематично разницу можно изобразить так. Блочные элементы — коробки друг под другом, каждая занимает всю ширину страницы:

<------------------- ширина страницы ------------------->

+----------------------------------------+
|                  h1                    |
+----------------------------------------+
+----------------------------------------+
|               p (текст)                |
+----------------------------------------+
+----------------------------------------+
|              ul (список)               |
+----------------------------------------+

Строчные — маленькие коробки внутри строки, они не переносят текст на новую строку:

+----------------------------------------+
|  Текст  +--------+  текст  +-----+     |
|         | strong |         | em  |     |
|         +--------+         +-----+     |
+----------------------------------------+

Два блочных элемента:

Каждый начинается с новой строки. А строчные идут потоком, в одну строку:

первый второй третий — как слова в предложении.

div — блочный контейнер

<div> оборачивает группу элементов в один блок — например, чтобы выделить шапку сайта или его раздел:

<div>
    <h2>Шапка сайта</h2>
    <p>Здесь логотип и меню.</p>
</div>

<div>
    <h2>Основной контент</h2>
    <p>Здесь статья.</p>
</div>

Сами по себе эти <div> ничего не меняют: без CSS страница выглядит так же, как без них. Их ценность проявится, когда мы будем задавать блокам фоны, рамки и расположение через CSS.

span — строчный контейнер

<span> выделяет кусок текста внутри строки, когда для него нет подходящего смыслового тега:

<p>Старая цена: 500 руб., новая цена: <span>350 руб.</span></p>

Правило вложенности: строчный элемент можно вложить в блочный, а блочный в строчный — нельзя.

Наглядно:

можно:                     нельзя:

+------------------+       +--------------------------------+
| p                |       | span                           |
|  +------------+  |       |  +--------------------------+  |
|  |    span    |  |       |  |  p (блок внутри строки)  |  |
|  +------------+  |       |  +--------------------------+  |
+------------------+       +--------------------------------+

div или семантические теги?

Раньше всю структуру страницы верстали сплошными <div>. В HTML5 появились осмысленные аналоги: <header>, <nav>, <footer> и другие — познакомимся с ними в следующем уроке.

Практика

Возьмите свою страницу-статью и оберните её части в <div>: шапка, основной текст, подвал. Один фрагмент текста внутри абзаца оберните в <span>. Чтобы увидеть границы блоков, временно добавьте каждому <div> атрибут style="background: yellow" — это уже CSS, настоящий разбор которого ждёт нас в отдельной части курса (так же как в CSS относится и стиль border="1" для таблиц в уроке #10).