Block-Level and Inline Elements in HTML

Block-Level and Inline Elements in HTML with Examples

In this article, I am going to discuss Block-Level and Inline Elements in HTML with Examples. Please read our previous article where we discussed Iframes in HTML with Examples. At the end of this article, you will learn everything about Block-Level and Inline Elements in HTML with Examples.

Block-Level Elements in HTML

Block elements are elements that begin on a new line. A block element takes up the entire width available for that content. Block-level elements also have a top and bottom margin around the element.

In comparison to inline elements, block-level elements create a larger structure. A block-level element always utilizes the entire available width. <address>, <article>, <aside>, <blockquote>, <canvas>,<div> are some examples of block-level elements.

<!DOCTYPE html>
<html>
<body>

<h1>Hello</h1>
<p>This para will be displayed on new line because it is a block level element</p>

</body>
</html>

When you run the above HTML code, you will get the following output in the browser.

As you can see in the above example there is a lot of space available after hello but the para is printed on the next line because <p> is a block-level element.

Inline Elements in HTML

Elements that do not start on a new line are referred to as inline elements. It does not begin on a new line and occupies only the necessary width, i.e., the space defined by the tags defining the HTML element, instead of interrupting the flow of the content. <a>, <abbr>, <acronym>, <b>, <bdo>, <big>, <br> are some examples of inline elements.

<!DOCTYPE html>
<html>
<body>

<span>Hello !!!</span>
<span>This text be displayed on same line because it is a inline element</span>
<a href="https://www.google.com">Hello</a>
<a href="https://www.google.com">Hello</a>

</body>
</html>

When you run the above HTML code, you will get the following output in the browser.

All elements are displayed on the same line because inline elements take only the required space and don’t start on a new line. Inline elements also don’t have top and bottom margins around the elements.

List of block-level and inline Elements in HTML

In this article, I am going to discuss JavaScript in HTML with Examples. Here, in this article, I try to explain Block-Level and Inline Elements in HTML with Examples and I hope you enjoy these Block-Level and Inline Elements in HTML with Examples article.

Dot Net Tutorials

About the Author: Pranaya Rout

Pranaya Rout has published more than 3,000 articles in his 11-year career. Pranaya Rout has very good experience with Microsoft Technologies, Including C#, VB, ASP.NET MVC, ASP.NET Web API, EF, EF Core, ADO.NET, LINQ, SQL Server, MYSQL, Oracle, ASP.NET Core, Cloud Computing, Microservices, Design Patterns and still learning new technologies.