HTML Block and Inline Elements

What are Block and Inline Elements?

HTML elements are categorized into two types based on their default behavior:

1️⃣ Block Elements → Start on a new line and take up the full width.
2️⃣ Inline Elements → Stay in the same line and take only as much space as needed.

1️⃣ Block Elements

✔ A block element always starts on a new line.
✔ It takes the full width of its container.
✔ Used for structuring content like paragraphs, headings, and sections.

Common Block Elements:

Element	Description
`<div>`	Generic container for layout
`<p>`	Paragraph of text
`<h1>` to `<h6>`	Headings (H1 is the largest, H6 is the smallest)
`<ul>` / `<ol>`	Lists (unordered & ordered)
`<table>`	Table for displaying data
`<section>`	Section of content
`<article>`	Article or independent content
`<aside>`	Sidebar or additional info
`<header>`	Header section of a webpage
`<footer>`	Footer section of a webpage

Example of Block Elements:

<p>This is a paragraph.</p>
<h2>This is a heading</h2>
<div>This is a block container</div>

✔ Each element starts on a new line and stretches across the page.

2️⃣ Inline Elements

✔ An inline element does not start on a new line.
✔ It only takes up the space it needs.
✔ Used for styling and formatting inside block elements.

Common Inline Elements:

Element	Description
`<span>`	Generic inline container for styling
`<a>`	Anchor (hyperlink)
`<b>` / `<strong>`	Bold text
`<i>` / `<em>`	Italic or emphasized text
`<u>`	Underlined text
`<small>`	Smaller text
`<mark>`	Highlighted text
`<code>`	Displays code in monospace font
`<img>`	Embeds an image
`<br>`	Line break (forces text to a new line)
`<input>`	Form input field

Example of Inline Elements:

<p>This is <strong>bold</strong> and <i>italic</i> text.</p>
<a href="#">Click here</a>

✔ Inline elements stay in the same line and only use necessary space.

3️⃣ Block vs Inline: Key Differences

Feature	Block Elements	Inline Elements
Starts on a new line?	✅ Yes	❌ No
Takes full width?	✅ Yes	❌ No (only needed space)
Used for layout?	✅ Yes	❌ No
Common Examples	`<div>`, `<p>`, `<h1>`	`<span>`, `<a>`, `<b>`

4️⃣ Mixing Block and Inline Elements

You can use inline elements inside block elements, but not vice versa.

✅ Valid Example (Inline inside Block)

<p>This is a <span style="color: red;">red</span> word.</p>

✔ The <span> element stays inline inside the <p> block element.

❌ Invalid Example (Block inside Inline)

<span>
    <p>This is incorrect!</p> 
</span>

❌ A block element (<p>) inside an inline element (<span>) is not allowed.

Summary Table

Type	Takes Full Width?	Starts New Line?	Common Examples
Block	✅ Yes	✅ Yes	`<p>`, `<div>`, `<h1>`
Inline	❌ No	❌ No	`<span>`, `<a>`, `<b>`

Best Practices

✅ Use block elements for main page structure.
✅ Use inline elements for styling and formatting.
✅ Do not place block elements inside inline elements.