<span> против <div>против <Fragment>

Question

Я запутался в перечисленных элементах.

Что я уже знаю:

1. Все они не имеют реального значения.

2. Фрагмент не является реальным элементом.

Можете ли вы объяснить, в чем основные различия между ними? Когда мы должны выбрать один над другим?

Answer 1

Я не уверен насчет <fragment>, но могу сказать о различиях <div> и <span>.

Разница между <span> и <div> заключается в том, что элемент <span> является встроенным и обычно используется для небольшого фрагмента HTML внутри строки (например, внутри абзаца), тогда как <div> ( элементом Division) является block-line (что в основном эквивалентно разрыву строки до и после него) и используется для группировки больших кусков кода.

<div> пример:

<div style="background-color:black;color:white;padding:20px;">
  <h2>London</h2>
  <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>

<span> пример:

<h1>My <span style="color:red">Important</span> Heading</h1>

Последний пример - когда вы используете

<div>Hello</div>
<div>World</div>

что дает это:

Hello
Мир

<div> дает новую строку между каждым, потому что это элемент уровня блока, тогда как <span> не делает:

<span>Hello</span>
<span>World</span>

Hello World