Before understanding Block and Inline elements, you should know that every HTML tag you use on a webpage is considered an HTML element.
Each element defines how content is displayed and structured. But based on their display behavior, all HTML elements are divided into two major types:
- Block-level elements
- Inline elements
Let’s understand both in detail
1. What Are Block-Level Elements?
A Block-level element always starts on a new line and takes up the full width available in the browser. It creates a block of content (like a paragraph or section) on the web page.
These elements are mainly used to structure the layout dividing the page into parts like headers, sections, articles, or paragraphs.
Example of Block Elements:
- <div> – Division or section container
- <p> – Paragraph
- <h1> to <h6> – Headings
- <header>, <footer>, <section> – Semantic block elements
- <ul>, <ol>, <li> – Lists
- <table>, <form>, <nav>, <article>, etc.
Example Code of Block Elements
<!DOCTYPE html>
<html>
<head>
<title>Block Elements Example</title>
</head>
<body>
<h2>Example of Block Elements</h2>
<h3>This is a Heading (Block Element)</h3>
<p>This is a paragraph. It also starts on a new line and takes full width of the browser.</p>
<div style="background-color:#f0f0f0;padding:10px;">
This is a DIV element – used as a container for grouping HTML content.
</div>
</body>
</html>💡 Tip: You can use CSS to control a block element’s height, width, margin, and padding.
Here are the block-level elements in HTML:
<address>
<article>
<aside>
<blockquote>
<canvas>
<dd>
<div>
<dl>
<dt>
<fieldset>
<figcaption>
<figure>
<footer>
<form>
<h1>-<h6>
<header>
<hr>
<li>
<main>
<nav>
<noscript>
<ol>
<p>
<pre>
<section>
<table>
<tfoot>
<ul>
<video>
2. What Are Inline Elements?
An Inline element does not start on a new line. It only takes up as much width as its content needs. These elements are mainly used to format text or highlight small portions inside block elements.
Example of Inline Elements:
- <span> – Inline container
- <a> – Anchor (link)
- <strong>/ <b> – Bold text
- <em> / <i> – Italic text
- <img> – Inline image
- <label>, <input>, <small>, <sub>, <sup>
Example Code of Inline Elements
<!DOCTYPE html>
<html>
<head>
<title>Inline Elements Example</title>
</head>
<body>
<h2>Example of Inline Elements</h2>
<p>This is a <strong>bold text</strong> and this is an <em>italic text</em>.</p>
<p>Visit our <a href="#">website</a> for more tutorials.</p>
<span style="color:blue;">This is a span element</span> inside a paragraph.
</body>
</html>💡 Tip: Inline elements are perfect for small text formatting and hyperlinks they can’t contain block elements.
Here are the inline elements in HTML:
<a>
<abbr>
<acronym>
<b>
<bdo>
<big>
<br>
<button>
<cite>
<code>
<dfn>
<em>
<i>
<img>
<input>
<kbd>
<label>
<map>
<object>
<output>
<q>
<samp>
<script>
<select>
<small>
<span>
<strong>
<sub>
<sup>
<textarea>
<time>
<tt>
<var>Note: An inline element cannot contain a block-level element!
Example of Block vs Inline (Together)
<!DOCTYPE html>
<html>
<head>
<title>Block vs Inline Elements</title>
<style>
div {
background-color: lightblue;
padding: 10px;
margin: 5px;
}
span {
background-color: yellow;
padding: 5px;
}
</style>
</head>
<body>
<h2>Block vs Inline Elements Example</h2>
<div>This is a DIV (block-level element)</div>
<p>This is a paragraph (block element) containing
<span>a SPAN (inline element)</span> inside it.</p>
</body>
</html>💡 Observation: Block elements define structure, while inline elements define style and content flow.