Skip to content
Related Articles
Open in App
Not now

Related Articles

Describe the void elements in HTML

Improve Article
Save Article
  • Last Updated : 28 Jan, 2022
Improve Article
Save Article

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:

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:

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:

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:

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:

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:

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:

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:


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!