Scribd
Upload
30 views

HTML - Blocks

This document discusses HTML block and inline elements. Block elements appear on their own line and include elements like <p>, <h1>-<h6>, <ul>, and <ol>. Inline elements do not start a new line and include elements like <b>, <i>, and <li>. It also covers the <div> and <span> tags which are used to group other HTML elements, with <div> for block elements and <span> for inline elements. Examples are given to demonstrate using the <div> and <span> tags.

Uploaded by

Manish Singh Suryavanshi
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
30 views

HTML - Blocks

This document discusses HTML block and inline elements. Block elements appear on their own line and include elements like <p>, <h1>-<h6>, <ul>, and <ol>. Inline elements do not start a new line and include elements like <b>, <i>, and <li>. It also covers the <div> and <span> tags which are used to group other HTML elements, with <div> for block elements and <span> for inline elements. Examples are given to demonstrate using the <div> and <span> tags.

Uploaded by

Manish Singh Suryavanshi
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

7/25/2020 HTML - Blocks - Tutorialspoint

HTML - Blocks

All the HTML elements can be categorized into two categories (a) Block Level Elements (b)Inline
Elements.

Block Elements
Block elements appear on the screen as if they have a line break before and after them. For
example, the <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <ol>, <dl>, <pre>, <hr />,
<blockquote>, and <address> elements are all block level elements. They all start on their own new
line, and anything that follows them appears on its own new line.

Inline Elements

Inline elements, on the other hand, can appear within sentences and do not have to appear on a
new line of their own. The <b>, <i>, <u>, <em>, <strong>, <sup>, <sub>, <big>, <small>, <li>,
<ins>, <del>, <code>, <cite>, <dfn>, <kbd>, and <var> elements are all inline elements.

Grouping HTML Elements


There are two important tags which we use very frequently to group various other HTML tags (i)
<div> tag and (ii) <span> tag

The <div> tag


This is the very important block level tag 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 page using <div> tag. 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 −

Live Demo
<!DOCTYPE html>
<html>

<head>
<title>HTML div Tag</title>
https://www.tutorialspoint.com/html/html_blocks.htm 1/4
7/25/2020 HTML - Blocks - Tutorialspoint

</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>

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

</html>

This will produce the following result −

https://www.tutorialspoint.com/html/html_blocks.htm 2/4
7/25/2020 HTML - Blocks - Tutorialspoint

This is first group

Following is a list of vegetables

Beetroot
Ginger
Potato
Radish

This is second group

Following is a list of fruits

Apple
Banana
Mango
Strawberry

The <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 −

Live Demo
<!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>

https://www.tutorialspoint.com/html/html_blocks.htm 3/4
7/25/2020 HTML - Blocks - Tutorialspoint

</html>

This will produce the following result −

This is red and this is green

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

You might also like