HTML Block & Inline Elements

🔍 Understanding Block vs Inline Elements in HTML

In HTML, every element is either a block-level or an inline-level element. This classification affects how elements behave in the page layout.

>>"Block and inline are not just styles — they define how content flows on the web." 🌐

🧱 What is a Block-Level Element?

Block-level elements occupy the full width of their parent container and start on a new line. They are typically used to structure the main layout of a page.

Block-Level Element Example

<div>This is a block element</div>
<p>This is another block element</p>
<h1>This is a heading</h1>
📋 Common Block Elements
  • <div> – Generic container
  • <p> – Paragraph
  • <h1> to <h6> – Headings
  • <ul>, <ol>, <li> – Lists
  • <section>, <article>, <footer> – Semantic layout tags

Note

⚠️ Block elements can contain other block or inline elements.

📌 What is an Inline Element?

Inline elements do not start on a new line. They only take up as much width as necessary and flow with surrounding text.

Inline Element Example

<p>This is <span>inline text</span> inside a paragraph.</p>
<a href="#">This is a link</a>
🧾 Common Inline Elements
  • <span> – Generic inline container
  • <a> – Anchor (link)
  • <strong>, <em> – Formatting tags
  • <img> – Image (inline by default)
  • <br> – Line break

Note

💡 Inline elements cannot contain block-level elements.

⚙️ Visual Difference

Here's a quick comparison of how block and inline elements behave:

PropertyBlockInline
Starts on new line?✅ Yes❌ No
Takes full width?✅ Yes❌ No
Can contain block?✅ Yes❌ No
Can contain inline?✅ Yes✅ Yes

🎨 Can You Change It?

Yes! Using CSS, you can change how elements behave:

Changing Display Type with CSS

span {
  display: block;
}

div {
  display: inline;
}

Note

🧠 Use display: inline-block to combine features of both block and inline elements.

🔗 Learn More

>>“Understanding layout starts with mastering block and inline.” — Web Wisdom 🧱✨