HTML Tutorial: HTML Block & Inline Elements
Learn the difference between block-level and inline elements with colorful examples
HTML elements are block-level or inline. Understanding this helps layout and design of webpages.
1️⃣ Block-Level Elements
Block-level elements start on a new line and take full width.
Common examples: <div>, <p>, <h1>-<h6>
INPUT:
<h1>Welcome to My Website</h1>
<p>This is a block-level paragraph. It starts on a new line and stretches the full width.</p>
<div>This is a block-level div.</div>
OUTPUT:
Welcome to My Website
This is a block-level paragraph. It starts on a new line and stretches the full width.
This is a block-level div.
✔️ Each element starts on a new line ✔️ Useful for sections, paragraphs, and headings
2️⃣ Inline Elements
Inline elements do not start on a new line. They flow within a line.
Common examples: <span>, <a>, <strong>
INPUT:
<p>
This is a normal text with an inline span inside.
Also, this is a link.
</p>
OUTPUT:
This is a normal text with an inline span inside. Also, this is a link.
✔️ Inline elements stay within the line of text ✔️ Useful for styling parts of text, links, or emphasis
3️⃣ Combining Block & Inline Elements
Block and inline elements can be combined for better structure and style.
INPUT:
<div>
Our Services
We offer web development,
graphic design,
and SEO optimization.
</div>
OUTPUT:
Our Services
We offer web development, graphic design, and SEO optimization.
✔️ Use div to wrap sections
✔️ Use inline elements like span to highlight keywords
4️⃣ Block vs Inline Summary
| Feature | Block | Inline |
|---|---|---|
| Starts on new line? | ✅ Yes | ❌ No |
| Width | Full width | Width of content |
| Common tags | <div>, <p>, <h1>-<h6> | <span>, <a>, <strong> |
🚀 What’s Next?
👉 HTML Div
Next lesson will cover:
- Using <div> for page layout
- Combining block & inline elements inside divs
- Styling divs with colors, borders, and padding
Understanding block and inline elements is key for structuring and styling webpages effectively.