Відповіді:
Основна відмінність полягає в тому, що <span>
тег є вбудованим елементом, тоді як <div>
тег - елементом рівня блоку .
Два елементи рівня блоку (div) будуть відображатися один за одним вертикально, тоді як два вбудовані елементи (прольоти) будуть відображатися один за одним по горизонталі.
Щоб зрозуміти різницю у візуальному плані, це може допомогти мислити <span>
елемент як слово, а <div>
елемент - як абзац: діви зазвичай використовуються для викладки блоків змісту. Проміжки зазвичай використовуються для виділення груп слів у цьому вмісті.
І Нік, і Тобі чудово відповіли на ваше запитання, але щоб зробити це ще на один рівень.
За замовчуванням <div>
s - елементи блоку, а <span>
s - вбудовані елементи. Це загальні теги, які просто забезпечують блокові або вбудовані контейнери. На практиці вони можуть бути скручені через CSS, щоб бути дещо взаємозамінними, встановивши атрибут відображення css на "block", "inline" або навіть "inline-block" (серед інших).
Однак згинати їх, щоб вони діяли як один одного, не рекомендується. І в HTML є правила, які фактично перешкоджають використанню елементів рівня блоку всередині інших елементів (в основному вбудованих елементів, таких як <a>
тег), тож вам слід спробувати використовувати правильний тег там, де це доречно, і намагатися лише змінити їх поведінку, коли абсолютно необхідний.
Постарайтеся уявити їх як смислові елементи. Використовуйте, <span>
коли ви хочете тегувати вміст, який використовується всередині блоків тексту, наприклад, і використовуйте <div>
, коли вам потрібно додати додаткову структуру до самої сторінки.
Сказавши це, HTML5 має безліч семантичних елементів, які повинні значно зменшити необхідність використання будь-якого з цих загальних тегів. Використання семантичних тегів настійно рекомендується додавати велику кількість знаків і прольотів.
Удачі!
Основна відмінність полягає в тому divs
, що вони є блоковими елементами і spans
є вбудованими елементами.
Обидва можуть бути стилізовані за допомогою CSS, щоб діяти, як ви хочете, але поза рамкою ви зазвичай використовуєте spans
для менших вбудованих розділів і divs
для великих блоків.
Деякі речі впливатимуть на елементи вбудованих та блокових елементів по-різному, наприклад, ви не можете встановити висоту на span
елемент.