An inline element only takes up as much width as its content needs, and doesn't force a line break — it flows within surrounding text.
Common Inline Elements
<span>, <a>, <strong>, <em>, <img>, <code>, <label>, <br>Example
<p>
Learn <strong>Python</strong>, <strong>SQL</strong>, and
<a href="/cources/data-science.php">Data Science</a> at CodingNow.
</p>Browser output: everything flows on the same lines as regular text — "Python," "SQL," and the link don't force line breaks; they're just emphasized or clickable words within the sentence.
Block vs Inline — Side by Side
| Block | Inline | |
|---|---|---|
| Starts on a new line | Yes | No |
| Default width | Full width of parent | Only as wide as its content |
| Can contain block elements | Usually yes | No — only text/other inline elements |
| Examples | <div>, <p>, <section> | <span>, <a>, <strong> |
Generic Wrappers: div vs span
When no semantic tag fits, <div> is the generic block-level wrapper and <span> is the generic inline wrapper:
<p>Status: <span class="status-active">Active</span></p>Common Mistakes
- Putting a block element (like
<div>or<p>) inside an inline element (like<span>or<a>) — invalid content model in most cases - Trying to set a fixed width/height on an inline element and being confused when it doesn't apply the way it would on a block element (without changing its CSS
displayproperty first)
Interview Relevance
Practical version of this question: "Why doesn't setting width on a <span> work?" — because inline elements don't respect width/height by default; you'd need display: inline-block or display: block in CSS.
Practice Question
Identify which of these are block vs inline: <h2>, <em>, <ul>, <img>, <section>, <a>.
