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

543

Я хотел бы попросить несколько простых примеров, показывающих использование <div>и <span>. Я видел, как они оба отмечали раздел страницы знаком idили class, но мне интересно знать, есть ли моменты, когда один из них предпочтительнее другого.

JSchaefer
источник

Ответы:

582

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

Например:

<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>является потоком контента.


Вы попросили несколько конкретных примеров, так что это взято с моего сайта по боулингу, BowlSK :

<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>

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

В верхней части моей страницы у меня есть логический раздел, «заголовок». Поскольку это раздел, я использую div (с соответствующим идентификатором). В этом у меня есть пара разделов: панель пользователя и фактическое название страницы. В заголовке используется соответствующий тег h1. Пользовательская панель, будучи разделом, обернута в div. В этом имя пользователя обернуто в span, так что я могу изменить стиль. Как вы можете видеть, я также обернул spanоколо 2 букв в названии - это позволяет мне менять их цвет в моей таблице стилей.

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

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

Крис Марасти-Георг
источник
5
Крис, в твоем тексте есть ошибка: даже если вы установили стиль диапазона «block», все равно нельзя оборачивать его вокруг элемента уровня блока!
Конрад Рудольф
7
Вы не можете использовать divи spanсемантически, так как они не имеют никакого значения для них. divявляется бессмысленным универсальным блочным элементом, а spanбессмысленным универсальным встроенным элементом.
apnerve
9
@apnerve У них все еще есть семантика в этом блоке, а встроенные элементы означают разные вещи для потока документов, как с точки зрения синтаксического анализа, так и с точки зрения «чтения этого источника, чтобы выяснить, что происходит».
Крис Марасти-Георг
20
«Семантика (от греческого sēmantiká, вторичное множественное число от sēmantikós) [1] [2] - это изучение значения. Оно фокусируется на связи между знаковыми знаками, такими как слова, фразы, знаки и символы, и тем, что они обозначают, их денотатами «. Значения «div» и «span» наверняка означают что-то. Спецификация HTML имеет хорошее представление о том, что означают блочные и встроенные элементы. w3.org/TR/html401/struct/global.html#h-7.5.3 . Черновик HTML5 даже помещает их в отдельные группы - группирование контента и семантика на уровне текста. dev.w3.org/html5/spec/Overview.html
Крис Марасти-Георг
16
Вы
сказали
390

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

  • В HTML определено множество элементов блоков (разрывы строк до и после), а также множество встроенных тегов (без разрывов строк).
  • Но в современном HTML все элементы должны иметь значения : a <p>- это абзац, a <li>- это элемент списка и т. Д., И мы должны использовать правильный тег для правильной цели - не так, как в старые времена, когда мы с отступом, используя <blockquote>ли контент цитату или нет.
  • Итак, что же вы делаете , когда там нет никакого смысла вещь , которую вы пытаетесь сделать? Нет никакого смысла в колонке шириной 400 пикселей, не так ли? Вы просто хотите, чтобы ваш столбец текста был шириной 400px, потому что это соответствует вашему дизайну.
  • По этой причине они добавили еще два элемента в HTML: общие или бессмысленные элементы, <div>и <span>, в противном случае, люди вернутся к злоупотреблению элементами, которые имеют значения.
AmbroseChapel
источник
20
Это правильное объяснение. Интересно, почему это не было принято как ответ.
apnerve
16
потому что это слишком далеко вниз страницы
Джейсон Себринг
12
То, что хороший ответ не был принят, не означает, что вы не можете проголосовать за него. +1 за полезные разъяснения.
CyberFonic
8
Приятно знать, но он не отвечает на первоначальный вопрос, поскольку не объясняет различий между элементами div и span.
Техван
216

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

разница между div и span

<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>является встроенным тегом.

Брайан
источник
16
Они по-разному влияют на макет, даже без CSS! Это первый раз, когда я видел это показано!
GreenAsJade
2
Спасибо, я приветствую этот ответ, потому что он очень быстро отвечает, что у div есть следующая строка
Script Kitty
4
Спасибо, что объяснили новичков, таких как я, визуально :-)
Аритра Чаттерджи
73

<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>
Джейсон Бантинг
источник
1
div можно сделать встроенным (display: inline;) и наоборот для span, но это лучшее объяснение. Это теги-обертки, span обычно используется для предложений или выделения текста, div для разделов.
Росс
3
Мне известно о том, что вы можете изменить это с помощью CSS, но это вводит другую технологию. HTML может стоять сам по себе, и когда он это делает, div не является встроенным и не должен быть таковым в чистом виде.
Джейсон Бантинг
Есть ли хорошая книга, объясняющая, как правильно использовать HTML-элементы в разных ситуациях.
Mko
@mko - не знаю, если честно. Опыт лучший учитель. В конечном счете, нет «правильного» ответа, по сути, есть просто то, что подходит для вашей ситуации и ваших целей. ;)
Джейсон Бантинг
30

Действительно важное различие уже упоминалось в ответе Криса. Тем не менее, последствия не будут очевидны для всех.

Как встроенный элемент, <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>
Конрад Рудольф
источник
7
@Faizan Как это актуально? Это также неправильно: не каждый браузер будет давать одинаковые результаты для этой разметки. В зависимости от того, какой тип документа вы используете (и, опять же, от браузера), это может вообще не выполняться, а скорее привести к ошибке проверки.
Конрад Рудольф
Я вижу, что некоторые браузеры достаточно эффективны для запуска недействительного кода. вот почему он побежал. Можете ли вы порекомендовать мне хороший валидатор для HTML.?
Файзан
6
«Будьте консервативны в том, что вы делаете, и либеральны в том, что вы принимаете» en.wikipedia.org/wiki/Robustness_principle
jldupont
5
Добро пожаловать в столовую супа. Браузеры, использующие недопустимый HTML, являются причиной, по которой высоко оптимизированы, но разборчивые парсеры HTML не являются нормой. Каждый браузер, достойный своей соли (т. Е. Совместимый с «HTML»), использует своего рода «внутреннюю» библиотеку типа «супа», чтобы сделать его приемлемым.
извед
8

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

<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 не используется inline, он просто не даст желаемого эффекта.

user34660
источник
6

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

Одним из полезных стилей для divISinline-block

Примеры:

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

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

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

Эрик Р. Рат
источник
3
Если бы они не имели смысловой ценности, был бы только один из них. Один предназначен для разделения на уровне блоков, а другой - для линейного пролета
Крис Марасти-Георг,
3

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

Джаганнатха Саманта
источник
3

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

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

Пабло Эрреро
источник
Не нужно знать испанский, английская версия - <span> - HTML | MDN .
user34660
3

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

История span:

3 июля 1995 года Бенджамин С.В. Ситтлер предлагает общий текстовый контейнер. тег для применения стилей к определенным блокам текста. Рендеринг нейтрален, за исключением случаев, когда он используется в сочетании с таблицей стилей. Существует спор вокруг о читаемости, смысл. Берт Бос упоминает природу атрибута элемента через атрибут класса (со значениями, такими как город, человек, дата и т. Д.). Пол Прескод обеспокоен тем, что оба элемента будут злоупотреблены. Он выступает против текста, в котором упоминается, что «любой новый элемент должен быть на старом», и добавляется «Если мы создаем тег без семантики, его можно использовать везде, где бы он ни был, не ошибаясь». Мы должны заставить авторов правильно пометить семантику своего документа. Мы должны заставить поставщиков редакторов сделать этот выбор явным в своих интерфейсах ».

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

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

Во-первых, универсальный контейнер необходим для переноса атрибутов LANG и BIDI в тех случаях, когда другой элемент не подходит; элемент SPAN вводится для этой цели.

- Источник (IETF Draft)

История div:

Элементы DIV можно использовать для структурирования документов HTML в виде иерархии подразделений.

...

CENTER был представлен Netscape до того, как была добавлена ​​поддержка элемента HTML 3.0 DIV. Он сохраняется в HTML 3.2 из-за его широкого распространения.

HTML 3.2 Spec

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

Алекс W
источник
2

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

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

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

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

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

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

Роберт Роша
источник
2

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

Их можно настроить только с помощью 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>

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

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

ятхендра кв
источник
Идеальный ответ, который я искал.
PHPFan