HTML compact Attribute

HTML compact Attribute

The obsolete HTML compact attribute was historically used with certain list elements to request a more compact display with less vertical space between items.

Historical Syntax

The compact attribute was a Boolean attribute, so its presence requested the compact presentation:

<ul compact>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>

Because it was a Boolean attribute, a separate value was not required. The browser determined how the more compact presentation would be displayed.

Historical Elements

The compact attribute was historically associated with several list-related elements.

Historical Use

The compact attribute came from a time when HTML included attributes that directly influenced how content appeared. Adding compact to a supported list element asked the browser to reduce the amount of space used when displaying that list.

The exact visual result was largely left to the browser. Authors could request a compact presentation, but the attribute did not provide precise control over margins, padding, line height, or the spacing between individual list items.

Why It Became Obsolete

The compact attribute controlled presentation rather than describing the meaning or structure of the content. CSS provides much more precise ways to control spacing while keeping the HTML focused on document structure.

With CSS, authors can independently control list margins, list padding, spacing between individual items, and line height instead of relying on a browser-defined compact presentation.

Modern Alternative

Use CSS to create a more compact list. The exact properties depend on which spacing you want to reduce.

Historical HTML

<ul compact>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Modern HTML and CSS

<ul class="compact-list">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

<style>
.compact-list {
  margin-top: 0;
  margin-bottom: 0;
}

.compact-list li {
  margin-bottom: 2px;
  line-height: 1.2;
}
</style>

This approach gives you direct control over the spacing instead of asking the browser to decide what a compact list should look like.

Learn More About CSS List Spacing

The CSS tutorials provide more information about styling lists and controlling the space around their content:

• CSS Styling Lists - Learn how CSS can control the appearance and spacing of HTML lists.
• CSS Margins - Learn how margins control the space outside elements.
• CSS Padding - Learn how padding controls the space inside elements.
• CSS Line Height - Learn how line height controls vertical spacing between lines of text.

Legacy Browser Support

The compact attribute was recognized by older browsers on several list-related elements, but the exact visual effect could vary because the attribute only requested a compact presentation.

Modern browsers may retain some handling of old markup for compatibility, but webpages should not rely on the obsolete compact attribute. CSS provides predictable control over list spacing and presentation.

For additional information about historical browser compatibility, visit Can I Use? . Search for the HTML element or attribute you want to check. Search results can include related HTML features, element attributes, APIs, and other technologies, so select the result that most closely matches the legacy feature you are researching.

Related Attributes

Other obsolete HTML attributes historically used to control spacing and presentation include:

• cellpadding - Historically used to control spacing inside table cells.
• cellspacing - Historically used to control spacing between table cells.
• hspace - Historically used to add horizontal space around certain elements.
• vspace - Historically used to add vertical space around certain elements.

Specifications

The compact attribute is obsolete in modern HTML and presentational spacing should be controlled with CSS. See the WHATWG HTML Living Standard for information about obsolete and non-conforming features.