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

<div> - это элемент блочного уровня, а <span> - встроенный элемент.

Если вы хотите что-то сделать со встроенным текстом, <span> - это то, что вам нужно, поскольку он не будет вводить разрывы строк, как это сделал бы <div>.

Как отмечали другие, существует некоторая семантика, подразумеваемая каждым из них, наиболее важным является тот факт, что <div> подразумевает логическое разделение в документе, подобное, может быть, разделу документа или чему-то еще, а-ля:

<div id = "Chapter1">
   <p>Lorem ipsum dolor sit amet, <span id = "SomeSpecialText1">consectetuer adipiscing</span> elit. Duis congue vehicula purus.</p>
   <p>Nam <span id = "SomeSpecialText2">eget magna nec</span> sapien fringilla euismod. Donec hendrerit.</p> 
</div>

• div - это блочный элемент
• span - это встроенный элемент.

Это означает, что для их семантического использования следует использовать блоки div для переноса разделов документа, а интервалы - для переноса небольших частей текста, изображений и т. д.

Например:

<div>This a large main division, with <span>a small bit</span> of spanned text!</div>

Обратите внимание, что размещение блочного элемента внутри встроенного элемента запрещено, поэтому:

<div>Some <span>text that <div>I want</div> to mark</span> up</div>

... незаконно.

Обновлено: Начиная с HTML5, некоторые элементы блока могут быть размещены внутри некоторых встроенных элементов. См. Ссылку MDN здесь для довольно четкого списка. Вышеупомянутое по-прежнему является незаконным, поскольку <span> принимает только фразированное содержимое, а <div> - потоковое содержимое.

Вы просили привести несколько конкретных примеров, например, один взят с моего сайта по боулингу, ЧашаSK:

<div id = "header">
  <div id = "userbar">
    Hi there, <span class = "username">Chris Marasti-Georg</span> |
    <a href = "/edit-profile.html">Profile</a> |
    <a href = "https://www.bowlsk.com/_ah/logout?...">Sign out</a>
  </div>
  <h1><a href = "/">Bowl<span class = "sk">SK</span></a></h1>
</div>

Хорошо, что происходит?

Также обратите внимание, что HTML5 включает в себя широкий новый набор элементов, которые определяют общие структуры страниц, такие как статья, раздел, навигация и т. д.

Раздел 4.4 HTML 5 рабочий проект перечисляет их и дает советы по их использованию. HTML5 все еще является рабочей спецификацией, так что еще нет ничего «окончательного», но очень сомнительно, что какой-либо из этих элементов куда-то изменится. Если вы хотите стилизовать эти элементы в какой-либо более старой версии IE, вам понадобится взлом javascript - вам нужно создать один из каждого элемента с помощью document.createElement, прежде чем любой из этих элементов будет указан в вашем источнике. Есть несколько библиотек, которые позаботятся об этом за вас - быстрый поиск в Google показал html5shiv.

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

Один из полезных стилей для div - inline-block.

Примеры:

1. http://dustwell.com/div-span-inline-block.html

2. Отображение CSS: встроенный против встроенного блока

Я успешно использовал inline-block в игровых веб-проектах.

Настоящая важная разница уже упоминается в ответе Криса. Однако последствия будут очевидны не для всех.

В качестве встроенного элемента <span> может содержать только другие встроенные элементы. Следовательно, следующий код неверен:

<span><p>This is a paragraph</p></span>

Приведенный выше код недействителен. Чтобы обернуть элементы уровня блока, необходимо использовать другой элемент уровня блока (например, <div>). С другой стороны, <div> можно использовать только в тех местах, где разрешены элементы блочного уровня.

Более того, эти правила зафиксированы в (X) HTML, и они нет изменяются присутствием правил CSS! Значит, следующие коды также неверны!

<span style = "display: block"><p>Still wrong</p></span>
<span><p style = "display: inline">Just as wrong</p></span>

Я бы сказал, что если вы немного знаете испанский, посмотрите эта страница, где это правильно объяснено.

Однако быстрое определение будет заключаться в том, что div предназначен для разделения секций, а span - для применения какого-либо стиля к элементу в другом блочном элементе, таком как div.

Для полноты картины предлагаю вам подумать об этом так:

• В HTML определено множество блочных элементов (разрывы строк до и после) и множество встроенных тегов (без разрывов строк).
• Но в современном HTML все элементы должны иметь значения: <p> - это абзац, <li> - это элемент списка и т. д., И мы должны использовать правильный тег для правильной цели - не как в старые времена. когда мы использовали отступ с помощью <blockquote>, независимо от того, было ли содержимое цитатой или нет.
• Итак, что вы делаете, когда является не имеет значения для того, что вы пытаетесь сделать? Для столбца шириной 400 пикселей нет смысл, не так ли? Вам просто нужно, чтобы ваш столбец текста был шириной 400 пикселей, потому что это соответствует вашему дизайну.
• По этой причине они добавили в HTML еще два элемента: общие или бессмысленные элементы <div> и <span>, потому что в противном случае люди вернулись бы к злоупотреблению элементами, которые действительно имеют значение.

Div - это блочный элемент, а span - это встроенный элемент, и его ширина зависит от его содержимого, где div не

Здесь уже есть хорошие подробные ответы, но нет наглядных примеров, поэтому вот небольшая иллюстрация:

<div>This is a div.</div>
<div>This is a div.</div>
<div>This is a div.</div>
<span>This is a span.</span>
<span>This is a span.</span>
<span>This is a span.</span>

<div> - это блочный тег, а <span> - встроенный тег.

В HTML есть теги, которые добавляют к содержимому структуру или семантику. Например, тег <p> используется для идентификации абзаца. Другой пример - тег <ol> для упорядоченного списка.

Когда в HTML нет подходящего тега, как показано выше, обычно прибегают к тегам <div> и <span>.

Тег <div> используется для идентификации раздела / раздела на уровне блока документа, у которого есть разрыв строки как до, так и после него.

Примерами использования тегов div являются заголовки, нижние колонтитулы, элементы навигации и т. д. Однако в HTML 5 эти теги уже предусмотрены.

Тег <span> используется для обозначения встроенного раздела / раздела документа.

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

Значение «блочного элемента» подразумевается, но никогда не указывается явно. Если игнорировать всю теорию (теория - это хорошо), то следующее сравнение будет прагматичным. Последующий:

<p>This paragraph <span>has</span> a span.</p>
<p>This paragraph <div>has</div> a div.</p>

производит:

This paragraph has a span.

This paragraph

has
a div.

Это показывает, что не только должен и div нет могут использоваться встроенными, это просто не даст желаемого эффекта.

Просто хотел добавить исторический контекст к тому, как возникли span против div.

История span:

On July 3, 1995, Benjamin C. W. Sittler proposes a generic text container tag for applying styles to certain blocks of text. The rendering is neutral except if used in conjunction of a stylesheet. There is a debate around versus about readability, meaning. Bert Bos is mentioning the extensibility nature of the element through the class attribute (with values such as city, person, date, etc.). Paul Prescod is worried that both elements will be abused. He is opposed to text mentionning that "any new element should be on an old one" and adding "If we create a tag with no semantics it can be used anywehere without ever being wrong. We must force authors to properly tag the semantics of their document. We must force editor vendors to make that choice explicit in their interfaces."

- Источник (w3 wiki)

Из проекта RFC, который вводит span:

First, a generic con- tainer is needed to carry the LANG and BIDI attributes in cases where no other element is appropriate; the SPAN ele- ment is introduced for that purpose.

- Источник (проект IETF)

История div:

DIV elements can be used to structure HTML documents as a hierarchy of divisions.

...

CENTER was introduced by Netscape before they added support for the HTML 3.0 DIV element. It is retained in HTML 3.2 on account of its widespread deployment.

HTML 3.2 Спецификация

Короче говоря, оба элемента возникли из-за потребности в более семантически универсальном контейнере. Span был предложен как более общая замена элемента <text> для стилизации текста. Div был предложен как общий способ разделения страниц и имел дополнительное преимущество в виде замены тега <center> для выравнивания содержимого по центру. Div всегда был блочным элементом из-за его истории как разделителя страниц. Span всегда был встроенным элементом, потому что его первоначальная цель заключалась в стилизации текста, а сегодня div и span стали универсальными элементами со свойствами блока по умолчанию и встроенного отображения соответственно.

Помните, что в основном и они сами тоже не выполняют никаких функций. Они специфичны для нет в отношении функциональности просто по их тегам.

Их можно настроить только с помощью CSS.

Теперь, что касается вашего вопроса:

Тег SPAN вместе с некоторыми стилями будет полезен при удерживании внутри строки, например, в абзаце в html. Это своего рода уровень строки или уровень оператора в HTML.

Пример:

<p>Am writing<span class = "time">this answer</span> in my free time of my day.</p>

Функциональность тега DIV, как уже говорилось, может быть видна только при наличии стиля, может содержать большие фрагменты HTML-кода.

DIV - уровень блока

Пример:

    <div class = "large-time">
    <p>Am writing <span class = "time"> this answer</span> in my free time of my day. 
    </p>
    </div>

У обоих есть свое время и случай, когда их следует использовать, в зависимости от ваших требований.

Надеюсь, ответ ясен. Спасибо.

Все просто и понятно.

• использование span не влияет на макет, потому что он встроенный (in line (не следует путать, потому что вещи могут быть обернуты))
• использование div влияет на макет, содержимое внутри отображается в новой строке (block element), когда элемент, который вы хотите добавить, не имеет особого семантического значения, и вы хотите, чтобы он отображался в новой строке, используйте <div>.