Two main types of HTML elements

Types of HTML elements

There are two types of HTML Elements –

Block-Level elements
Inline elements

First, you need to know that each element has a default display value (the default value is either block or inline or none), and each element is displayed according to its default display value (you can change it).

Those elements are block-level elements whose default display value is the Block. In the same way, elements whose default display value is the Inline are called inline elements, and elements that contain the none display value are not displayed in browser output or screen.

Block-Level VS Inline elements

A block-level element always starts on a new line and by default, it takes the full width of the browser display.

But, inline elements do not start on a new line and only take up the width as needed.

In the following example, the <div> is a Block-Level Element and the <span> is an Inline element, and there in the code, you can see the style attribute, which is used to give style to an element.

With the help of the style attribute, I have given borders to all the elements with different colors to show you the difference between block-level and inline elements.

<!DOCTYPE html>
<html>
	<body>

      <div style="border:1px solid red;">Block-Level Element</div>

      <span style="border:1px solid blue;">Inline Element</span>
   
      <!-- An inline element does not start on a new line -->
      <span style="border:1px solid blue;">Another Inline Element</span>
      
 	  <!-- A block-level element always starts on a new line -->
      <div style="border:1px solid green;">Another Block Element</div>
      
	</body>
</html>