HTML compact Attribute

Introduction

The compact attribute is used in HTML to control the spacing between elements, particularly within lists. It is commonly applied to <ul> and <ol> elements to specify whether the browser should render them with reduced spacing between list items.

What You’ll Learn

Purpose of compact Attribute

The primary purpose of the compact attribute is to adjust the visual presentation of lists by reducing the space between items. This can be useful for creating more condensed lists, especially when dealing with large amounts of content or when space is limited.

📝 Syntax

Add the boolean compact attribute to a list element:

<ul compact>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

<ol compact>...</ol>

Syntax Rules

• Boolean attribute — presence means compact; no value required.
• Valid on <ul>, <ol>, and legacy <menu>, <dir>, <dl>.
• Do not use compact="false"; remove the attribute to disable.
• For modern layouts, style li elements with CSS instead.

💎 Values

The compact attribute accepts a Boolean value:

• compact — When set, it indicates that the browser should render the list with reduced spacing between items.
• not set — If the compact attribute is not present, the browser renders the list with default spacing between items.

<!-- Compact (attribute present) -->
<ul compact>...</ul>

<!-- Default spacing (attribute absent) -->
<ul>...</ul>

<!-- CSS alternative -->
<style>
  .tight-list li { margin-block: 0.15rem; line-height: 1.35; }
</style>
<ul class="tight-list">...</ul>

Applicable Elements

Examples Gallery

Implementation example with compact on ul and dynamic JavaScript adjustment.

<ul compact>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<ul id="dynamicList">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<script>
  // Dynamically set compact attribute for a list
  document.getElementById("dynamicList").compact = true;
</script>

♿ Accessibility

• Readability first — Overly tight list spacing can hurt readability for low-vision users.
• Do not sacrifice touch targets — Compact lists in interactive menus need adequate click area.
• Use semantic lists — Keep <ul> and <ol> for real lists, not layout hacks.
• Test with screen readers — List structure matters more than visual density.
• Prefer CSS with care — Maintain sufficient line-height when tightening spacing.

💡 Best Practices

• Use the compact attribute sparingly and considerately, as reducing spacing between list items may affect readability and accessibility.
• Test the visual presentation of lists with and without the compact attribute to ensure it aligns with your design goals and user experience objectives.