HTML Block and Inline Elements
Every HTML element has a default display behavior — it is either a block element or an inline element. Understanding this difference is essential for controlling how content flows and is laid out on a page.
Block-Level Elements
A block-level element always starts on a new line and takes up the full available width of its container, regardless of how much content it has. Block elements stack on top of each other.
Think of block elements like stacking bricks — each one sits on its own row.
<h2>This is a heading (block)</h2>
<p>This is a paragraph (block). It starts on a new line.</p>
<p>This second paragraph also starts on a new line.</p>
<div>This is a div (block). It takes full width.</div>Common Block-Level Elements
| Tag | Description |
|---|---|
<h1> – <h6> | Headings |
<p> | Paragraph |
<div> | Generic container block |
<ul>, <ol> | Unordered and ordered lists |
<li> | List item |
<table> | Table |
<form> | Form container |
<header>, <footer> | Semantic sections |
<section>, <article> | Semantic content areas |
<blockquote> | Quoted block of text |
<pre> | Preformatted text |
Inline Elements
An inline element does not start on a new line. It only takes up as much width as its content needs. Inline elements flow within the surrounding text like words in a sentence.
Think of inline elements like words in a sentence — they sit side by side on the same line.
<p>
This text has <strong>bold words</strong> and
<em>italic words</em> all on the same line.
There is also a <a href="#">link</a> inline.
</p>Common Inline Elements
| Tag | Description |
|---|---|
<a> | Hyperlink |
<span> | Generic inline container |
<strong> | Bold important text |
<em> | Italic emphasized text |
<img> | Image |
<br> | Line break |
<code> | Inline code snippet |
<label> | Form label |
<input> | Form input (most types) |
<button> | Button |
<small> | Small text |
<mark> | Highlighted text |
Side-by-Side Comparison
| Feature | Block Element | Inline Element |
|---|---|---|
| Starts on | New line | Same line as other content |
| Width | Full container width | Only as wide as content |
| Height | Can be set | Cannot typically set height |
| Common example | <p>, <div> | <span>, <a> |
| Can contain | Block and inline elements | Only inline elements |
Nesting Rules
Block elements can contain other block elements and inline elements. However, inline elements should only contain other inline elements — placing a block element inside an inline element is invalid HTML.
<!-- Correct: Block inside block -->
<div>
<p>A paragraph inside a div.</p>
</div>
<!-- Correct: Inline inside block -->
<p>Text with a <strong>bold word</strong> inside.</p>
<!-- Incorrect: Block inside inline (avoid this) -->
<span><p>Wrong: paragraph inside a span.</p></span>Key Points to Remember
- Block elements start on a new line and take full width — they stack vertically
- Inline elements flow with text and only take as much space as their content needs
- Block elements can contain both block and inline elements
- Inline elements should only contain inline-level content
<div>is the most common block container;<span>is the most common inline container- This behavior can be changed using CSS, but understanding the defaults is the foundation