Difference Between Inline and Block Elements in HTML

#html #tags #html5 #htmltags

Ever noticed that while using heading tags ( <h1> </h1>, <h2> </h2> etc), they occupies the whole horizontal line in which they are used. But this is not the case while using <span> or<a> </a> tags… Why?

Well simply because heading tags are block elements and tags like <span> and<a> </a> (anchor) are inline elements.

But what are inline and block elements in HTML? And how these are different from each other, Let’s find out. But first, let’s discuss each of them briefly.

Block Elements

These elements occupy the whole horizontal line in which they are used irrespective of the content they may contain. They also have top and bottom margins. We cannot place any other element next to it on the same horizontal line. They start from the new line if used in any continuing line.
Some common examples of Block elements are:

<h1>, <h2> … <h6>: Used for making headings
<hr>: Used for creating horizontal lines
<div>: Used for making separate divisions within the page

Inline Elements
Unlike Block elements, Inline elements take only enough of the width as per the content they contain. They also don’t have any top and bottom margins like that of block elements. They can be used within any continuing line and don’t start or create any new line unless explicitly created.
Some common examples of Inline Elements are:

<span>: Used for making inline containers
<br>: Used for creating line breaks
<a>`: Used for inserting hyperlinks within the page

Let’s look at a code demonstration to solidify the above discussed points

Output:

For Inline Elements

Differences

As evident from the above two snippets, Block elements occupy the whole horizontal spaces in which they are used (colored spaces indicate that area occupied by block elements) while Inline elements only occupy the space which is enough for its content to fit in.
Heights and widths aren’t considered for any inline elements which is not the case for block elements.
Only left and right margins are there for inline elements and in contrast to that block elements, enjoys margins and padding from all sides.
Block elements are used widely for structuring purposes assisted by some inline elements.
Block elements begin and end with a new line while Inline elements are accommodated in the running line.
Inline elements can break among lines but block elements can’t.

Summary

Here is the summary of all the key differences between Inline and block elements in HTML as discussed above

Conclusion

In this article, we have discussed briefly what inline and block elements are and what is the difference between inline and block elements in HTML with some commonly used examples.