Html Element and its types | How many types of Html Element

The HTML document is a text file that is made up with the help of the Html Element. Basically, an Html element is the content between the two tags (Starting and Closing tag) is known as Html Element.

In simple words, we can say that the content in which we write something between the two tags (e.g starting and closing) is basically known as Html Elements. Let me explain with the example:

For example: let’s suppose we have to write some paragraph in HTML, so we need to use the tag for writing the paragraph:-

 Welcome To Our Website 

As you can see the content in the blue color “Welcome To Our Website” is simply known as Element/Html Element.  is a Starting Tag and  is a closing tag.

Now let’s see how many types of HTML elements are there:

Table of Contents

Types of HTML Element

Block Level Element
Inline Element

1). Block-Level Element

Block-level elements are those types of elements that always start with the new line or we can say the content which takes 100% width to cover is known as a “Block-Line Element”.

Let me give you an example:

<!DOCTYPE html>
<html>
<head>
<title>Block-level Element</title>
</head>
<body>
<h1 style="background-color: red"> What is HTML Element </h1>
<p style="background-color: green"> The content between the starting and closing tag is basically known as "Html Element" </p>
<h2 style="background-color: blue"> Types of Html Element </h2>
<h3 style="background-color: brown"> There are two types of html element are there: </h3>
<ol>
<li style="background-color: orange"> Block-Level Element </li>
<li style="background-color: yellow"> Inline Element </li>
</ol>
</body>
</html>

As you can see that the content is full width( 100%) ) Red, Green, Blue, Brown, Orange, and Yellow indicate that they take up the full width to cover the area of the width. It basically blocks the area known as the “block-line element”.

h1, h2, h3, h4, h5, h6
ol, ul
pre

address
blockquote
dl

div
fieldset
form

hr
NoScript
table

These are the Block-Level element tags.

2). Inline Element

Inline Elements are those elements that only cover the width according to the element. It is known as “Inline Element”

Let me give you an example:

<!DOCTYPE html>
<html>
<head>
<title>Inline-level Element</title>
</head>
<body>
<strong style="background-color: red"> What is HTML Element </strong>
<span style="background-color: green"> The content between the starting and closing tag is basically known as "Html Element" </span>
<a href="#" style="background-color: orange"> Types of Html Element </a>
</body>
</html>