Difference Between Block and Inline Elements in HTML

HTML

HTML stands for 'Hyper Text Markup Language‘. It used to create of the structure of the web page. As, it is the skeleton of the websites. For Example there a website ibasa.in in that website you can see the title, buttons, images, videos, headings, links etc All these is written in the HTML. Generally, all the website content is HTML, Styled using CSS and made actionable using Javascript.

Basic Terms in HTML

Tag

It tells browser that how to display the provided content on the web page. These are enclosed in between angle brackets (<tag_name>). Most of the tags has an opening tag (<tag_name>) and a closing tag (</tag_name). There some tags which are self closing tags (<tag_name/>).

Some of the tags are:

<h1>Main Title</h1> => These tag tells browser to display the text “Main Title“ as Bolder with a bigger font size.
<h2>Sub Title <h2/> => These tag tells browser to display the text “Sub Title“ as Bolder but with a font size lesser that h1 tag.

and so on. There are total 6 title tags from h1 to h6.

Example: <h1> </h1>, <body> </body>, <img/>, <div> </div>, <hr/>, etc.

Element

If the tag has a content in it then all these refer as an Element. It is a combination of the Opening Tag, Content and a Closing Tag.

Example: <h1>Title</h1> => Element

Note: Self closing tag are refered as “Void Element“.

Block Elements:

These are the elements, which takes a complete width of the web page. If I am using a block element then the next element will be display in a new line. The block element also has some top, bottom margin and padding.

Example of Block elements:

<div></div>
<p></p>
<nav></nav>
<main><main>
<section> </section>
and so on.

Code Implementation:

Preview:

Inline Elements:

These are the elements, which takes only width it needs. As it won’t take the complete width as block elements. It will take as per the the content size. It doesn’t have the margin and padding by default. The next element to an inline element can able to display beside it.

Example of Inline elements:

<img/>
<span> </span>
<a> </a>
<input> </input>
<label> </label>
<b> </b>
and so on.

Code Implementation:

Preview:

Key Differences

Block Element	Inline Element
It will take the complete width on the web page.	It will take only required width on the web page.
It does’t depend on then content size, Whether content is small or big it takes a complete row from it’s starting till the end of the web page.	It depends on the content size and takes only width from the content starting till it ends.
It has top, bottom margin and padding.	It doesn’t have any margin or padding.
It doesn’t allow any other element to display beside it.	It allows other inline element to display beside it.

Conclusion

We have the basic HTML terms and the difference between the Block Elements and Inline Elements. Depend on the requirement we use the elements. But, At the end we can change the block element to inline or inline to block element using CSS (Cascading Style Sheets). As a web developer knowing this concept gives the basic understanding while creating the web pages.