В чем разница между тегами <span> и <div>?

Мне любопытно, тег span, похоже, работает так же, как div.

Основное отличие состоит в том, что <span>тег является встроенным элементом, тогда как <div>тег является элементом уровня блока .

Два элемента уровня блока (div) будут отображаться один за другим вертикально, тогда как два встроенных элемента (диапазона) будут отображаться один за другим горизонтально.

Чтобы понять разницу в визуальных терминах, это может помочь представить <span>элемент как слово, а <div>элемент как абзац: div обычно используется для разметки блоков контента. Интервалы обычно используются для выделения групп слов в этом контенте.

И Ник, и Тоби хорошо ответили на ваш вопрос, но чтобы подняться на один уровень дальше.

По умолчанию <div>s - это блочные элементы, а <span>s - встроенные элементы. Это общие теги, которые просто предоставляют блочные или встроенные контейнеры. На практике они могут быть скручены через CSS, чтобы быть несколько взаимозаменяемыми, устанавливая атрибут css для display на «block», «inline» или даже «inline-block» (среди прочих).

Однако сгибать их, чтобы они действовали как один, не рекомендуется. И в HTML есть правила, которые на самом деле не позволяют использовать элементы уровня блока внутри других элементов (в основном встроенных элементов, таких как <a>тег), поэтому вы должны пытаться использовать правильный тег там, где это уместно, и пытаться переопределить их поведение, только когда абсолютно необходимо.

Попробуйте думать о них как о семантических элементах. Используется, <span>когда вы хотите пометить контент, используемый внутри блоков текста, например, и использовать <div>, когда вам нужно добавить дополнительную структуру к самой странице.

Сказав это, HTML5 имеет множество семантических элементов, которые должны значительно сократить необходимость использования любого из этих общих тегов. Использование семантических тегов настоятельно рекомендуется для добавления большого количества элементов div и span.

Удачи!

Основное отличие состоит в том, что divsэто блочные элементы и spansвстроенные элементы.

И то, и другое можно стилизовать с помощью CSS, чтобы действовать так, как вы хотите, но из коробки вы обычно используете spansдля небольших встроенных делений и divsдля больших блоков.

Некоторые вещи по-разному влияют на встроенные и блокирующие элементы, например, вы не можете установить высоту для spanэлемента.