Теги <div> и <span> в HTML являются блочным и строчным контейнерами соответственно и широко используются для группировки и стилизации элементов на веб-страницах.

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

Тег <div> - Блочный контейнер

Тег <div> представляет собой блочный контейнер, который используется для группировки и структурирования других элементов. Он является универсальным блочным контейнером и часто используется для создания блочных секций веб-страницы.

<div>
 <h1>Заголовок страницы</h1>
 <p>Это абзац текста в блочном контейнере.</p>
</div>

Тег <span> - Строчный контейнер

Тег <span> является строчным контейнером и используется для выделения или стилизации отдельных частей текста или других строчных элементов.

<p>Это <span style="color: blue;">голубой</span> текст.</p>

Группировка с тегом <div>

Тег <div> позволяет группировать элементы для применения стилей, добавления отступов и создания блочных структур.

<div class="контейнер">
 <p>Этот текст находится внутри блочного контейнера.</p>
 <ul>
   <li>Пункт списка 1</li>
   <li>Пункт списка 2</li>
 </ul>
</div>

Стилизация с тегом <span>

Тег <span> часто используется для применения стилей к отдельным частям текста или для выделения элементов.

<p>Это <span class="выделение">выделенный</span> текст.</p>

Семантические роли и рекомендации

• Используйте <div> для создания блочных контейнеров и группировки элементов.
• Используйте <span> для стилизации отдельных частей текста и создания строчных выделений.
• Придерживайтесь семантических рекомендаций и выбирайте теги в соответствии с их предназначением.

Заключение

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