Яка різниця між тегами HTML <div> та <span>?

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

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

... є незаконним.

EDIT: Як і в 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 включає широкий новий набір елементів, що визначають загальні структури сторінок, такі як стаття, розділ, nav тощо.

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

Просто задля повноти я запрошую подумати про це так:

• Існує безліч елементів блоку (рядків до і після), визначених у HTML, і безліч вбудованих тегів (без рядків).
• Але в сучасному HTML всі елементи повинні мати значення : a <p>- абзац, an <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 vs inline-block

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

Div - це блок-елемент, а span - це вбудований елемент, і його ширина залежить від вмісту його самості, де діва немає

Я б сказав, що якщо ви знаєте трохи іспанської мови, подивіться на цю сторінку , де це правильно пояснено.

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

Просто хотів додати якийсь історичний контекст, як сталося spanпроти vsdiv

Історія 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>Тег використовується для ідентифікації 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>

В обох є свій час та випадок, коли їх потрібно використовувати, виходячи з ваших вимог.

Сподіваюся, я зрозуміла відповідь. Дякую.