HTML Block vs Inline Elements

HTML elements are displayed as block-level or inline by default.
This behavior controls how elements appear on a page.

Block-Level Elements

Block elements:

• Start on a new line
• Take full available width

Example

<div style="border: 1px solid #000;">Block element</div>
<p style="border: 1px solid #000;">Paragraph element</p>

Common block elements:

• <div>
• <p>
• <h1> to <h6>
• <section>

Inline Elements

Inline elements:

• Do not start on a new line
• Take only required width

Example

<span style="border: 1px solid #000;">Inline</span>
<strong style="border: 1px solid #000;">Text</strong>

Common inline elements:

• <span>
• <a>
• <strong>
• <img>

Key Differences