Scribd
Upload
24 views

10 HTML - Block and Inline Elements

A HTML - Block and Inline Elements

Uploaded by

AGBA TERKUMA
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
24 views

10 HTML - Block and Inline Elements

A HTML - Block and Inline Elements

Uploaded by

AGBA TERKUMA
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

7/17/24, 11:01 AM HTML - Block and Inline Elements

HTML - Block and Inline Elements


Every HTML element has it's own display value depending on the type of elemment. Block
elements used to creat logical and semantic layout of a web page. They help to organize
the content into meaningful sections and make it easier for browsers, search engines, and
site visitors to understand the structure and meaning of different parts of the web page.
Inline elements are used to make useful block element, like adding anchor links.

In HTML, the blocks are enclosed by various elements, such as <div>, <p>, <table>
and so on. All the HTML elements can be categorized into two categories.

Block Elements
Inline Elements

Block Elements
Block level elements appear on the screen as if they have a line break before and after
them. A few block elements are listed below.

List of HTML Block Elements


Below mentioned all the elements are block level elements, they all start with a new line
on their own, and anything that follows them appears on the next line.

HTML Block Elements

<address> <article> <aside> <blockquote> <canvas>

<dd> <div> <dl> <dt> <fieldset>

<figcaption> <figure> <footer> <form> <h1> - <h6>

<header> <hr> <li> <main> <nav>

<noscript> <ol> <p> <pre> <section>

<table> <tfoot> <ul> <video>

Example of block level Elements

https://www.tutorialspoint.com/html/html_blocks.htm 1/5
7/17/24, 11:01 AM HTML - Block and Inline Elements

In this example, we are going to use some of the block level elements. On executing the
below HTML code, it will produce one heading and two paragraphs separated by a
horizontal line

Open Compiler

<!DOCTYPE html>
<html>

<head>
<title>HTML Block Level Elements</title>
</head>

<body>
<h3>HTML Block Level Elements</h3>
<p>
This line will appear in the next line
after Heading.
</p>
<hr>
<p>
This line will appear after Horizontal
Line.
</p>
</body>

</html>

Inline Elements
Inline elements, on the other hand, can appear within the same line and do not start a
new line on their own. Some common inline elements are as follows:

List of HTML Inline Elements


Below mentioned all the elements are inlnine elements, they did not start with a new line
on their own.

HTML Inline Elements

<a> <abbr> <acronym> <b> <bdo>

https://www.tutorialspoint.com/html/html_blocks.htm 2/5
7/17/24, 11:01 AM HTML - Block and Inline Elements

<big> <br> <button> <cite> <code>

<dfn> <em> <i> <img> <input>

<kbd> <label> <map> <object> <output>

<q> <samp> <script> <select> <small>

<span> <strong> <sub > <sup> <textarea>

<time> <tt> <var>

Example of Inline Elements

In the following example, we are going to illustrates the use of a few inline elements. The
below code will generate a bold line and an italic line.

Open Compiler

<!DOCTYPE html>
<html>

<head>
<title>HTML inline Element</title>
</head>

<body>
<h3>Inline Elements in HTML</h3>
<!-- Using <b> inline element -->
<p>This <b>paragraph</b> is bold. </p>
<!-- Using <i> inline element -->
<p>This is an <i>italic</i> paragraph.</p>
</body>

</html>

Explore our latest online courses and learn new skills at your own pace. Enroll and
become a certified expert to boost your career.

Grouping HTML Block and Inline Elements

https://www.tutorialspoint.com/html/html_blocks.htm 3/5
7/17/24, 11:01 AM HTML - Block and Inline Elements

There are two ways to group these elements;

Using <div> Tag


Using <span> Tag

Grouping using <div> Tag


The <div> tag is a block level element which plays a big role in grouping various other
HTML tags and applying CSS on group of elements. Even now <div> tag can be used to
create webpage layout where we define different parts (Left, Right, Top etc.) of the web
page. This tag does not provide any visual change on the block but this has more meaning
when it is used with CSS.

Example
Following is a simple example of <div> tag. We will learn Cascading Style Sheet (CSS) in
a separate chapter but we used it here to show the usage of <div> tag −

Open Compiler

<!DOCTYPE html>
<html>
<head>
<title>HTML div Tag</title>
</head>
<body>
<!-- First group of tags -->
<div style="color:red">
<h4>This is first group</h4>
<p>Following is a list of vegetables</p>
<ul>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</div>
<!-- Second group of tags -->
<div style="color:green">
<h4>This is second group</h4>
<p>Following is a list of fruits</p>

https://www.tutorialspoint.com/html/html_blocks.htm 4/5
7/17/24, 11:01 AM HTML - Block and Inline Elements

<ul>
<li>Apple</li>
<li>Banana</li>
<li>Mango</li>
<li>Strawberry</li>
</ul>
</div>
</body>
</html>

Grouping using using <span> Tag


The HTML <span> is an inline element and it can be used to group inline-elements in an
HTML document. This tag also does not provide any visual change on the block but has
more meaning when it is used with CSS.

The difference between the <span> tag and the <div> tag is that the <span> tag is
used with inline elements whereas the <div> tag is used with block-level elements.

Example

Following is a simple example of <span> tag. We will learn Cascading Style Sheet (CSS)
in a separate chapter but we used it here to show the usage of <span> tag.

Open Compiler

<!DOCTYPE html>
<html>
<head>
<title>HTML span Tag</title>
</head>
<body>
<p>
This is <span style="color:red">red</span>
and this is <span style="color:green">green</span>
</p>
</body>
</html>

https://www.tutorialspoint.com/html/html_blocks.htm 5/5

You might also like