Block-Level and Inline
Elements in HTML
Dot Net Tutorials
Back to: HTML Tutorials
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.
<p>This para will be displayed on new line because it
is a block level element</p>
<!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>
<!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.
<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>
<!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>
<!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.
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.
