Post Details

What are Inline and Block-level elements in HTML?

Programming

What are Inline and Block-level elements in HTML?

Hey lads! We already have seen the introduction to the web application and also overall use and structure of an HTML document. Now let us dive deep into it like some very basic technical details. In HTML there are many tags in which <div> and <span> are the major tags where all the contents are contained in it frequently. So what is the major difference between <div> and <span> tags? This question gives rise to one very important concept of HTML! Inline and block elements. <div> is the block element and <span> is the inline element. First of all these block and inline properties of the elements related to the width of the element.

 

Block-level Element

           A Block element is like a brick which occupies the whole width of the display. So the element next to it voluntarily goes below. So simply we could remember the block element as full-width elements Some of the block elements are <div>, <p>(Paragraph), <h1>(headings from 1 to 6) etc., Even if you type a single letter inside the <p> tag it occupies the whole width, so the block element has 100% width no matter what size of the content it holds.

 

Inline Element

         An Inline element's width is based on the content it holds. An inline element does not have a definite width, so the next the element voluntarily sits beside. So simply we could interpret this inline element as whatever the width of the content is the width of this inline containers. Some of the inline elements are <span>, <i>(italics), <a> (anchor tag) etc., For the inline elements you cannot set specific width and height as it automatically takes the content width and height.

 

 

   From the above diagram you can get an idea block-level and inline elements. For simplicity, I have given half the width and 100% per cent height for the span elements without the inner content but it does not have any width and height for itself.

    This block-level and inline element concept is the most important concept in HTML and CSS. For now just get the basic understanding of what is a block and inline elements, in the upcoming articles we shall see how to it is being used practically in real-time.

 

Thank you so much for reading our article hope it will be useful to you. For any doubts just make a comment in the below section, also share it with your friends. I have attached Thamil video tutorial at the end of this article if you like just take a look at it. Let us meet in another article.!

 

Thamil HTML inline and block elements video - https://youtu.be/yR6omWSNTkA