Теги SPAN, DIV
Тег <span> - строчний елемент, його необхідно використовувати в тих випадках, коли частина тексту в строці має інший стиль: колір, розмір, накреслення. Також <span> використовується для вставки різних декоративних елементів в строку, для виділення значень, що можуть динамічно змінюватися і т.п.
Червона карточка означає видалення гравця з поля.
.red { color: red; }
<p><span class="red">Червона</span> карточка означає видалення гравця з поля.</p>
Виділення тегом динамічного значення (число завантажується з бази даних за допомогою скрипта):
Ціна: 48 грн.
<p class="price">Ціна: <span>0</span> грн.</p>
$('.price span').text( getPriceFromDB() );
Тег <div> - це основний блочний елемент, основний тип коробок. Він може виконувати як семантичну, так і декоративну роль.
Семантична роль полягає в тому, що тег <div> об'єднує, групує певні елементи однакових категорій, розділяє дані різних типів. Якщо поглянути на макет Колесова - в нього є такі елементи: хедер, футер, контентна частина, а в ній - текст і меню. Кожен з цих елементів - це блоки div.
Декоративна роль - розміщення декоративних елементів на сторінці, додаткових фонових зображень, фрагментів, виправлення помилок (фікси, костилі) і тому подібне.