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

Question

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

Answer 1

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="http://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 .

Answer 2

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

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

Answer 3

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

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

Answer 4

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

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

---

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

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

Answer 5

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

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

Answer 6

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

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

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

Answer 7

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

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

Примеры:

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

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

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

Answer 8

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

Answer 9

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

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

Answer 10

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

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

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

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