20. Block and Inline Elements

HTML elements are commonly explained as block-level or inline based on how they flow in the page. Block elements usually start on a new line, while inline elements flow within surrounding text.

Syntax

<div>Block</div>
<span>Inline</span>

Example

<div>This is a block element.</div>
<span>This is inline.</span>
<span>So is this.</span>

Output

The div appears on its own line, while the span elements appear inline next to each other.

Example

🏋️ Test Yourself With Exercises

Take our quiz on Block and Inline Elements to test your knowledge.

Browse Quizzes »

Previous Next

💡 Did You Know?

Skill Eco is optimized for learning and training. We believe learning should be seamless. Our tutorials are streamlined for maximum clarity and regularly updated to ensure you’re learning with the best tools available.

In This Tutorial

Introduction to HTML Basic HTML Document Structure Headings Paragraphs Line Break and Horizontal Rule Text Formatting Tags Comments Attributes Links Open Link in New Tab

+45 more sections

⭐ Go Premium

Unlock all tutorials, quizzes and certificates.

Upgrade Now »