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

Я хотел бы попросить несколько простых примеров, показывающих использование

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

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

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

Например:

 
This a large main division, with a small bit of spanned text!

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

 
Some text that
I want
to mark
up

… является незаконным.


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

– содержимое streamа.


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

  

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

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

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

  • Существует множество блочных элементов (строк до и после), определенных в HTML, и множество встроенных тегов (без разломов строк).
  • Но в современном HTML все элементы должны иметь значения : a

    – это абзац,

  • – элемент списка и т. Д., И мы должны использовать правильный тег для правильной цели – не так в прежние времена, когда мы отступали, используя

    ли контент цитатой или нет.

  • Итак, что вы делаете, когда нет смысла в том, что вы пытаетесь сделать? Нет смысла в столбце шириной 400 пикселей, не так ли? Вы просто хотите, чтобы ваш столбец был шириной в 400 пикселей, потому что это соответствует вашему дизайну.
  • По этой причине они добавили еще два элемента в HTML: общие или бессмысленные элементы

    и , потому что в противном случае люди вернутся к злоупотреблению элементами, которые имеют значения.

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

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

– это тег блока, а – встроенный тег.

– элемент уровня блока, а – встроенный элемент.

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

.


Как отмечают другие, существует семантика, подразумеваемая с каждым из них, что в значительной степени связано с тем, что

подразумевает логическое разделение в документе, похожее на часть документа или что-то еще: a la:

 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis congue vehicula purus.

Nam eget magna nec sapien fringilla euismod. Donec hendrerit.

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

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

 

This is a paragraph

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

). С другой стороны,

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

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

 

Still wrong

Just as wrong

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

 

This paragraph has a span.

This paragraph

has
a div.

производит:

 This paragraph has a span. This paragraph has a div. 

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

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

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

Примеры:

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

  2. Отображение CSS: inline vs inline-block

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

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

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

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

В HTML есть tags, которые добавляют структуру или семантику в контент. Например,

используется для идентификации абзаца. Другим примером является

    для упорядоченного списка.

    Если в HTML нет подходящего тега, как показано выше, обычно используются tags

    и .

    Тег

    используется для определения раздела / разделения уровня блока документа, который имеет разрыв строки как до, так и после него.

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

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

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

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

    История span :

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

    – Источник (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 был предложен как более общая замена элемента для стилизации текста. Div был предложен как общий способ разделить страницы и имел дополнительное преимущество замены

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

    является блочным элементом. Как все абзацы или любой контент, написанный внутри div, мы можем применить css ко всем элементам div. Просто добавив стиль в div.

    – встроенный элемент.

    Что все изменения CSS сделаны, что отражает только этот элемент.

     

    Example of div and span

    This is a paragraph within a div Paragraph with in span.