🚀 LEVEL UP TO SENIOR:Unlock 500+ Advanced Practical Challenges & Exercises.
🎓 COURSERA PARTNER:Earn professional Google, Meta, and IBM certificates to supercharge your resume.
REFERENCEhtml

html Documentation

📖 INDEX

# helloworld
# comments-html
# html-tag
# head-tag
# body-tag
# p-tag
# b-tag
# i-tag
# strong-tag
# em-tag
# s-tag
# cite-tag
# blockquote-tag
# sub-tag
# sup-tag
# u-tag
# big-tag
# tt-tag
# pre-tag
# q-tag
# code-tag
# samp-tag
# var-tag
# abbr-tag
# acronym-tag
# address-tag
# ins-tag
# strike-tag
# span-tag
# hr-tag
# title-tag
# meta-tag
# base-tag
# link-tag
# a-tag
# script-tag
# noscript-tag
# style-tag
# div-tag
# h1-tag
# h2-tag
# h3-tag
# h4-tag
# h5-tag
# h6-tag
# ul-tag
# ol-tag
# li-tag
# dl-tag
# dt-tag
# dd-tag
# menu-tag
# dir-tag
# table-tag
# tr-tag
# th-tag
# td-tag
# thead-tag
# tbody-tag
# tfoot-tag
# caption-tag
# col-tag
# colgroup-tag
# form-tag
# input-tag
# textarea-tag
# select-tag
# option-tag
# button-tag
# label-tag
# fieldset-tag
# legend-tag
# datalist-tag
# optgroup-tag
# radio-buttons
# checkboxes
# submit
# reset
# input-types
# input-attributes
# meta-tags
# open-graph
# twitter-cards
# geotagging
# img-tag
# video-tag
# audio-tag
# iframe-tag
# map-tag
# area-tag
# object-tag
# param-tag
# applet-tag
# controls
# autoplay
# loop
# muted
# poster
# src
# type
# javascript-in-html
# basefont-tag
# bdo-tag
# font-tag
# frame-tag
# frameset-tag
# noframes-tag
LOADING ENGINE...

<font>

AI & DATA SCIENCE // font-tag

The deprecated <font> element set a run of text's face, size, and color inline; it has been fully replaced by CSS font-family, font-size, and color properties.

Syntax

<!-- Deprecated: -->
<font face="Arial" size="5" color="red">Warning text</font>
<!-- Modern equivalent: -->
<span style="font-family: Arial; font-size: 1.5rem; color: red;">Warning text</span>

Deep Dive Course

**`<font>`** let you inline-style a span of text's font, size (on an old, non-pixel 1-7 scale rather than real units), and color directly in the markup. HTML5 removed it entirely in favor of CSS — modern browsers apply no special styling to `<font>` at all, rendering it as plain, unstyled text, since separating structure (HTML) from presentation (CSS) is now the standard approach, offering vastly more control (any font, any unit, responsive sizing, gradients, and more).

1Understanding <font>

`<font>` let you inline-style a span of text's font, size (on an old, non-pixel 1-7 scale rather than real units), and color directly in the markup. HTML5 removed it entirely in favor of CSS — modern browsers apply no special styling to <font> at all, rendering it as plain, unstyled text, since separating structure (HTML) from presentation (CSS) is now the standard approach, offering vastly more control (any font, any unit, responsive sizing, gradients, and more).

💡

The old size attribute on <font> used a relative 1-7 scale, not pixels or any real CSS unit — another reason it was replaced, since it offered far less precision than modern CSS sizing.

editor.html
<!-- Old, deprecated, and non-functional -->
<font color="blue" size="6">Big blue heading-like text</font>
localhost:3000

2Practical Example

Here is a real-world application of <font> showing how it is used in production HTML.

editor.html
<!-- Correct modern replacement -->
<span style="color: blue; font-size: 2rem;">Big blue heading-like text</span>
localhost:3000

3Best Practices

Follow these guidelines when working with <font>:

1. Never use <font> in new code — it has no effect in modern browsers

2. Use CSS font-family, font-size, and color properties instead, typically via a class rather than inline styles

3. Replace any legacy <font> tags found in old code with an equivalent styled <span> or CSS class

⚠️

Tip: The old size attribute on <font> used a relative 1-7 scale, not pixels or any real CSS unit — another reason it was replaced, since it offered far less precision than modern CSS sizing.

editor.html
<!-- Old, deprecated, and non-functional -->
<font color="blue" size="6">Big blue heading-like text</font>
localhost:3000

Examples

Example 01Basic Usage
<!-- Old, deprecated, and non-functional -->
<font color="blue" size="6">Big blue heading-like text</font>
Example 02Advanced Example
<!-- Correct modern replacement -->
<span style="color: blue; font-size: 2rem;">Big blue heading-like text</span>

Best Practices

  • Never use in new code — it has no effect in modern browsers
  • Use CSS font-family, font-size, and color properties instead, typically via a class rather than inline styles
  • Replace any legacy tags found in old code with an equivalent styled or CSS class

Interview Question

Why did CSS properties replace the <font> element instead of both being used side by side today?▼

Hint: Think about maintainability and flexibility — repeating <font> tags everywhere versus a single reusable CSS rule.

<font> required repeating the same face/size/color attributes on every single piece of text needing that styling, scattered throughout the HTML, making sitewide changes painful (updating a brand color meant editing potentially thousands of <font> tags). A single CSS rule (e.g. a class, or a tag selector) can style every matching element sitewide from one place, supports units and features <font> never had (like responsive sizing, gradients, custom fonts via @font-face), and keeps content markup clean and focused purely on structure and meaning.

Exercises

EasyPractice using <font> in a real scenario.
View Solution
<!-- Old, deprecated, and non-functional -->
<font color="blue" size="6">Big blue heading-like text</font>

Frequently Asked Questions

Why did CSS properties replace the <font> element instead of both being used side by side today?▼

required repeating the same face/size/color attributes on every single piece of text needing that styling, scattered throughout the HTML, making sitewide changes painful (updating a brand color meant editing potentially thousands of tags). A single CSS rule (e.g. a class, or a tag selector) can style every matching element sitewide from one place, supports units and features never had (like responsive sizing, gradients, custom fonts via @font-face), and keeps content markup clean and focused purely on structure and meaning.

Related Functions

basefont-tagspan-tag