HTML 13 💻 Inline and block level elements
Understanding the difference between block-level and inline elements is crucial for proper HTML structure and layout. Every HTML element has a default display behavior that determines how it appears in the browser.
Block-Level Elements
Block-level elements are used to structure the layout of a page. They create “blocks” of content.
Characteristics:
- Start on a new line
- Take up the full width available (100% of their container)
- Can contain other block-level and inline elements
- Used for page structure and layout
Common Block-Level Elements:
| Element | Purpose | Example |
|---|---|---|
<h1> – <h6> | Headings | <h1>Main Title</h1> |
<p> | Paragraphs | <p>Text content</p> |
<div> | Generic container | <div>Content</div> |
<ul>, <ol>, <dl> | Lists | <ul><li>Item</li></ul> |
<table> | Tables | <table>...</table> |
<blockquote> | Quotations | <blockquote>Quote</blockquote> |
<address> | Contact info | <address>123 Main St</address> |
<form> | Forms | <form>...</form> |
<header>, <footer>, <main>, <section>, <article>, <nav>, <aside> | Semantic containers | <header>Header</header> |
Example:
<!-- These elements each start on a new line -->
<div>
<h1>This is a heading</h1>
<p>This is a paragraph of text.</p>
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>
</div>Browser Display:
This is a heading
This is a paragraph of text.
* List item 1
* List item 2Inline-Level Elements
Inline-level elements are used to format text or content within a block-level element.
Characteristics:
- Do not start on a new line
- Only take up the necessary width to contain their content
- Cannot contain block-level elements (with some exceptions)
- Flow within the text like words in a sentence
Common Inline Elements:
| Element | Purpose | Example |
|---|---|---|
<span> | Generic inline container | <span>highlighted</span> |
<a> | Hyperlinks | <a href="url">Link</a> |
<img> | Images | <img src="photo.jpg" alt=""> |
<b>, <strong> | Bold text | <b>Bold</b> |
<i>, <em> | Italic text | <i>Italic</i> |
<cite> | Citations | <cite>Book Title</cite> |
<abbr> | Abbreviations | <abbr>HTML</abbr> |
<input> | Form inputs | <input type="text"> |
<label> | Form labels | <label>Name:</label> |
<button> | Buttons | <button>Click</button> |
<br> | Line breaks | <br> |
<code> | Code snippets | function() |
Example:
<p>
This is a paragraph with
<span style="color: red;">red highlighted text</span>,
a <a href="#">link</a>, and
<img src="icon.png" alt="icon" style="width: 16px; height: 16px;"> an image.
All of these inline elements flow within the text.
</p>Browser Display:
This is a paragraph with red highlighted text, a link, and [icon] an image. All of these inline elements flow within the text.
Complete Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Block vs Inline Elements</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
h1, h2 { color: #333; }
.example {
padding: 15px;
border: 1px solid #ddd;
border-radius: 8px;
margin-bottom: 20px;
background: #f9f9f9;
}
.block-demo {
background: #007bff;
color: white;
padding: 10px;
margin: 5px 0;
}
.inline-demo {
background: #ffc107;
padding: 5px;
margin: 2px;
}
.highlight-box {
border: 2px solid #28a745;
padding: 10px;
margin: 10px 0;
}
</style>
</head>
<body>
<h1>Block vs Inline Elements</h1>
<!-- ====== SECTION 1: BLOCK ELEMENTS ====== -->
<h2>1. Block-Level Elements</h2>
<div class="example">
<p><strong>Block elements start on a new line and take full width:</strong></p>
<div class="block-demo">This is a div (block element)</div>
<div class="block-demo">This div starts on a new line</div>
<div class="block-demo">Each div takes the full width</div>
<hr>
<h3>Common Block Elements:</h3>
<ul>
<li><code><div></code> - Generic container</li>
<li><code><h1></code> to <code><h6></code> - Headings</li>
<li><code><p></code> - Paragraphs</li>
<li><code><ul></code>, <code><ol></code> - Lists</li>
<li><code><table></code> - Tables</li>
<li><code><blockquote></code> - Quotes</li>
</ul>
</div>
<!-- ====== SECTION 2: INLINE ELEMENTS ====== -->
<h2>2. Inline Elements</h2>
<div class="example">
<p><strong>Inline elements flow within text and only take necessary space:</strong></p>
<p>
This is a paragraph with
<span class="inline-demo">inline span</span>,
<b class="inline-demo">bold text</b>,
<i class="inline-demo">italic text</i>,
<a href="#" class="inline-demo">a link</a>, and
<img src="https://via.placeholder.com/16" alt="icon" class="inline-demo"> an image.
They all flow within the text.
</p>
<hr>
<h3>Common Inline Elements:</h3>
<ul>
<li><code><span></code> - Generic inline container</li>
<li><code><a></code> - Anchor links</li>
<li><code><img></code> - Images</li>
<li><code><b></code>, <code><strong></code> - Bold text</li>
<li><code><i></code>, <code><em></code> - Italic text</li>
<li><code><cite></code> - Citations</li>
</ul>
</div>
<!-- ====== SECTION 3: SIDE-BY-SIDE COMPARISON ====== -->
<h2>3. Side-by-Side Comparison</h2>
<div class="example">
<table style="width: 100%; border-collapse: collapse;">
<tr>
<th style="background: #007bff; color: white; padding: 10px; border: 1px solid #ddd;">Block Elements</th>
<th style="background: #28a745; color: white; padding: 10px; border: 1px solid #ddd;">Inline Elements</th>
</tr>
<tr>
<td style="padding: 10px; border: 1px solid #ddd; vertical-align: top;">
<ul>
<li>Start on a new line</li>
<li>Take full width</li>
<li>Can contain block and inline</li>
<li>Used for layout/structure</li>
</ul>
</td>
<td style="padding: 10px; border: 1px solid #ddd; vertical-align: top;">
<ul>
<li>Do not start on a new line</li>
<li>Take only necessary width</li>
<li>Cannot contain block elements</li>
<li>Used for text formatting</li>
</ul>
</td>
</tr>
</table>
</div>
<!-- ====== SECTION 4: VISUAL DEMONSTRATION ====== -->
<h2>4. Visual Demonstration</h2>
<div class="example">
<h3>Block Elements in Action:</h3>
<div style="border: 2px solid #007bff; padding: 10px;">
<h4 style="background: #e9ecef; padding: 10px;">Heading (block)</h4>
<p style="background: #e9ecef; padding: 10px;">Paragraph 1 (block) - This is a block element that starts on a new line and takes the full width.</p>
<p style="background: #e9ecef; padding: 10px;">Paragraph 2 (block) - Notice how each paragraph starts on a new line.</p>
</div>
<br>
<h3>Inline Elements in Action:</h3>
<div style="border: 2px solid #28a745; padding: 10px;">
<p>
This text contains
<span style="background: #ffc107; padding: 2px 5px;">inline span</span>,
<strong style="background: #ffc107; padding: 2px 5px;">strong</strong>,
<em style="background: #ffc107; padding: 2px 5px;">emphasis</em>,
<a href="#" style="background: #ffc107; padding: 2px 5px;">link</a>, and
<img src="https://via.placeholder.com/20" alt="icon" style="background: #ffc107; padding: 2px;">
all within the same line.
</p>
</div>
</div>
<!-- ====== SECTION 5: NESTING RULES ====== -->
<h2>5. Nesting Rules</h2>
<div class="example">
<h3>✅ Correct Nesting:</h3>
<div style="border: 2px solid #28a745; padding: 10px; margin: 10px 0; background: #d4edda;">
<h4>Block containing Inline:</h4>
<p>This is a paragraph with <span style="color: red;">inline text</span> and <a href="#">a link</a>.</p>
</div>
<div style="border: 2px solid #28a745; padding: 10px; margin: 10px 0; background: #d4edda;">
<h4>Block containing Block:</h4>
<div style="background: #f8f9fa; padding: 5px;">
<p>This is a paragraph inside a div.</p>
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>
</div>
</div>
<h3>❌ Incorrect Nesting:</h3>
<div style="border: 2px solid #dc3545; padding: 10px; margin: 10px 0; background: #f8d7da;">
<h4>Inline containing Block (Invalid):</h4>
<p style="background: #ffc107; padding: 5px;">
<span>
<h5 style="margin: 0;">This heading inside a span is invalid!</h5>
</span>
</p>
<p><small>Inline elements cannot contain block-level elements.</small></p>
</div>
</div>
<!-- ====== SECTION 6: THE DIV AND SPAN ====== -->
<h2>6. The Div and Span Elements</h2>
<div class="example">
<h3>Div (Block) - Used for grouping content:</h3>
<div style="background: #e9ecef; padding: 15px; border-radius: 5px;">
<h4>This is inside a div</h4>
<p>All of this content is grouped together.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
<br>
<h3>Span (Inline) - Used for styling specific parts:</h3>
<p>
This text has a
<span style="color: #007bff; font-weight: bold;">blue bold phrase</span>
and a
<span style="color: #28a745; font-style: italic;">green italic phrase</span>.
</p>
<p>
You can also use
<span style="background: #ffc107; padding: 2px 8px; border-radius: 4px;">spans to create highlighted boxes</span>
within your text.
</p>
</div>
<!-- ====== SECTION 7: CHANGING DISPLAY PROPERTY ====== -->
<h2>7. Changing Display with CSS</h2>
<div class="example">
<h3>Default Block → Inline:</h3>
<div style="display: inline; background: #007bff; color: white; padding: 5px;">This div is inline</div>
<div style="display: inline; background: #28a745; color: white; padding: 5px;">This div is also inline</div>
<p><small>These divs now behave like inline elements.</small></p>
<h3>Default Inline → Block:</h3>
<span style="display: block; background: #ffc107; padding: 10px;">This span is block</span>
<span style="display: block; background: #dc3545; color: white; padding: 10px;">This span is also block</span>
<p><small>These spans now behave like block elements.</small></p>
</div>
</body>
</html>Quick Reference
| Category | Characteristics | Common Elements |
|---|---|---|
| Block | New line, full width, can contain blocks | <div>, <p>, <h1>–<h6>, <ul>, <table> |
| Inline | Same line, only necessary width, cannot contain blocks | <span>, <a>, <img>, <b>, <i>, <em> |
Best Practices
✅ Do This:
<!-- Use block elements for structure -->
<div class="container">
<h1>Heading</h1>
<p>Paragraph</p>
</div>
<!-- Use inline elements for text formatting -->
<p>This is <span style="color: red;">important</span> text.</p>
<!-- Nest inline elements inside blocks -->
<p><a href="#">Link</a> within a paragraph.</p>❌ Don’t Do This:
<!-- Don't put block elements inside inline elements -->
<span>
<h1>Invalid!</h1> <!-- This is invalid HTML -->
</span>
<!-- Don't use <div> when <p> is appropriate -->
<div>This is a paragraph but using div</div>
<!-- Don't use <span> for layout -->
<span style="display: block;">This should be a div</span>Pro Tip: Use block elements for structure and layout, and inline elements for styling and formatting within the content. Remember that you can change an element’s display behavior using CSS (display: block; or display: inline;), but always use semantic HTML first!
Stop using slow, ad-bloated tool sites! 🤮
🔎 Search “KandZ Tools” on Google to use many professional utilities for free.
KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)
⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free
🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!
