Block vs Inline Elements — Free HTML Tutorial

Learn Block vs Inline Elements in HTML with a free, beginner-friendly tutorial, examples and practice for Indian students on Syllab.in.

✓ 100% Free ✓ No Login Needed ✓ NCERT / CBSE Aligned ✓ Download as PDF

TL;DR: Learn Block vs Inline Elements in HTML with a free, beginner-friendly tutorial, examples and practice for Indian students on Syllab.in.

Written & reviewed by the Syllab.in Academic Team (CBSE/NCERT subject experts) · Updated Sep 17, 2026

🤖 Stuck on any question? Ask Syllab's free AI Tutor for a step-by-step explanation — instant, unlimited, no login.

Block vs Inline Elements in HTML

Block elements start on a new line and take full width: div, p, h1-h6, ul, ol, li, table, form, header, footer.

Inline elements flow in text and take only necessary width: span, a, strong, em, img, input, button, code.

Inline-block keeps elements in the flow but respects width/height — perfect for navigation items, buttons, badges.

Change display with CSS: display: block, inline, inline-block, flex, grid.

Block vs Inline Elements — Syntax

<!-- Block elements: each on new line -->
<div>Block element</div>
<p>Paragraph (block)</p>

<!-- Inline elements: flow in text -->
<p>Text with <strong>bold</strong> and <em>italic</em> inline.</p>

<!-- Change display type -->
<span style="display: block;">Now a block!</span>

Learn Block vs Inline Elements step by step with Syllab's free interactive HTML tutorial — runnable code examples, practice exercises and instant AI feedback, all free with no signup. Explore the full HTML course →