HTML <multicol> Tag

What You’ll Learn

In the early days of the web, the <multicol> tag split content into newspaper-style columns. This guide explains its history, why it was deprecated, and how to build columns with CSS today.

What Is the <multicol> Tag?

The <multicol> element was designed to split content into multiple columns, enhancing the visual layout of text-heavy web pages — similar to a newspaper or magazine. Content inside the tag flowed automatically from one column to the next.

Learn multicol to understand legacy HTML. For all new projects, use column-count, column-gap, Flexbox, or CSS Grid.

📝 Syntax

Wrap content between opening and closing <multicol> tags. Due to its deprecated status, avoid this in new code:

<multicol cols="3">
  Your content here...
</multicol>

Syntax Rules

• <multicol> requires both opening and closing tags.
• Use the cols attribute to set the number of columns.
• Text and block content inside flows across columns automatically.
• Modern browsers render content as a single column (no multicol behavior).

⚖️ <multicol> vs CSS Columns

Examples Gallery

Legacy multicol markup and the modern CSS column-count replacement. Demos use CSS because native multicol does not work in modern browsers.

<multicol cols="2">
  This content will be split into two columns.
</multicol>

<style>
  .multicol-container {
    column-count: 3;
    column-gap: 1.5rem;
  }
</style>

<div class="multicol-container">
  Your content here...
</div>

🔄 Alternatives

Modern web development favors CSS for multi-column layouts. The CSS column-count property offers a flexible and powerful alternative to the deprecated <multicol> tag:

<style>
  .multicol-container {
    column-count: 3;
    column-gap: 1.5rem;
    column-rule: 1px solid #e2e8f0;
  }
  @media (max-width: 640px) {
    .multicol-container { column-count: 1; }
  }
</style>

<div class="multicol-container">
  Your content here...
</div>

• column-count — Set the number of flowing text columns.
• column-width — Let the browser calculate columns by minimum width.
• CSS Grid / Flexbox — For structural column layouts with distinct content per column.

♿ Accessibility

Multi-column text must remain readable for all users:

• Reading order — CSS columns flow top-to-bottom then left-to-right; ensure logical content order in the HTML source.
• Responsive breakpoints — Collapse to a single column on small screens to avoid cramped text.
• Line length — Very narrow columns hurt readability; aim for comfortable line lengths.
• Do not use multicol — Deprecated markup provides no layout benefit and confuses maintainers.

💡 Best Practices