HTML <basefont> Tag
The <basefont> tag was used in older versions of HTML to set a default font face, size, and color for all text within a document. It was a convenient way to control the basic typography across an entire webpage without needing to style each element individually. However, this tag is now deprecated in HTML5 and should not be used in modern web development. CSS provides more flexible and robust methods for managing font styles.
Syntax
<basefont size="value" color="value" face="value">
Attributes
| Attribute | Value | Description |
|---|---|---|
size |
1-7 or relative values (+number or -number) | Sets the base font size. 1 is the smallest, and 7 is the largest. Relative values adjust the size relative to the default. |
color |
color name, hex code, or rgb code | Sets the base font color. Example: "red", "#FF0000", or "rgb(255,0,0)" |
face |
font name(s) | Sets the base font family. Multiple fonts can be specified as a comma separated list which allows for font fallbacks. |
Example
<!DOCTYPE html>
<html>
<head>
<title>Basefont Example</title>
</head>
<body>
<basefont size="4" color="blue" face="Arial, sans-serif">
<p>This paragraph uses the basefont settings.</p>
<p>So does this one.</p>
</body>
</html>
More Examples
Basic Usage:
This example demonstrates the use of the basefont tag to change the default appearance of the text in the document. Note that while it may render, it is not best practice.
<!DOCTYPE html>
<html>
<head>
<title>Basefont Basic Example</title>
</head>
<body>
<basefont size="3" color="green" face="Verdana, sans-serif">
<h1>This is a Heading</h1>
<p>This is a paragraph with default styles from basefont.</p>
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
</ul>
</body>
</html>
Using relative sizes:
<!DOCTYPE html>
<html>
<head>
<title>Basefont Relative Size Example</title>
</head>
<body>
<basefont size="4" face="Arial, sans-serif">
<p>This is the base font.</p>
<p><basefont size="+2">This text is two sizes larger.</basefont></p>
<p><basefont size="-1">This text is one size smaller.</basefont></p>
</body>
</html>
Overriding basefont styles:
It is important to note that the basefont styles can be overriden by local styles.
<!DOCTYPE html>
<html>
<head>
<title>Basefont Override Example</title>
</head>
<body>
<basefont size="3" color="gray" face="Courier New, monospace">
<p>This text follows the default `basefont` style.</p>
<p style="font-size: 16px; color: red; font-family: 'Times New Roman', serif;">This paragraph has inline styles that override the `basefont` settings.</p>
</body>
</html>
Browser Support
The <basefont> tag is supported by most browsers, but it's marked as deprecated and is not recommended for use. You should instead rely on CSS for controlling font styles. The use of this tag can lead to unpredictable results as browsers evolve and remove support for deprecated features.
| Browser | Support |
|---|---|
| Chrome | Yes |
| Edge | Yes |
| Firefox | Yes |
| Safari | Yes |
| Opera | Yes |
| IE | Yes |
Notes and Tips
- Avoid using
<basefont>: This tag is deprecated and should not be used in modern web development. - Use CSS instead: For controlling font styles, use CSS. You can apply styles to all text elements, or specific ones, with far more flexibility and control.
basefontis not part of HTML5: It was part of older HTML specifications but has been removed in the latest version.- CSS gives much greater control: Using CSS allows for responsive design, detailed typographic settings, and a much better user experience across all devices.
- Example CSS Equivalent: Instead of
<basefont size="3" color="blue" face="Arial, sans-serif">, use CSS like this:body { font-size: medium; /* Equivalent to size="3" */ color: blue; font-family: Arial, sans-serif; } - Maintenance: Using
<basefont>can make your code harder to maintain and update as all font changes are tied to the tag, rather than CSS which provides separation of presentation and content. - Accessibility: Relying on a single base font can cause accessibility issues for users who may need different fonts or sizes. CSS allows better control over this.
By migrating to CSS for all font style management you create a future proof website which is more flexible, responsive, accessible, and maintainable.
