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

Question

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

Answer 1

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

История span:

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

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

Из проекта RFC, представляющего span:

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

Answer 2

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

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

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

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

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

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

Answer 3

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

<span> - встроенный элемент.

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

<div style="color:green;">

 <h1>Example of div and span</h1>
   <p>
    This is a paragraph within a div
     <span style="color: red;"> Paragraph with in span. </span>
   </p>
 </div>