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 <p> tag for writing the paragraph:-

<p> Welcome To Our Website </p>

As you can see the content in the blue color โ€œWelcome To Our Websiteโ€ is simply known as Element/Html Element. <p> is a Starting Tag and </p> is a closing tag.

Now letโ€™s see how many types of HTML elements are there:

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โ€.

  • p
  • 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>


As you can see that after using the <strong>, <span>, <a> tags it takes only the required space to cover the element. This is an Inline Element.

  • b, big, i, small, tt
  • abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var
  • a, bdo, br, img, map, object, q, script, span, sub, sup
  • button, input, label, select, textarea

These all are Inline Element Tags.

Leave a Comment

Top 7 Artificial Intelligence Courses for 2024 Top 10 Best Cybersecurity Courses for computer enthusiast Top 8 Btech colleges in Mumbai for 2024 Top 9 Best Mtech colleges in Bangalore for 2024 7 Best High paying Cyber Security Jobs in India
Top 7 Artificial Intelligence Courses for 2024 Top 10 Best Cybersecurity Courses for computer enthusiast Top 8 Btech colleges in Mumbai for 2024 Top 9 Best Mtech colleges in Bangalore for 2024