Когда следует использовать теги <div> и <span> в разметке HTML?

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

• div (division): Блочный элемент. Создает новую строку до и после своего содержимого. Используется для группировки больших разделов контента, таких как заголовки, основной контент, подвалы, боковые панели. Применяется для создания макета страницы с помощью CSS.

• span: Строчный элемент. Не создает новую строку. Используется для группировки небольших частей контента внутри строки, таких как отдельные слова или фразы. Применяется для задания стиля определенному фрагменту текста без влияния на окружающие элементы.

Пример использования div:

<!-- Группировка раздела шапки сайта -->
<div class="header">
  <h1>Логотип</h1>
  <nav>
    <ul>
      <li>Ссылка 1</li>
      <li>Ссылка 2</li>
    </ul>
  </nav>
</div>

<!-- Группировка основного контента -->
<div class="main-content">
  <article>
    <h2>Заголовок статьи</h2>
    <p>Содержимое статьи...</p>
  </article>
</div>

Пример использования span:

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

<style>
  .highlight {
    color: blue; /* Применение стиля только к слову "выделенным" */
    font-weight: bold;
  }
</style>

Следует использовать эти теги с семантически подходящими классами или идентификаторами для лучшей читаемости и поддержки кода, а также для целей стилизации и манипуляций с DOM. Важно избегать избыточного использования div и span там, где подходят более семантичные теги HTML5 (например, header, footer, article, nav, section).