Загрузка...

Div в HTML

После block/inline используем коробку div для группировки.

Почему «бессмысленная» коробка полезна

Карточки часто начинают с div и class.

Прямой ответ

Оберните связанную разметку в div, добавьте class, предпочитайте семантику при ясной роли.

Одна группа-карточка

div вокруг заголовка и абзаца.

Grouping with a card div

html

HTML Code

<div class="card">
<h2>Today</h2>
<p>Practice HTML containers with a simple card.</p>
</div>

Разбор карточки

div группирует
h2/p сохраняют смысл
class = крючок

Обёртка с двумя карточками

Внешняя обёртка, внутренние карточки.

Wrapper with two cards

html

HTML Code

<div class="card-row">
<div class="card">
<h3>Lesson</h3>
<p>Read the notes once.</p>
</div>
<div class="card">
<h3>Practice</h3>
<p>Rebuild the markup from memory.</p>
</div>
</div>

Разбор обёртки

двух уровней достаточно
дети семантические

Предпочитайте смысл

div — запасной вариант, не первый выбор всегда.

Практика

Одна карточка
Две в обёртке
Удалите пустые div
Перечислите три тега, которые div не заменяет

Частые ошибки

суп из div
div вместо p/ul/nav
пустые обёртки

Кратко

общий контейнер
class как крючок
семантика если ясно
без супа

🧠 Проверьте Свои Знания

Готов к Началу

Проверьте Свои Знания

Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему

❓

Вопросы

🎯

70%

Для Прохождения

♾️

∞

Время

🔄

∞

Попытки

📝 Инструкции

Внимательно прочитайте каждый вопрос
Выберите лучший ответ на каждый вопрос
Вы можете пересдавать тест столько раз, сколько захотите
Ваш прогресс будет показан вверху

Язык