Урок 11 из 70 · 8 мин

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

Почему одни элементы встают с новой строки, а другие — нет, и зачем нужны «пустые» div и span.

Коробки

Я хочу карточку товара: название, фото, цена — всё в одной рамочке.
Ника
Для рамочки нужна коробка, в которую всё сложить. Если подходящего по смыслу тега нет — div.

Понятие

Блочный

Понятие

Строчный

Тег

<div>

Что это: Универсальная блочная коробка.
Зачем: Сгруппировать элементы для оформления, когда нет подходящего тега.
Как: HTML
<div class="card"> <h3>Пенал</h3> <p>320 ₽</p> </div>
Так это выглядит

Тег

<span>

Что это: Универсальная строчная коробка.
Зачем: Отметить кусочек текста — например, цену.
Как: HTML
<p>Пенал — <span class="price">320 ₽</span></p>
Так это выглядит

Ника
Сначала ищи тег по смыслу (nav, article, strong). div и span — когда смысла нет.

Ваш ход

Задание

Оберни карточку в div с классом card, а цену внутри абзаца — в span с классом price.

<h2>Стикеры</h2>
<p>Всего 260 ₽</p>

<h2>Стикеры</h2>
<p>Всего 260 ₽</p>

Результат обновляется при вводе

ПрактикаОбязательное задание

Выберите все подходящие варианты.

Какие элементы по умолчанию блочные?

Домашнее заданиеДля закрепления

Выберите один ответ.

В каком случае div — правильный выбор?