In HTML, every element is either block-level or inline, which determines how they are displayed in the browser.
1. Block-Level Elements
- Start on a new line by default.
- Take up the full width available (stretch from left to right).
- Can contain other block elements and inline elements.
- Useful for structuring page layout.
Examples:
<div>, <p>, <h1> to <h6>, <section>, <article>, <header>, <footer>, <nav>, <table>, <form>, <ul>, <ol>, <li>, <blockquote>
Example Code:
<p>This is a paragraph.</p>
<div>This is inside a div block.</div>
Output:
Each appears on its own line.
2. Inline Elements
- Do not start on a new line.
- Only take as much width as needed for the content.
- Usually used to style small portions of text inside a block-level element.
- Cannot contain block-level elements (only other inline elements).
Examples:
<span>, <a>, <strong>, <em>, <img>, <code>, <label>, <abbr>, <b>, <i>, <mark>, <small>, <sub>, <sup>
Example Code:
<p>This is <span style="color:red;">red text</span> inside a paragraph.</p>
Output:
The text flows in the same line.
3. Key Differences Table
| Feature | Block-Level | Inline |
|---|---|---|
| Line Break | Starts on a new line | Does not start on a new line |
| Width | Takes full width available | Takes only the needed width |
| Containment | Can contain block + inline elements | Can contain only inline elements |
| Examples | <div>, <p>, <section> | <span>, <a>, <img> |
| Purpose | Structure/layout | Formatting small pieces of content |
4. Special Case: Inline-Block
- Acts like inline (no automatic new line).
- Behaves like block in that you can set
widthandheight.
<span style="display:inline-block; width:100px; height:50px; background:lightblue;">Box</span>
5. Visual Example
Block Element:
[Heading (full width)]
[Paragraph (full width)]
Inline Element:
[Some text [link] more text here]
