Within HTML, the <big> tag functioned as an inline text-level component designed to increase the font size of the enclosed text by one level in relation to the surrounding text. For instance, it could adjust text from small to medium or from medium to large based on the browser's default font-size scaling.
NOTE: The <big> tag is obsolete and not supported in HTML5. Modern web standards strongly recommend using CSS for all font sizing and typography-related control.
What is <big> Tag?
In the earlier editions of HTML, the <b> tag was introduced to provide a quick way to visually emphasize text without relying on CSS. It was commonly employed for highlighting or establishing visual importance at a time when CSS compatibility was not consistent across different browsers.
Key Behaviour
- Increases font size by one relative step
- Does not specify an exact size (browser-dependent)
- Affects visual appearance only, not the semantic meaning
Syntax
<big>Example content</big>
The tag necessitates the presence of both an opening tag and a closing tag, and it functions within the flow of adjacent text.
Specifications
| Property | Value |
|---|---|
| Display | Inline |
| Start Tag | Required |
| End Tag | Required |
| Usage | Fonts and Web Typography |
| HTML5 Support | Not Supported |
Basic Example
Example
<!DOCTYPE html>
<html>
<head>
<title>Big Tag Example</title>
</head>
<body>
<h2>Example of HTML big tag</h2>
<p>This is paragraph with normal font size.</p>
<p>
<big>This text appears larger using the big tag.</big>
</p>
</body>
</html>
Output:
The first paragraph appears in the default font size. The second paragraph text appears slightly larger than the first.
Explanation
The <big> tag amplifies the text size of its content in comparison to the surrounding text. The extent of the enlargement is determined by the default settings of the browser, resulting in varying behavior on different platforms.
Why the <big> Tag Was Deprecated?
The utilization of the <big> element was discontinued in HTML5 for several significant reasons:
| Reason | Description |
|---|---|
| Lack of semantic meaning | The tag only affected presentation and gave no meaning to screen readers or search engines. |
| Inconsistent rendering | Various browsers used different increments of font-size. |
| Separation of concerns | Structure and meaning should be defined in HTML and the styling should be undertaken in CSS. |
| Accessibility issues | Screen readers disregard <big>, and thus, it was ineffective to users who useassistive technologies. |
HTML5 Recommendation: Use CSS Instead
HTML5 eliminated all the styles of presentation tags such as <big>, <font> and <center> , which encouraged developers to embrace the use of CSS in layout and typography.
Example 1: Increasing Font Size Using CSS (Recommended)
Example
<!DOCTYPE html>
<html>
<head>
<style>
.large-text {
font-size: 18px;
color: red;
}
</style>
</head>
<body>
<h2>Example of Changing Font Size Using CSS</h2>
<p>This paragraph uses the default font size.</p>
<p class="large-text">
This paragraph uses CSS to increase font size.
</p>
</body>
</html>
Output:
The first paragraph remains at the default font size. The second paragraph appears larger and coloured red.
Explanation
CSS provides a reliable method to precisely manage font size using units such as pixels (px), em, rem, or percentage (%). This strategy promotes uniformity among different browsers and improves the ease of maintenance.
Example 2: Relative Font Sizing Using em and rem
Example
<!DOCTYPE html>
<html>
<head>
<style>
.em-text {
font-size: 1.5em;
}
.rem-text {
font-size: 1.5rem;
}
</style>
</head>
<body>
<p class="em-text">Text sized using em units.</p>
<p class="rem-text">Text sized using rem units.</p>
</body>
</html>
Output:
Both paragraphs appear larger than the default text. The em sizing depends on the parent element. The rem sizing depends on the root (html) element.
Explanation
Using relative units makes it simpler for users, especially when adjusting the browser zoom level or default font size.
<big> Tag vs CSS Font Sizing
| Feature | <big> Tag | CSS Font Size |
|---|---|---|
| HTML5 Support | No | Yes |
| Semantic Meaning | None | Can be meaningful |
| Accessibility | Poor | Better |
| Browser Consistency | Unreliable | Consistent |
| Maintainability | Low | High |
Attributes of the <big> Tag
Attributes specific to tags are not supported in this context.
Global Attributes: It is capable of accommodating all universal HTML attributes like id, class, style, and title.
When You Should NOT Use <big>?
Avoid <big> in:
- Production websites
- HTML5-compliant documents
- Accessible applications
- SEO -focused pages
Instead, always use CSS-based typography.
Supporting Browsers
| Element | Chrome | IE | Firefox | Opera | Safari |
|---|---|---|---|---|---|
<big> |
Yes (legacy) | Yes (legacy) | Yes (legacy) | Yes (legacy) | Yes (legacy) |
Conclusion
The HTML element <big> is an outdated tag that was primarily used for presentation purposes in the past, but it is not recommended for modern web development practices. While it played a role in early HTML typography, CSS offers superior control, accessibility, and uniformity. In contemporary web development, it is essential to utilize CSS for managing font sizes in a way that adheres to standards.