HTML Block and Inline Tags

In this article, we will learn about Block level and Inline elements. In Html, all Html element has a default display value, depending on what type of element it is.

There are two types of display values: block and inline.

block-and-inline-tag

Note: Tag or element both are the same names so don’t be confused.

Block-level Elements

A block-level tag always starts with a new line. It takes up full width (100% value) from left to right. We can change the block-level tag into the inline-level tag.

Following are various block-level elements in HTML

<pre>,<div>,<address>,<article>,<aside>,<blockquote>,<canvas>,<dd>,<dl>,<dt>,<fieldset>,<figcaption>,<figure>,<footer>,<form>, <h1>-<h6><header><hr><li><main><nav><noscript><ol><p><pre><section><table><tfoot><ul><video>

Example 1

Try Now


<!DOCTYPE html>
<html>
<head>
<title>Block Level Element</title>
</head>
<body>
<div>This is Block level tag </div>
<p> This is also block-level tag</p>
</body>
</html>

In the given above example <div> and <p> is block-level tag. It breaks a new line and takes up full width but still confusing. To see the next example.

Example 2

Try Now


<!DOCTYPE html>
<html>
<head>
<title>Block Level Element</title>
</head>
<body>
<div style="border:2px solid black">Now we can see it take up full width.</div>
<p style="background-color: red"> Note: style is the part of css we will learn later</p>
</body>
</html>

Inline-level tag

An inline tag does not start with a new line. it takes up width as per the content. We can also change the inline tag to a block-level tag by using CSS.

Following are the inline tags in HTML.

<pre>,<a><abbr><acronym><b><bdo><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 1

Try Now


<!DOCTYPE html>
<html>
<head>
<title>Iline Level Element</title>
</head>
<body>
<span>This is an inline element</span>
<button type="button"> Button is also inline element</button>
</body>
</html>

Example 2

Try Now


<!DOCTYPE html>
<html>
<head>
<title>Iline Level Element</title>
</head>
<body>
<span style="border:2px solid black">Now we can see it take up width as per content.</span>
<button type="button" style="background-color:green; padding:5px"> Button </button>
</body>
</html>

Note: An inline element cannot contain a block-level element

The <div> Element

The <div> tag is often used as a container for other HTML tags. It has no required attributes, but some common attributes we can use like style, id, and class.
Let see the example of how we can use style.

Example 1

Try Now


<!DOCTYPE html>
<html>
<head>
<title>Block Level Element with style</title>
</head>
<body>
<div style="background-color: gray; padding: 20px;color:white">Block level element used with "style"</div>
</body>
</html>

The <span> Tag

The <span> tag is an inline container. It is used to mark up a part of a text or a part of a document. It has no required attributes, but style, class, and id are common.
Let us see the example of how can be used with style.

Example 1

Try Now


<!DOCTYPE html>
<html>
<head>
<title>span used in HTML</title>
</head>
<body>
<p>We are learning <span style="color:blue;font-weight:bold">HTML</span> After that we will learn <span style="color:red;font-weight:bold">CSS</span></p>
</body>
</html>

_{Chapter Summary}

HTML has to display value: block and inline
A block-level tag always starts with a new line and takes up the full width.
An inline element doesn’t start with a new line and takes space according to the content.
We can create block-level tags into the inline tags and inline tags to block-level tags by using CSS (Cascading style sheet). The given short example will help you.
_{The <div> element is block-level element. it is often used as a container.}
_T_he<span> is an inline container.

_{HTML Tags}

Element	Description
<div>	It is used as a section document ( Block-level )
<span>	It is used as a section in the document ( Inline )

Prev Next