← Назад до курсу

▸ Як працює веб

▸ Перша веб-сторінка

▸ HTML-елементи та текст

▼ HTML-семантика

▸ HTML форми та медіа

▸ CSS основи та селектори

▸ Блокова модель CSS

▸ CSS позиціонування та Flexbox

▸ CSS типографіка та декор

▸ CSS-анімації та адаптивність

▸ Практика HTML/CSS: верстка проєкту

▸ JavaScript: змінні та типи даних

▸ JavaScript: методи рядків та Math

▸ JavaScript: масиви

▸ JavaScript: об'єкти та JSON

▸ JavaScript: керування потоком та функції

▸ JavaScript та DOM

▸ Node.js основи

▸ Express.js та REST API

▸ SQL та бази даних

▸ CSS Grid: двовимірна розкладка

▸ CSS Custom Properties та теми

▸ JavaScript: Класи та ООП

▸ JavaScript: Обробка помилок

▸ JavaScript: Fetch API та HTTP-запити

▸ JavaScript: Регулярні вирази

▸ npm, package.json та інструменти розробки

▸ Тестування JavaScript з Jest

← До курсу

HTML-семантика

div, span та групування елементів

📖 Теорія

div та span — несемантичні контейнери, використовуються коли семантичний тег не підходить.

div — блоковий контейнер:

💡 Приклад коду

<div class="card">
  <h3>Картка</h3>
  <p>Опис картки</p>
</div>

span — рядковий контейнер:
<p>Ціна: <span class="price">299 грн</span></p>

Атрибут class — для CSS-стилізації, може повторюватись.
Атрибут id — унікальний ідентифікатор, один на сторінку.

Правило: надавай перевагу семантичним тегам над div.

← Попередній урок Наступний урок →