Кога трябва да използвате таговете <div> и <span> в…

Таговете div и span са универсални контейнери, използвани за групиране на елементи и прилагане на стилове.

div (раздел): Блоков елемент. Създава нов ред преди и след съдържанието си. Използва се за групиране на големи секции от съдържание, като заглавия, основно съдържание, футъри, странични панели. Използва се за създаване на оформление на страницата с 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) са по-подходящи.

Кога трябва да използвате таговете <div> и <span> в HTML маркиране?