Html Block Inline — Free Html Tutorial
Learn Html Block Inline in Html with a free, beginner-friendly tutorial, examples and practice for Indian students on Syllab.in.
TL;DR: Learn Html Block Inline 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
Html Block Inline 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.
Html Block Inline — 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 Html Block Inline 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 →