Skip to main content Link Search Menu Expand Document (external link)

<big> : The Big Text Element (Deprecated)

On this page

Summary

The <big> element is a deprecated HTML element that renders text at 120% of the parent font size. While still supported for backward compatibility, CSS styling is strongly recommended instead.

Usage

The <big> element was historically used to make text slightly larger than surrounding text. It increases font size to 120% of the inherited size.

⚠️ Deprecation Notice: This element is deprecated in modern HTML. Use CSS font-size property with <span> or other elements instead.

<!-- Deprecated (but works) -->
<p>This is normal text with <big>bigger text</big> inline.</p>

<!-- Recommended alternative -->
<p>This is normal text with <span style="font-size: 120%;">bigger text</span> inline.</p>

Supported Attributes

Standard HTML Attributes

Attribute Type Description
id string Unique identifier for the element.
class string CSS class name(s) for styling. Multiple classes separated by spaces.
style string Inline CSS styles applied directly to the element.
title string Sets the outline/bookmark title.
hidden string Controls visibility. Set to “hidden” to hide the element.

CSS Style Support

As an inline element extending Span, supports all standard CSS properties:

Typography:

  • font-size (default: 120% of parent)
  • font-family, font-weight, font-style
  • color, text-decoration, text-transform

Background and Borders:

  • background-color, background-image
  • border, border-radius, padding

Display:

  • display: inline (default), inline-block, block, none
  • vertical-align

Notes

Default Behavior

The <big> element:

  • Increases font size to 120% of the inherited font size
  • Extends the Span component (inline element)
  • Flows with text without creating line breaks
  • Can be nested for cumulative size increases

Why is <big> Deprecated?

  1. Semantic Clarity: The element has no semantic meaning, only presentational
  2. CSS is Superior: CSS provides precise control over font sizing
  3. Limited Functionality: Only increases by fixed 120%, not flexible
  4. Standards Compliance: Not part of HTML5 standard

Nested Big Elements

When nested, <big> elements compound:

  • First level: 120% of base size
  • Second level: 120% of 120% = 144% of base size
  • Third level: 120% of 144% = 172.8% of base size

Migration from <big> to CSS

Old (big tag) New (CSS equivalent)
<big>text</big> <span style="font-size: 120%;">text</span>
<big><big>text</big></big> <span style="font-size: 144%;">text</span>
  <span style="font-size: 1.2em;">text</span>
  <span style="font-size: 14pt;">text</span>

When to Use (Legacy Support)

The <big> element may be useful when:

  • Converting legacy HTML documents to PDF
  • Maintaining old HTML templates
  • Working with HTML generated by legacy systems
  • Quick prototyping (though CSS is still recommended)

Examples

Basic Big Text 

<p>This is normal text with <big>bigger text</big> inline.</p>

Nested Big Elements 

<p>
    This is normal text,
    <big>this is big (120%)</big>,
    <big><big>this is bigger (144%)</big></big>,
    <big><big><big>this is biggest (172.8%)</big></big></big>.
</p>

Big with Other Formatting 

<p>
    <big><b>Important Notice:</b></big> Please read carefully.
</p>

<p>
    The price is <big style="color: green;">$99.99</big> today only!
</p>

Big in Headings 

<h3>Regular Heading with <big>Emphasized</big> Word</h3>

Migration Example: Before and After

Before (deprecated <big>):

<p>
    Our special offer: <big><b>Save 20%</b></big> on all items!
</p>

<div>
    <big>Featured Product</big><br/>
    Now available in stores.
</div>

After (modern CSS):

<style>
    .emphasis {
        font-size: 120%;
        font-weight: bold;
    }

    .featured {
        font-size: 1.2em;
        font-weight: bold;
        color: #336699;
    }
</style>

<p>
    Our special offer: <span class="emphasis">Save 20%</span> on all items!
</p>

<div>
    <span class="featured">Featured Product</span><br/>
    Now available in stores.
</div>

Data Binding with Big Tags 

<!-- While deprecated, big tags work with data binding -->
<p>
    Welcome, <big>{{model.userName}}</big>!
</p>

<!-- Better alternative with CSS -->
<p>
    Welcome, <span style="font-size: 1.2em; font-weight: bold;">{{model.userName}}</span>!
</p>

Big in Lists 

<ul>
    <li>Regular list item</li>
    <li><big>Emphasized item</big></li>
    <li>Another regular item</li>
    <li><big><b>Important item</b></big></li>
</ul>

Big in Tables 

<table>
    <tr>
        <td>Product</td>
        <td>Price</td>
    </tr>
    <tr>
        <td><big>Premium Widget</big></td>
        <td><big style="color: red;">$199.99</big></td>
    </tr>
</table>

Combining Big with Small 

<p>
    This paragraph has <big>larger text</big> and <small>smaller text</small>
    mixed with normal text.
</p>

Legacy Advertisement Template 

<div style="border: 2pt solid #ff6600; padding: 10pt; text-align: center;">
    <big><big><b>SALE!</b></big></big><br/>
    <big>Up to 50% Off</big><br/>
    Limited time offer
</div>

Price Display 

<div class="price-box">
    Was: <span style="text-decoration: line-through;">$129.99</span><br/>
    Now: <big style="color: #d32f2f; font-weight: bold;">$99.99</big>
</div>

Notice Box with Big Text 

<div style="background-color: #fff3cd; border-left: 4pt solid #ffc107; padding: 10pt;">
    <big><b>⚠ Warning:</b></big><br/>
    This action cannot be undone.
</div>

<style>
    .text-sm { font-size: 80%; }
    .text-base { font-size: 100%; }
    .text-lg { font-size: 120%; }
    .text-xl { font-size: 144%; }
    .text-2xl { font-size: 172%; }

    .font-bold { font-weight: bold; }
    .text-primary { color: #336699; }
    .text-danger { color: #d32f2f; }
</style>

<p>
    This is <span class="text-base">normal</span>,
    <span class="text-lg">large</span>,
    <span class="text-xl">extra large</span>, and
    <span class="text-2xl">extra extra large</span> text.
</p>

<p>
    Special offer: <span class="text-xl font-bold text-danger">50% OFF</span>
</p>

Font Size Scale Comparison 

<div>
    <div style="font-size: 10pt;">Base: 10pt</div>
    <div style="font-size: 10pt;">
        <big>Big: 12pt (120%)</big>
    </div>
    <div style="font-size: 10pt;">
        <big><big>Bigger: 14.4pt (144%)</big></big>
    </div>
    <div style="font-size: 10pt;">
        <big><big><big>Biggest: 17.28pt (172.8%)</big></big></big>
    </div>
</div>

Progressive Enhancement Pattern 

<!-- Old HTML for compatibility -->
<p>
    Product name: <big><b>Premium Edition</b></big>
</p>

<!-- Modern CSS overlay (overrides big tag) -->
<style>
    big {
        font-size: 1.5em; /* Override default 120% with larger size */
        color: #336699;
        font-weight: 600;
    }
</style>

See Also

  • span - Modern inline container (recommended)
  • small - Small text element (also deprecated)
  • font - Font styling element (deprecated)
  • CSS Styles - Complete CSS styling reference
  • Text Formatting - Modern text formatting elements