Open In App

Describe the void elements in HTML

Improve
Improve
Like Article
Like
Save
Share
Report

Most of the HTML elements are surrounded by start and end tags to specify the starting and end of the element.

There is a special group of elements that only have start tags and does not contain any content within it, these elements are called void elements. Void elements doesn’t have ending tags and can only have attributes but do not contain any kind of content. These elements can have backslash before ending of start tag but that is completely optional. Example of such elements are <br>, <hr>, <img>, <input>, <link>, <base>, <meta>, <param>, <area>, <embed>, <col>, <track>, <source> etc.

Characteristics:

  • Void elements do not have end tags.
  • Void elements cannot have content inside it.
  • Void elements have attributes.
  • Void elements cannot be nested.

The following are some of the void elements.

HTML <br> tag: This tag is used to insert line breaks in text in HTML. It accepts clear attribute that indicates where to start the next line.

Example 1: In this example, we will use of the <br> tag.

HTML




<!DOCTYPE html>
<html>
  
<body>
    <h2 style="color:green">GeeksforGeeks</h2>    
    <p>Hi Geeks! <br>Welcome to GeeksforGeeks</p>
  
</body>
</html>


Output:

HTML <hr> Tag: This tag is used to insert a horizontal rule in HTML documents to separate different document sections. It can have attributes like Align, no shade, width, size.

Example 2: In this example, we will see the use of the <hr> tag.

HTML




<!DOCTYPE html>
<html>
<body>       
    <p>Welcome to GeeksforGeeks</p>
    <hr>        
    <p>A computer science portal for geeks</p>
  
</body>    
</html>                    


Output:

<hr> tag

HTML <img> Tag: This tag is used to add images to HTML web pages. It can have attributes like src, alt, height, width, ismap, loading, etc.

Example 3: In this example, we will see the use of the <img> tag.

HTML




<!DOCTYPE html>
  
<html>
<body>        
    <h2 style="color:green">GeeksforGeeks</h2>
    <img src
         width="320" height="100" alt="Geeksforgeeks.org" >
</body>    
</html>                    


Output:

HTML <input> Tag: This tag is used to insert an input field that can accept different types of inputs based on the value of the type attribute. It can also have attributes like name, alt, placeholder, etc.

Example 4: In this example, we will see the use of the <input> tag.

HTML




<!DOCTYPE html>
<html>
  
<body>
  <h2 style="color:green">GeeksforGeeks</h2>
  <input type="text" placeholder="Enter name...">    
</body>
</html>


Output:

HTML <link> Tag: This tag is used to define a link between an HTML document and an external resource. It can have attributes like rel, charset, disabled, href, etc.

Example 5: In this example, we will see the use of the <link> tag.

HTML




<!DOCTYPE html>
<html>
  
<head>
   <link rel="stylesheet" 
         type="text/css"
         href="style.css">
</head>
  
<body>
   <h2>GeeksforGeeks</h2>
</body>
</html>


CSS




h2
{
    color: green;
}


Output:

HTML <base> Tag: This tag is used to specify a base URL (that will be added at the start) for all the links present on that page. There can only be 1 base URL on a single page.

Example 6: In this example, we will see the use of the <base> tag.

HTML




<!DOCTYPE html>
<html>
<head>
    <base href=
          target="_blank"/>
  
</head>
  
<body>
    <img src="G-100x34.PNG" 
         width="150px" 
         height="150px">
</body>
</html>


Output:

<base> tag

HTML <meta> Tag: This is used to specify information about HTML web pages that are used by search engines. It can have attributes like name, content, charset, etc.

Example 7: In this example, we will see the use of the <meta> tag.

HTML




<!DOCTYPE html>
<html>
<head>
    <meta name="description" content=
      "A Computer Science portal for geeks. 
       It contains well written, well thought 
       and well explained computer science and 
       programming articles, quizzes and practice/competitive
       programming/company interview Questions.">
</head>
  
<body>
    <h2 style="color:green">GeeksforGeeks</h2>
    <p>A computer science portal for geeks</p>
  
</body>
</html>


Output:



Last Updated : 15 May, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads