← Back to All Tags

<big>

NOT supported in HTML5. Use CSS instead.

DEPRECATED

Definition and Usage

Warning: The <big> tag is NOT supported in HTML5. Use CSS instead.

The <big> tag was used in HTML 4 to make text one font size larger than the surrounding text. It was removed from the HTML5 specification.

In older versions of HTML, the <big> tag would increase the text size relative to the default text size, similar to how <small> decreases it.

Important: Do not use this tag in modern HTML documents. All major browsers may still support it for backward compatibility, but it should be avoided.

Browser Support

The <big> tag is NOT supported in HTML5:

Chrome
Chrome
Not Supported
Firefox
Firefox
Not Supported
Safari
Safari
Not Supported
Edge
Edge
Not Supported
Opera
Opera
Not Supported
Note: While browsers may still render the <big> tag for backward compatibility, it is officially removed from HTML5 specification and should not be used.

Migration Guide: Use CSS Instead

Instead of using the deprecated <big> tag, use CSS font-size property to control text size. This provides much more control and follows modern web standards.

Recommended CSS properties:

  • font-size: larger; - Makes text larger than parent
  • font-size: 1.2em; - 20% larger than parent
  • font-size: 120%; - 120% of parent size
  • font-size: 18px; - Specific pixel size
  • font-size: 1.125rem; - Relative to root element

Old Usage (HTML 4)

How the <big> tag was used in HTML 4 (for reference only):

Example - DO NOT USE

<!-- Old HTML 4 way (DEPRECATED) -->
<p>This is normal text, <big>this is bigger text</big>.</p>

Modern CSS Alternatives

Using font-size: larger

The larger keyword makes text one size larger, similar to the old <big> tag:

Example

<style>
  .bigger {
    font-size: larger;
  }
</style>

<p>This is normal text, <span class="bigger">this is bigger text</span>.</p>

Using Relative Units (em)

Use em units for size relative to the parent element:

Example

<style>
  .bigger {
    font-size: 1.2em;  /* 20% larger than parent */
  }

  .much-bigger {
    font-size: 1.5em;  /* 50% larger than parent */
  }
</style>

<p>Normal text, <span class="bigger">bigger text</span>,
   <span class="much-bigger">much bigger text</span>.</p>

Using Percentage

Percentages provide similar control to em units:

Example

<style>
  .bigger {
    font-size: 120%;  /* 20% larger than parent */
  }
</style>

<p>This is normal text, <span class="bigger">this is 120% size</span>.</p>

Using Absolute Units (px)

Specify exact pixel sizes for precise control:

Example

<style>
  .bigger {
    font-size: 18px;
  }

  .much-bigger {
    font-size: 24px;
  }
</style>

<p>Normal 16px text, <span class="bigger">18px text</span>,
   <span class="much-bigger">24px text</span>.</p>

Using rem Units (Root-Relative)

Use rem for sizes relative to the root element:

Example

<style>
  .bigger {
    font-size: 1.125rem;  /* 18px if root is 16px */
  }

  .much-bigger {
    font-size: 1.5rem;    /* 24px if root is 16px */
  }
</style>

<p>Normal text, <span class="bigger">bigger text</span>,
   <span class="much-bigger">much bigger text</span>.</p>

Modern Responsive Approach

Use CSS custom properties and clamp() for responsive text sizing:

Example

<style>
  :root {
    --text-base: 16px;
    --text-lg: clamp(18px, 4vw, 22px);
  }

  p {
    font-size: var(--text-base);
  }

  .bigger {
    font-size: var(--text-lg);
  }
</style>

<p>Normal text, <span class="bigger">responsive bigger text</span>.</p>

Complete Migration Example

Side-by-side comparison of old vs. new approach:

Example

<!-- OLD WAY (Don't use) -->
<p>Regular text <big>bigger text</big> <big><big>much bigger</big></big></p>

<!-- NEW WAY (Modern CSS) -->
<style>
  .text-lg {
    font-size: 1.2em;
  }

  .text-xl {
    font-size: 1.5em;
  }

  /* Or use inline styles */
</style>

<p>Regular text <span class="text-lg">bigger text</span>
   <span class="text-xl">much bigger</span></p>

<!-- Or with inline CSS -->
<p>Regular text <span style="font-size: 1.2em;">bigger text</span>
   <span style="font-size: 1.5em;">much bigger</span></p>

Try it Yourself

Interactive Example

See the difference between various CSS font-size approaches:

Default size (16px)

font-size: larger

font-size: 1.2em (20% bigger)

font-size: 120%

font-size: 20px

font-size: 1.5em (50% bigger)

CSS Font-Size Units Comparison

Unit Description Best Use Case
larger One size larger than parent Simple size increase, similar to old <big> tag
em Relative to parent font size Component-level sizing, nested elements
rem Relative to root font size Consistent sizing across document
% Percentage of parent font size Similar to em, percentage-based control
px Absolute pixel size Precise control, non-responsive
vw/vh Relative to viewport dimensions Responsive typography that scales with viewport
clamp() Min, preferred, and max size Modern responsive design with constraints

Best Practices for Modern Text Sizing

  • Use rem for consistent sizing: Base your typography on rem units for predictable scaling
  • Use em for component-specific sizing: When elements need to scale relative to their parent
  • Avoid px for body text: Pixels don't respect user browser settings for font size
  • Use semantic HTML: Use proper heading tags (h1-h6) instead of just making text bigger
  • Consider accessibility: Ensure text can be resized by users without breaking layouts
  • Use CSS custom properties: Create a consistent typography scale using variables
  • Test responsiveness: Ensure text sizes work well across different screen sizes
  • Use clamp() for fluid typography: Modern approach for responsive text sizing

Why Was <big> Removed?

The <big> tag was removed from HTML5 for several reasons:

  • Separation of concerns: HTML should define structure, not presentation
  • Limited control: CSS offers much more precise control over font sizing
  • No semantic meaning: The tag provided no information about why text should be bigger
  • Accessibility issues: Purely presentational tags don't help screen readers
  • Maintenance problems: Mixed presentation and structure make code harder to maintain
  • CSS provides better alternatives: Modern CSS offers responsive and flexible sizing options

Related Tags and Properties