Learn The Font Tag In Html

Hey guys!! How are you doing!! Today we are going to learn the font tag in html.

In this post we are going to talk about the famous or the very infamous font tag in html since font tag is deprecated tag.

The reason why i say that it is infamous is because people do not use the font tag to do anything.

Now they just use CSS. Anyway this is a very interesting and a very powerful tag and using this you can do lot of things in html and it’s still supported.

Well, let’s just get on with this post and see how you can use the font tag to increase or decrease the size of text in your documents, how you can change the color of text and how you can also change the font style.

You can do all the above using just the font tag.

Example: Learn The Font Tag In Html

<!DOCTYPE html>
<title>Learn The Font Tag In Html</title>
<font size = "5"><p>Hello World!!</p></font>
<font color = "green"><p>Font color example</p></font>
<font size = "10"><p>Bigger font size</p></font>
<font size = "10" face = "bookman old style"><p>Bigger font with style</p></font>

Before analyzing the above document let me show you guys this file in web browser or google chrome.

Learn The Font Tag In Html

This is how the file looks. You can see “Hello World!!” as the first sentence in the web page then you have “Font color example” as the next sentence and you can make out that second sentence is smaller than the first sentence.

Obviously that the font size are different and the color is green whereas the four sentences are black in color.

Then you also have another word as another paragraph “Bigger font size” which is much bigger than the previous two sentences.

And then you have another sentence with the words “Bigger font with style” and this one has a different font style as well.

So now let’s check out the html behind the page and see what we have.

In the body section i have the font tag and to set the size of text to 5 i have used the size attribute of the font element.

Also Read – Learn Html Paragraphs And Line Breaks

We have set its value to 5. It’s very simple. Just as you do with meta tags you have to first get in the name of your tag which is font, give a space get the name of the attribute the property or the value of which you want to set.

And then you use the assignment operator or the equal to symbol and within double quotes you type in the value.

You want to set the size of the font to 5 you just type in 5. And then i have used the paragraph tag to get the text “Hello World!!”.

Next close the font tag just the way you close all the other tags in html.

On the next line i have the font tag again and this time i have used the color attribute of the font tag to set the color of the text to green again i have the opening and closing paragraph tag for the text “Font color example”.

Then on the next line i have the font tag again and this time i have set the size to 10 and between the opening and closing paragraph tags i have the text “Bigger font size”.

In the last sentence i have the font again and this time i have changed the size of the font to 10 and also the font style. So i have changed it to “bookman old style” and then i have the paragraph tag and in between the tags i have the text “Bigger font with style”.

You can see the output in your web browser.


So that’s it for this post. I hope you guys enjoyed this post on font tag in html with an example. Please subscribe to my blog Flower Brackets.

You May Also Like