What is the difference between div and span from a layout perspective?

The main difference between <div> and <span> lies in their display type and semantics:

• <div> is a block-level element that takes up the full available width and starts on a new line. It is used for grouping large blocks of content or structuring a page.

• <span> is an inline element that does not start on a new line and is used for highlighting or styling a part of the text within other elements.

Example:

<div>
  <p>This is a paragraph inside a div block.</p>
</div>

<p>Text with a <span style="color: red;">highlighted in red</span> word.</p>

Thus, <div> is used for creating structural blocks, while <span> is used for styling or highlighting parts of text within these blocks.