Все три тега (<div>
, <img>
, <p>
) используются в HTML, но у них разные предназначения и свойства.
Блочный элемент, используется для группировки других элементов и стилизации.
<div class="container">
<p>Привет, мир!</p>
<img src="image.jpg" alt="Картинка">
</div>
Особенности
<div>
- Не несёт семантического значения (просто контейнер).
- По умолчанию блочный (занимает всю ширину).
- Используется для группировки и стилизации через CSS.
Строчно-замещающий элемент, предназначен для вставки картинок.
<img src="logo.png" alt="Логотип">
Особенности
<img>
- Не имеет закрывающего тега (
<img>
– одиночный тег). - Строчно-замещающий (ведёт себя как
inline
, но может иметь размеры). - Заменяется на картинку при отображении страницы.
- Требует
alt
для доступности и SEO. Блочный элемент, предназначен для разметки текста.
<p>Это текст в абзаце.</p>
Особенности
<p>
- Блочный (начинается с новой строки).
- Используется только для текста.
- Внутри нельзя размещать другие блочные элементы (
<div>
, <p>
). Ошибка
<p>Привет, мир!</p>
<p>Второй абзац</p> <!-- Это правильно -->
<p><div>Ошибка!</div></p> <!-- ❌ Нельзя вставлять <div> внутрь <p> -->
Ставь 👍 и забирай 📚 Базу знаний