Block-level elements start on a new line and fill their container's width, while inline elements flow within a line at their content's width.
Block-level
Inline
Starts on a new line
Yes
No
Width
Full width available
Only what the content needs
Can contain
Block and inline elements, though <p> and headings hold only inline content
Text and other inline elements
Examples
<div>, <p>, <h1>, <section>, <article>
<span>, <a>, <strong>, <img>, <input>
One exception to the inline rule is <a>. Its transparent content model lets a link wrap block content when the link's parent allows it.
The distinction now belongs to CSS. HTML groups elements into content categories such as flow and phrasing content. The display property decides how each element renders. Setting display: inline on a <div> or display: block on a <span> swaps how they render, not what they may contain.
Rewriting in plainer words…
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
