In HTML, various tags are used to create web documents; one of them is the < font> tag. The < font> tag includes several attributes such as color, face, and size. In this article, we will understand the "size" attribute of <font> tag.
The attribute "size" is declared within the < font> tag to indicate the text size within it. This feature was supported in earlier releases of HTML.
Syntax
<font size="number">
In the provided syntax, the numeric value represents the "size" attribute, indicating the font size for the text.
The font size value ranges from 1 to 7, with the default font size for text on a webpage set at 3. When using a "size" attribute with a value of "1", the text is assigned the smallest size, while a "size" attribute with a value of "7" indicates the largest size for the text.
Note: The "size" attribute of the < font> tag is not supported in HTML5 in favor of CSS (Cascading Style Sheets), so we can use CSS instead of the HTML < font> tag.
Description of Font Sizes from 1 to 7
1. ### 1. 1. ::
It is utilized to establish the minimum size for the text.
2. 2.:
This size adjustment is applied to increase the text size slightly above the font size defined as "1". It is commonly utilized for captions.
3. 3. 2.5::
It is the standard size that is applied by default to all elements containing text if the font size is not defined manually.
4. 4. 3.:
This feature enables increasing the font size beyond a value of "3", which can be utilized for emphasizing important text.
5. 5. <h5>::
This property is utilized to increase the font size beyond the default value of 4. It is commonly employed for creating headings.
6. 6. 5.:
This property is utilized to specify the text size as extra-large.
7. ### 7. 3.
It is utilized to adjust the font size to the maximum.
Let's delve into the concept of HTML font size with the aid of some illustrative examples:
Example 1
In this instance, we will set the font size to "1" to observe how an HTML element with text behaves.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of HTML Font Size with Value "1"</title>
</head>
<body>
<div>
<font size="1">Welcome to our tutorial!</font>
</div>
<div>
<font size="1">Learn HTML online.</font>
</div>
</body>
</html>
Output:
As evident from the output displayed below, the font size of the HTML <p> element appears to be the most diminutive.
Example 2
In this instance, we will set the font size to "7" to observe how an HTML element that includes text reacts.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of HTML Font Size with Value "7"</title>
</head>
<body>
<div>
<font size="7">Welcome to our tutorial!</font>
</div>
<div>
<font size="7">Learn HTML online.</font>
</div>
</body>
</html>
Output:
As evident from the displayed output, the font size of the HTML <p> tag is the most significant.
Example 3
In this illustration, various values of the size property ranging from 1 to 7 are utilized to control the text's size.
Code:
<!DOCTYPE html>
<html>
<title>
Example of Size attribute
</title>
<body>
<Center>
<font size="1">
C# Tutorial Size = "1"
</font>
<br>
<font size="2">
C# Tutorial Size = "2"
</font>
<br>
<font size="3">
C# Tutorial Size = "3"
</font>
<br>
<font size="4">
C# Tutorial Size = "4"
</font>
<br>
<font size="5">
C# Tutorial Size = "5"
</font>
<br>
<font size="6">
C# Tutorial Size = "6"
</font>
<br>
<font size="7">
C# Tutorial Size = "7"
</font>
</Center>
</body>
</html>
Output:
Within the provided code snippet, content is enclosed within individual tags labeled as < font>, each assigned with distinct "size" attribute values ranging from 1 to 7.
In the displayed output below, it is evident that the content enclosed within each < font> tag varies in length.
Browsers that Support the HTML < font> Tag
Here are the browsers that support the HTML < font> tag:
- Firefox
- Chrome
- Microsoft Edge
- Safari
- Opera
- Firefox Mobile
- Opera Mobile
- Microsoft Edge Mobile
- Safari Mobile
- In HTML, the <font> tag has a "size" attribute that is responsible for the size of the text.
- In earlier versions of HTML, the <font> tag was used to specify the size of the text. Now, the CSS font-size property is used for setting text size.
- Many browsers support the <font> tag, such as Firefox, Chrome, Microsoft Edge, Safari, Opera, Firefox Mobile, Opera Mobile, Microsoft Edge Mobile, and Safari Mobile.