HTML Basefont Tag

Earlier, the HTML basefont tag was used to define a default size of the font and color of the entire HTML document. You can either define the default color or text size for a section or part of the document. It was used till HTML 4, but was deprecated in HTML5 due to the availability of more effective CSS font styling properties.

Here, we will learn more about the HTML <basefont> tag and its properties.

The HTML basefont Tag: Key Highlight

The HTML basefont tag was introduced in HTML to set the default font family, font size, or font color for the entire HTML document or a part of it (section).

HTML basefont tag

The HTML basefont tag is a self-closing tag and hence, does not require any closing tag.
The <basefont> tag must be included in the <head> section enclosed between the <head> and </head> tags.
In XHTML, you will have to use the opening and closing tags in the HTML basefont tag.
The HTML <basefont> tag is deprecated in HTML 4 and completely eliminated in HTML5 (the latest version of HTML), as we can use the CSS properties to style every element of the document.
The <basefont> tag supports all major global attributes with some additional attributes, including size, face, and color.

The HTML basefont Tag: Syntax

HTML basefont tag

The <basefont> tag can be defined using the simple <basefont /> tag. Let us check a simple representation of the HTML basefont tag to understand the syntax a little better.

Here,

color: It accepts the color code in hexadecimal form.
face: This attribute contains the font family that can be set for the HTML document or a section.
size: This attribute defines the size numeric value between 1 to 7. The default size is +3

Attributes Used with the HTML basefont Tag

The HTML <basefont> supports some specific attributes besides the global attributes available in HTML.

Attribute Name	Description
color	The color attribute sets the default text color for the page or section.
face	It defines the font family for the text.
size	It sets the default font size from 1 (smallest) to 7 (largest).
id	The id attribute is used to assign a unique identifier to the element.
class	The class attribute assigns one or more class names used for styling or scripting.
style	The style attribute allows you to add inline CSS styles directly to the tag.
title	It is used to add extra information that appears when the user hovers over the element.
lang	It specifies the language of the element’s content.
dir	It defines the text direction: left-to-right (ltr) or right-to-left (rtl).
hidden	It is used to hide the element from the page.
data-(custom)*	It is used to store custom data private to the page or app.

1. color attribute

This attribute in the HTML basefont tag is used to set the text color for the entire page or a particular section. You can provide the color name in hexadecimal code or a named color.

This color becomes the default value of all the text that doesn’t have a particular color defined using CSS or another method.

2. face attribute

The face attribute is used to specify the font family that is to be used for the HTML document. You can provide multiple fonts separated by commas. However, the browser will consider the first one.

3. size attribute

This attribute is used to define the default font size for the text on the page.

This attribute accepts a numeric value between 1 and 7, where 1 is the smallest size and 7 is the largest.

Why the <basefont> Is No Longer Supported In HTML5?

The <basefont> tag was originally introduced in HTML to define the default text styles, colors, sizes, and fonts for the complete webpage or a particular section.

HTML5

With HTML5, CSS is used to style most elements in the document, including the size, font, and color. The <basefont> tag only had limited capabilities with three attributes for defining. However, CSS consists of comparatively more powerful and consistent styling.

CSS allows more centralised styling with one stylesheet page handling hundreds of pages in a webpage. These factors lead to the depreciation of the HTML basefont tag.

This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible.

HTML5 is giving more priority to the semantic structure and meaning of elements in the HTML document.
The <basefont> tag does not give any semantic value and only contains limited attribute features.
In HTML5, the use of CSS for styling and semantic elements for structuring is preferred.

Using <basefont> Tag

Using CSS Styling

<style>

body {

color: #0000FF;

font-family: Arial, sans-serif;

font-size: 16px;

}

</style>

Example of HTML Basefont Tag

The <basefont> tag is discontinued in the latest version of HTML i,e. HTML5. Check a simple example of the HTML basefont tag.

<!DOCTYPE html>

<html>

<head>

<title>Example of Basefont Tag</title>

</head>

<body>

<!– Setting default font color, face, and size –>

<h2>Welcome to My Webpage</h2>

<p>This text will appear in Verdana font, blue color, and size 4.</p>

<!– Overriding basefont with <font> tag –>

<p><font color=”red” size=”5″>This text is red and larger than the base font size.</font></p>

<p><font face=”Courier New”>This text uses the Courier New font family.</font></p>

<p>This text again follows the basefont settings.</p>

</body>

</html>

Output

Here, the <basefont> is overridden with the <font> tag used in modern CSS to define the text of a particular sentence in the document. However, the <basefont> tag is no longer supported, but if it did, both the first sentence i,e. “ This text will appear in Verdana font, blue color, and size 4.” by default, and would have followed the result in the output.

Alternative to <basefont> Tag

Check some of the major alternatives used in place of the <basefont> tag in HTML5.

1. Using CSS in the Style Tag

This method will allow you to use CSS inside a <style> block defining the font, color, and other features of elements in a webpage. It promotes a separate design from structure, an optimised approach.

<style>

body {

color: blue;

font-family: Verdana;

font-size: 18px;

}

</style>

2. Using Inline CSS with the style attribute

This method is also more common with CSS styling where properties for a particular element i,e. Single elements like color, family, and size can be defined directly in an HTML tag. This is a less used approach due to its limited reusability and overhead issues.

Hello World!

</p>

3. Using an External CSS File

This approach is more common for larger projects, placing all your font styles in an external CSS file, keeping your HTML file clean and consistent across multiple pages.

You have to define the CSS styling for the HTML elements in the “style.css” file.

Learn Web Development With PW Skills

Master the complete full stack development with PW Skills Full Stack Web Development Course. Learn with interactive coursework and hands-on practice exercises.

This 8 months course consists of industry led live sessions and recorded sessions covered by dedicated mentors and based on the latest industry trends. Start your career in Web development with this complete packaged course offered by PW Skills.

Perks of Full Stack Web Development Course

Build a strong portfolio for your resume, CV on LinkedIn, and more.
Get complete career assistance from dedicated mentors at pwskills.com
Gain doubt session support from industry experts 24×7.
Master Frontend frameworks like HTML, CSS, React, JavaScript, and more.
Get hands on training with capstone projects and practice exercises based on frontend development.
Get the latest updated curriculum covered by dedicated mentors at pwskills.com, and regularly updated from time to time.
Get industry recognised certificates from PW Skills and discover a wide range of opportunities in the design field.
Get a complete hands on training with our real world capstone projects within this course.