HTML Guides for big

The <big> element was a purely presentational HTML element that increased the text size by one level (similar to moving from small to medium, or medium to large). HTML5 removed it from the specification because it violates the principle of separating content structure from visual presentation. HTML should describe the meaning of content, while CSS should handle how it looks.

Using obsolete elements causes several problems. First, W3C validation will fail, which can impact code quality standards and SEO audits. Second, while current browsers still support <big> for backward compatibility, there’s no guarantee future browsers will continue to do so. Third, the <big> element carries no semantic meaning — it doesn’t tell assistive technologies why the text is larger, only that it should be displayed differently. CSS gives you more precise control over font sizing while keeping your HTML clean and standards-compliant.

To fix this issue, replace every <big> element with a <span> (or another semantically appropriate element) and apply CSS to control the font size. You can use inline styles, a <style> block, or an external stylesheet.

If the larger text has a specific meaning — such as emphasizing importance — consider using a semantic element like <strong> or <em> instead, and style it with CSS as needed.

Examples

❌ Obsolete: using the <big> element

<p>This is <big>important text</big> in a paragraph.</p>

✅ Fixed: using a <span> with inline CSS

This is a direct replacement that mimics the original behavior of <big>, which rendered text at font-size: larger:

<p>This is <span style="font-size: larger;">important text</span> in a paragraph.</p>

✅ Fixed: using a CSS class

For better maintainability, use a class instead of inline styles:

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

<p>This is <span class="text-big">important text</span> in a paragraph.</p>

✅ Fixed: using a semantic element with CSS

If the text is larger because it’s important or emphasized, use a semantic element and style it:

<style>
  .highlight {
    font-size: 1.25em;
  }
</style>

<p>This is <strong class="highlight">important text</strong> in a paragraph.</p>

Choosing a font-size value

The <big> element historically corresponded to font-size: larger, but with CSS you have full flexibility:

• font-size: larger — relative increase, closest to original <big> behavior
• font-size: 1.2em — scales to 120% of the parent’s font size
• font-size: 1.25rem — scales relative to the root font size
• font-size: 20px — absolute pixel value (less flexible, generally avoid)

Using relative units like em, rem, or the larger keyword is preferred because they scale well across different screen sizes and respect user font-size preferences.