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

• 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> является потоковым содержимым.

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

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

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

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

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

Один из полезных стилей для div - inline-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)

История 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> используется для идентификации раздела / раздела документа на уровне блока, у которого есть разрыв строки как до, так и после него.

Примерами использования тегов 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>

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

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

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

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