HTML ELEMENTS with Examples

The HTML Element consists of start tag to end tag and the content between it. There are some HTML Elements that do not need to be closed.

Difference between Tags and Elements

  • HTML Tag refers to the opening and closing bracket for eg: <body>and it is used to markup the HTML elements.
  • HTML Element is nothing but HTML tag along with the structured content inside the brackets for eg: <p> content </p>.
  • Tags are the HTML codes and elements is something that appears on the webpages.

 Syntax of HTML Elements 

 <tag> content </tag> 

  • Everything from less than the opening bracket to greater than closing bracket is known as the HTML element .
  • There are elements which need to be closed for eg: <h1> content </h1>, <body> content </body>  and there are some elements which does not get closed also known as void elements  for eg: <hr/ >,<br/ >,<img../>
  •  HTML Elements can be used many times other HTML elements.
  • HTML Element is not case sensitive .

Types of element  HTML Elements 

Eg 1. Block-level Element: It always starts with the new line and takes the full width of the line available from left to right.

<!DOCTYPE html> 
<html> 
           <head> 
   </head> 
 
<body> 
 
   <div style="background-color: lightblue"> first line div</div> 
 
   <div style="background-color: lightgreen"> second line div</div> 
 
   <p style="background-color: yellow">This is a block level element</p> 
 
</body> 
</html>

   Output :  

Eg 2. Inline Element:  It does not take the full width of the line only the required Sections, It is mostly used with other elements.

<!DOCTYPE html> 
 
<html> 
   <head> 
   </head> 
 
<body> 
   <a href="https://codedec.com/">Click on link</a> 
   <span style="background-color: lightgreen">this is inline element</span> 
   <p> take width of text</p> 
</body> 
</html>

 

Output :   

Eg 3. Nested HTML Element: 

<!DOCTYPE html>
<html>
<body>

<h1>THIS IS FIRST ELEMENT</h1>
<p>THIS THE SECOND ELEMENT.</p>

</body>
</html>

Output :

Eg 4. Break HTML Element: 

<!DOCTYPE html>
<html>
<body> 

<p>You are ver​_y   <br> good programmer.</p>

</body>
</html>

Output :