HTML

Chapter 24: Void Elements

Not all HTML tags are of the same structure. While most elements require an opening tag, a closing tag, and
contents, some elements – known as void elements – only require an opening tag as they themselves do not contain
any elements. This topic explains and demonstrates the proper usage of void elements in HTML

Void elements

HTML 4.01/XHTML 1.0 Strict includes the following void elements:

  • area – clickable, defined area in an image
  • base – specifies a base URL from which all links base
  • br – line break
  • col – column in a table [deprecated]
  • hr – horizontal rule (line)
  • img – image
  • input – field where users enter data
  • link – links an external resource to the document
  • meta – provides information about the document
  • param – defines parameters for plugins

HTML 5 standards include all non-deprecated tags from the previous list and

  • command – represents a command users can invoke [obsolete]
  • keygen – facilitates public key generation for web certificates [deprecated]
  • source – specifies media sources for picture, audio, and video elements

The example below does not include void elements:

<div>
 <a href="http://stackoverflow.com/">
 <h3>Click here to visit <i>Stack Overflow!</i></h3>
 </a>
 <button >



Notice how every element has an opening tag, a closing tag, and text or other elements inside the opening and
closing tags. Void tags however, are shown in the example below:

<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png" />
<br>
<hr>
<input type="number" placeholder="Enter your favorite number">

With the exception of the img tag, all of these void elements have only an opening tag. The img tag, unlike any other
tag, has a self closing / before the greater than sign of the opening tag. It is best practice to have a space before the
slash.

Recent Posts

Unlocking the Secrets of JSON.stringify(): More Than Meets the Eye

JSON (JavaScript Object Notation) is a lightweight data-interchange format widely used in web development. At…

2 months ago

How to Handle AJAX GET/POST Requests in WordPress

AJAX (Asynchronous JavaScript and XML) is a powerful technique used in modern web development that…

3 months ago

Page Speed Optimization: Post-Optimization Dos and Don’ts

Introduction After successfully optimizing your website for speed, it's essential to maintain and build upon…

3 months ago

Ultimate Guide to Securing WordPress Folders: Protect Your Site from Unauthorized Access

Securing your WordPress folders is crucial to safeguarding your website from unauthorized access and potential…

4 months ago

HTML CSS PHP File Upload With Circle Progress Bar

Creating a file upload feature with a circular progress bar involves multiple steps. You'll need…

4 months ago

Using WP Rocket with AWS CloudFront CDN

Integrating WP Rocket with AWS CloudFront CDN helps to optimize and deliver your website content…

4 months ago