What block-level elements are
What inline elements are
Key differences between both
Full list of block elements
Full list of inline elements
How <div> and <span> differ
What are Block and Inline Elements?
Every HTML element is either a block-level element or an inline element. This determines how it behaves in the page layout — how much space it takes up and whether it starts on a new line.
Always starts on a new line
Takes up the full width of its container
You can set width and height with CSS
Can contain block and inline elements
Used to structure sections of a page
Does NOT start on a new line
Only as wide as its content
Width and height cannot be set
Can only contain inline elements or text
Used to style parts of text within a block
Block-Level Elements
A block-level element always begins on a new line and stretches to fill the full width of its parent container — even if the content is just a single word.
Think of block elements as stacking bricks. Each block sits on its own horizontal line, one stacked on top of the next. The two most important block elements: <div> (generic container) and <p> (paragraph).
Block Elements — Full Reference
<address><article><aside><blockquote><canvas><dd><div><dl><dt><fieldset><figcaption><figure><footer><form><h1> – <h6><header><hr><li><main><nav><ol><p><pre><section><table><ul><video>
Block Elements — Code Example
<h2>Block Level Demo</h2>
<p>This paragraph starts on a new line.</p>
<hr>
<div style="background:#f3eeff; padding:10px;">
This div starts on a new line and is full width.
</div>
<p>This paragraph starts below the div — also new line.</p>
Block Level Demo
This paragraph starts on a new line.
This div starts on a new line and is full width.
This paragraph starts below the div.
🌐 Every block element starts on its own line and fills the full width
Inline Elements
An inline element sits within the flow of text — it only takes up as much width as its content. Multiple inline elements can appear on the same line.
Inline Elements — Full Reference
<a><abbr><b><br><button><cite><code><em><i><img><input><kbd><label><mark><q><samp><select><small><span><strong><sub><sup><textarea><time><var>
Inline Elements — Code Example
<p>
This <b>word is bold</b> and this is <i>italic</i> — all inline.
</p>
<p>
Visit <a href="https://tipsinlearning.blogspot.com">TipsInLearning</a>
for <strong>free web dev</strong> courses.
</p>
<p>
The sky is <span style="color:dodgerblue;font-weight:bold;">blue</span> today.
</p>
This word is bold and this is italic — all inline.
Visit TipsInLearning for free web dev courses.
The sky is blue today.
🌐 Inline elements flow within paragraph text — no new lines
<div> vs <span>
The two most commonly used generic containers — both have no default visual styling. Their purpose is to group content for CSS or JavaScript.
Starts on a new line
Takes full width
Use to wrap sections, cards, layouts
Flows within text
Only as wide as content
Use to color/style a word or phrase
<div style="background:#f3eeff;padding:20px;border-radius:8px;">
<h2>This whole box is a div</h2>
<p>It groups the heading and paragraph.</p>
</div>
<p>
TipsInLearning teaches
<span style="color:#7c3aed;font-weight:bold;">
HTML, CSS & JavaScript
</span> for free.
</p>
Rule of thumb: Use <div> to group sections of content. Use <span> to style a specific word or phrase within text. Both do nothing visually on their own — they need CSS.
Try It Yourself
1Create a <div> with a background color and put an <h2> and <p> inside it
2Add two <div> elements side by side — notice they stack vertically
3Inside a <p> tag, use <span> to color just one word purple
4Put <b>, <i>, and <a> inside a single paragraph — they all stay on the same line
5Try display: inline on a <div> — watch it behave like an inline element!
1Block elements — start on a new line, take full width
2Inline elements — flow within text, only as wide as content
3<div> is the main block container for grouping sections
4<span> is the main inline container for styling text parts
5Override with CSS: display: block or display: inline
6Block elements can contain inline — but not always the reverse
Questions Beginners Ask
Common questions about block and inline elements:
What's the difference between block and inline in simple terms?
A block element always starts on a new line and takes the full width available — like a paragraph or heading. An inline element sits within the flow of text and only takes up as much space as its content — like a bold word or a link. Think of block elements as stacking vertically (like paragraphs in a document) and inline elements as flowing horizontally within a line of text.
Can I put a block element inside an inline element?
Generally no — and this is actually invalid HTML. For example, you should not put a <div> inside a <span>. Block elements can contain other block elements and inline elements, but inline elements should only contain other inline elements or text. Breaking this rule causes browsers to try to fix your markup automatically, often with unexpected results.
How do I make a div take only as much space as its content?
By default a <div> stretches full width. To make it shrink to its content, add display: inline-block or display: inline in CSS. Alternatively, width: fit-content keeps it block but sizes it to its content. Modern layouts often use Flexbox or Grid to control this more precisely.
What does display: block on a span do?
It makes the <span> behave like a block element — it starts on a new line and takes full width. This is completely valid CSS and is used regularly in real projects. The HTML tag and the CSS display value are independent — you can override any element's default display behaviour.
Why do <div> and <span> have no default styling?
That's by design. <div> and <span> are generic containers with no semantic meaning and no browser default styles (unlike <h1> which is bold and large, or <a> which is blue and underlined). This makes them perfect for applying your own custom CSS without fighting browser defaults.