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

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

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

Это означает, что для их семантического использования 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>

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

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

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

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

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

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

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

Как встроенный элемент, <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>

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

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

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

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

Примеры:

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

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

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

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

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

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

Просто хотел добавить некоторый исторический контекст к тому, как произошло 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 стали общими элементами со свойствами по умолчанию для блоков и встроенного отображения соответственно.

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

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

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

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

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

Например, тег 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>

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

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