Before explaining the difference between block element and inline element tags, firstly, we are going to discover the two types of elements or tags in the HTML language. Both of them are “block element” and the “inline element”, in which each of them is different to each other.
In HTML, the entire text or ‘content’ of web pages should be within or between the opening and closing of HTML tag. Tags in HTML can be divided into two parts, namely the block tags, and the inline tags. The difference between the two is in the way web browsers display these tags.
Understanding The Block Level Element in HTML Language
Block level element tag has a function to divide HTML page into separate parts or to be blocked. Examples of block element are; paragraph tag <p>, list <ol> or <ul>, and heading <h1> until <h6>. A block element is displayed separately before and after of the entire tag.
Default Web browser will display the block level element separately as if in a ‘box’ and starts on a new line (do following the previous tag), and usually also have a spacing of tag before and after the tag.
Here is an example of the <p>, <h2>, and <ol> in HTML:
<!DOCTYPE html> <html> <head> <title>Learn HTML Online</title> </head> <body> <h2>I am learning Block Element in HTML language</h2> <h4>Block Element Tags</h4> <P>p and h1 tags are block element tags</p> <p>Both will begin on a new line</p> <ul> <li>li tag is also a block element</li> <li>and will have a space from tag p before it begin</li> </ul> </body> </html>
From the example above, you will see that each tag will be displayed in a new line and has space from the previous tag.
Recommended to read; best text editors for web developers.
Understanding the Inline Level Element in HTML Language
In contrast to the block level element, inline-level element tag will be ‘fused’ with the tag before and after. This tag will not block or start a new line but will remain in the block. An inline tag will also not be displayed with space before and after the tag. The example of inline tags are such as: <em>, <i>, <strong> and <b>.
Here is an example of our HTML page before, but all the tags are replaced with inline tags like <em>, <i>, and <b>:
<!DOCTYPE html> <html> <head> <title>Learn HTML Online</title> </head> <body> <p><strong>I am learning Inline Element tag in HTML</strong> <i>Inline Element Tags</i> <b>i and em are block tags</b> <em>Both of them are not begin on a new line</em> </p> </body> </html>
Apart from the display of bold or italic text, the inline element is a type of tag that follows the contours of the existing HTML tags.
The display that becomes the difference between block element and inline element is not absolute. By using CSS language, you can change the display of block element ‘as if’ like inline element and vice versa. However, because the goal of HTML is not to display a display of web page, but to create a web page structure, so in using HTML you should not focus on the display, but focus on the structure. To handle the display of a web page, you should use CSS.