In the previous post, we have learned about the iframe tag and how we can use it on an HTML page to embed external web pages/content. In this post, we will learn the difference between the Block and Inline elements/tags.
Block Elements:
The block or block-level elements/tags are those HTML tags that 1) cover the 100% available width on the screen and 2) always start from a new line. For example the <div>, <p>, <h1>-<h6>, <form>, <ol>, <ul>, <li>, <table>, <video> tags etc. are the block-level elements/tags.
Inline Elements:
The inline elements/tags cover only the width required by the inner content of the tag and start from where the previous inline element is completed. For example the <span>, <a>, <img>, <br>, <i>, <strong> tags are the inline elements.
Example
Code:
<h3>The following two paragraphs will start from a new line because they are enclosed in p tag which is a block-level element.</h3>
<p>The is a block-level element.</p>
<p>This is another block-level element.</p>Output:
The following two paragraphs will start from a new line because they are enclosed in p tag which is a block-level element.
The is a block-level element.
This is another block-level element.
Code:
<h3>The following two paragraphs will start from where the previous element is ended because they are enclosed in span tag which is an inline element.</h3>
<span>The is an inline element. </span>
<span>This is another inline element.</span>Output:
The following two paragraphs will start from where the previous element is ended because they are enclosed in span tag which is an inline element.
The is an inline element. This is another inline element.
Video Tutorial (Urdu Language):
Got Stuck? Any Questions?
In case of any questions, please feel free to ask in the comments section below. Thanks