Scribd
Upload
42 views

Block-Level and Inline Elements in HTML

The document discusses block-level and inline elements in HTML. Block elements begin on a new line and take up the full width, while inline elements do not begin on a new line and only take the space defined by their tags. Examples are provided of common block and inline elements and how they appear in sample HTML code.

Uploaded by

Jeronimo
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
42 views

Block-Level and Inline Elements in HTML

The document discusses block-level and inline elements in HTML. Block elements begin on a new line and take up the full width, while inline elements do not begin on a new line and only take the space defined by their tags. Examples are provided of common block and inline elements and how they appear in sample HTML code.

Uploaded by

Jeronimo
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 10

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.

You might also like