# The “big” element is obsolete. Use CSS instead.

> Canonical HTML version: https://rocketvalidator.com/html-validation/the-big-element-is-obsolete-use-css-instead
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

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

```html
<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`:

```html
<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:

```html
<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:

```html
<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.