HTML <spacer> Tag

What You’ll Learn

The <spacer> tag once added gaps in early web layouts. This guide explains its deprecated status, historical syntax, and modern CSS spacing techniques beginners should use instead.

What Is the <spacer> Tag?

The <spacer> tag was historically used to create empty spaces or gaps between elements on a webpage. It was particularly popular in the early days of HTML for layout purposes, especially in Netscape-based designs.

🚫 Deprecated Status

As of HTML5, the <spacer> tag has been deprecated and is no longer recommended for use in modern web development. Developers are encouraged to use CSS for spacing and layout, which provides more flexibility and control.

📝 Syntax

In its deprecated form, the spacer tag had a simple void-element syntax:

<spacer type="horizontal" width="20" height="20">

Historical Inline Use

<p>
  Left content
  <spacer type="horizontal" width="20" height="1">
  Right content
</p>

This syntax should be avoided. See the Alternatives section for modern spacing.

⚖️ <spacer> vs CSS Spacing

Examples Gallery

Understand historical spacer use cases and practice the modern CSS replacements.

<div>
  <span>Left content</span>
  <spacer type="horizontal" width="20" height="1">
  <span>Right content</span>
</div>

td {
  padding: 12px 16px;
}

<style>
  .row { display: flex; gap: 1.25rem; }
</style>
<div class="row">
  <div>Item A</div>
  <div>Item B</div>
  <div>Item C</div>
</div>

♿ Accessibility

• Do not use spacer markup — Empty presentational elements add noise for assistive technology without semantic value.
• Use CSS for visual spacing — Screen readers ignore margin and padding, keeping content structure clean.
• Prefer semantic structure — Use headings, lists, and sections instead of spacer hacks for layout.
• Maintain readable spacing — Adequate padding improves touch targets and readability on mobile.

💡 Best Practices

Given the deprecated status of the <spacer> tag, there are no best practices for its usage. Focus on modern CSS instead: