Теги 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.

Декоративна роль - розміщення декоративних елементів на сторінці, додаткових фонових зображень, фрагментів, виправлення помилок (фікси, костилі) і тому подібне.

Full page
Поділ на основні блоки всієї сторінки.
Resize part
Поділ блока .resize.
Header part
Поділ блока .header.
Content part
Поділ блока .content.