Every tag and element in the HTML has its own purpose. Here, the tag refers to the individual opening and closing tag and the combination of both tags with the content in it is known as an element.
For eg: <p> and </p> both are HTML tags whereas <p> Content is here</p> is an element.
Let's come back to our topic of inline and block elements. Many elements have different properties with respect to the screen size that is some of them occupy full screen and some of them occupy the sufficient screen as required.
This property is defined by Inline and block elements.
Block elements: Block elements occupies the full width of the screen concerning the element height. eg: <p>, <h1>, <div>, <pre>, <footer> and so on.
For instance:
<!DOCTYPE html>
<html>
<head>
<title>Blog Page</title>
</head>
<body>
<h1> This is block element </h1>
<p> This is also a block element </p>
</body>
</html>
Output:
Here it is clearly visible that both elements occupied the full width of the screen.
Inline elements: Inline elements occupy only sufficient or minimum screen as required. eg: <span>, <form>, <img>, <input>, <a> and so on.
For instance:
<!DOCTYPE html>
<html>
<head>
<title>Blog Page</title>
</head>
<body>
<span> This is inline element </span>
<span> <b>This is also a inline element</b> </span>
</body>
</html>
Output:
Now using both directly:
<!DOCTYPE html>
<html>
<head>
<title>Blog Page</title>
</head>
<body>
<span> <h1>This is a inline element?</h1> </span>
<span> <b>This is a inline element</b> </span>
</body>
</html>
Output:
I Hope you are now well clear with the concept of Inline and block elements.