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…

7 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…

9 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…

9 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…

10 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…

10 months ago

Using WP Rocket with AWS CloudFront CDN

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

10 months ago