Introduction
The inception of the HTML <basefont> tag dates back to the early stages of HTML development. It served as a practical method for defining the default font size, color, and font style for all text within a webpage. Over time, advancements in web standards led to the tag becoming outdated.
Nowadays all the functionality that was previously done by <basefont> is done through CSS, which gives more flexible, accessible and scalable styling solutions. This article describes the historical intent of the use of <basefont>, the functionality, the removal and the way modern CSS could be used to replace the use of <basefont>.
Note: The <basefont> was deprecated in HTML 4 and completely removed from HTML5, so do not use this tag. Instead, you can use CSS to style the document.
What is <basefont>?
The <basefont> tag was used to set the default font properties for all text within an HTML document. These properties included font size, font family, and font color. Once these properties were defined, they would serve as the base font properties for all text elements unless overridden by specific styles.
Syntax
<basefont color="red" size="5" face="arial">
In traditional HTML, <basefont> did not necessitate a closing tag. However, in XHTML, which enforces strict syntax regulations, a closing tag was mandatory.
Why <basefont> Was Deprecated?
There are several reasons why World Wide Web Consortium (W3C) eliminated <basefont>:
- It promoted inline presentation, rather than separation of structure and style.
- It brought accessibility issues, with font selection becoming rigid.
- It was not flexible and consistent across browsers.
- CSS already provided a better and standardised way to manage typography.
Starting from HTML4, it was suggested to use CSS for handling all font styles, and in HTML5, the <font> tag was entirely eliminated.
Attributes of <basefont>
| Attribute | Value | Purpose |
|---|---|---|
| color | any valid colour | Sets default text colour |
face |
font family name | Sets default font family |
size |
integer (1-7) | Sets default text size |
Note: These attributes are completely unsupported in HTML5.
How <basefont> Work?
Example (Deprecated)
<!DOCTYPE html>
<html>
<head>
<title>Basefont Demonstration</title>
<basefont color="red" size="5" face="Arial">
</head>
<body>
<h2>Sample Heading</h2>
<p>This text inherits the basefont settings.</p>
</body>
</html>
Output:
All text appears in red, the default size roughly equivalent to size 5, and default font would be Arial.
Explanation
The <basefont> tag used a universal base style. Font inheritance would be applied to elements such as <h1>, <h2> or <p> except where it is overridden. It led to poor uniformity in formatting and became hard to handle in large websites.
The Correct Modern Replacement
CSS offers precise control over typography and ensures better accessibility, responsiveness, and compatibility. Below is an up-to-date CSS illustration:
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size: 20px;
color: #4C9EE3;
font-family: Helvetica, Arial, sans-serif;
}
</style>
</head>
<body>
<h2>CSS-Based Typography</h2>
<p>This paragraph inherits base font styles from CSS.</p>
</body>
</html>
Output:
Explanation
CSS styles are adaptable, recyclable, and adaptive, aligning with contemporary criteria in contrast to <basefont>. They can be specified at various levels (such as global, component-based, or inline) without compromising accessibility standards.
<basefont> vs CSS
| Feature | <basefont> |
CSS |
|---|---|---|
| Supported in HTML5 | No | Yes |
| Controls size | Limited (1-7) | Precise (px, em, rem, %) |
| Controls colours | Limited | Highly flexible (rgb, hex, hsl) |
| Accessibility | Poor | Excellent |
| Reusability | Low | High |
| Responsive design | Impossible | Fully supported |
Why you should Avoid <basefont> Today
While the tag served a purpose in the early days of HTML, modern web development requires attention to responsiveness, theming, scalability, architecture, and CSS best practices such as BEM methodology, utility classes, and variables. Prioritizing <basefont> would contradict these essential principles and could lead to the production of invalid HTML5 markup.
Migration from <basefront> to Modern CSS
When dealing with legacy HTML containing <basefont>, transitioning to a new system can be easily accomplished.
Legacy Example
<basefont color="darkred" size="4" face="Times New Roman">
Converted Modern CSS Example
body {
color: darkred;
font-size: 18px; /* approximate replacement for size=4 */
font-family: "Times New Roman", serif;
}
Supporting Browsers
| Element | Chrome | IE | Firefox | Opera | Safari |
|---|---|---|---|---|---|
<basefont> |
No | No | No | No | No |
Conclusion
In the early days of the web, <basefont> was commonly utilized before the adoption of CSS. However, with the advancement of standards and increased emphasis on accessibility, maintainability, and responsiveness, the use of <basefont> has become obsolete. Modern developers are advised to avoid using basefont and instead handle all typography styling through CSS.