Чем отличается div от span
<div> — это блочный элемент, а <span> — строчный. Блочный элемент занимает всю доступную ширину и начинается с новой строки, строчный — занимает только ширину своего содержимого и не разрывает строку.
Аналогия из жизни:
<div>— это коробка, которая всегда ставится на отдельную полку.<span>— это наклейка, которую можно приклеить прямо на слово в тексте, не нарушая строку.
Сравнение
| Критерий | <div> |
<span> |
|---|---|---|
| Тип элемента | Блочный (block) | Строчный (inline) |
| Поведение | Начинается с новой строки, занимает всю ширину | Остаётся в потоке текста |
| Вложенность | Может содержать блочные и строчные элементы | Только строчные элементы |
| Типичное применение | Обёртка для секций, групп элементов | Выделение части текста |
| width/height | Работают | Не работают (нужен display: inline-block) |
Пример
Пример
<div style="background: lightblue;">
Этот блок занимает всю ширину.
<span style="color: red;">А это выделенное слово</span> внутри текста.
</div>
<div style="background: lightyellow;">
Этот блок начинается с новой строки.
</div>
Семантическая замена
В HTML5 вместо универсального <div> рекомендуется использовать семантические теги (<header>, <nav>, <main>, <article>, <section>, <footer>), когда содержимое имеет смысловую нагрузку. <div> остаётся для случаев, когда нужна обёртка без семантики.
На собеседовании: ключевое отличие —
<div>блочный (новая строка, вся ширина),<span>строчный (внутри текста). Согласно спецификации, строчный элемент не может содержать блочные. В HTML5 лучше использовать семантические теги вместо<div>где это возможно.