HTML: Tag - TechOnTheNet

Advertisement

TechOnTheNet Logo
  1. Home
  2. HTML
  • Databases
  • SQL
  • Oracle / PLSQL
  • SQL Server
  • MySQL
  • MariaDB
  • PostgreSQL
  • SQLite
  • MS Office
  • Excel
  • Access
  • Word
  • Web Development
  • HTML
  • CSS
  • JavaScript
  • Color Picker
  • Programming
  • C Language
  • More
  • ASCII
  • Unicode
  • Linux
  • UNIX
  • Techie Humor

Advertisement

clear filter right caret

HTML Elements

  • <!DOCTYPE>
  • <a>
  • <abbr>
  • <address>
  • <area>
  • <article>
  • <aside>
  • <b>
  • <base>
  • <blockquote>
  • <body>
  • <br>
  • <button>
  • <canvas>
  • <caption>
  • <cite>
  • <code>
  • <col>
  • <colgroup>
  • <datalist>
  • <dd>
  • <del>
  • <dfn>
  • <div>
  • <dl>
  • <dt>
  • <em>
  • <embed>
  • <fieldset>
  • <footer>
  • <form>
  • <h1>
  • <h2>
  • <h3>
  • <h4>
  • <h5>
  • <h6>
  • <head>
  • <header>
  • <hr>
  • <html>
  • <i>
  • <iframe>
  • <img>
  • <input>
  • <ins>
  • <kbd>
  • <label>
  • <legend>
  • <li>
  • <link>
  • <main>
  • <map>
  • <mark>
  • <marquee>
  • <menu>
  • <meta>
  • <nav>
  • <noscript>
  • <object>
  • <ol>
  • <optgroup>
  • <option>
  • <p>
  • <pre>
  • <q>
  • <s>
  • <script>
  • <section>
  • <select>
  • <small>
  • <span>
  • <strong>
  • <style>
  • <sub>
  • <sup>
  • <table>
  • <tbody>
  • <td>
  • <tfoot>
  • <th>
  • <thead>
  • <time>
  • <title>
  • <tr>
  • <u>
  • <ul>
down caret

Deprecated HTML Elements

  • <acronym>
  • <basefont>
  • <big>
  • <center>
  • <font>
  • <strike>
totn HTML HTML: <font> tag

This HTML tutorial explains how to use the HTML element called the <font> tag with syntax and examples.

Description

The HTML <font> tag defines the font size, color and face of text in the HTML document. Since this tag was removed in HTML5, it is recommended that you use CSS properties such as font, font-family, font-size and color to format the text in the document. This tag is also commonly referred to as the <font> element.

WARNING: The <font> tag has been removed in HTML5. Use CSS such as font, font-family, font-size and color to format the text in the document.

Syntax

In HTML, the syntax for the <font> tag is: (example that formats the text as red, uses to the font-family Verdana, Geneva, sans-serif and has a relative size of +1)

<body> <p><font color="red" face="Verdana, Geneva, sans-serif" size="+1">Your formatted text goes here</font></p> </body>

Sample Output

Attributes

In addition to the Global Attributes, the following is a list of attributes that are specific to the <font> tag:

Attribute Description HTML Compatibility
color Color of text in either hexadecimal (ie: #RRGGBB format) or named color (ie: black, red, white) HTML 4.01
face Font to use for text. Listed as one or more font names (comma separated) HTML 4.01
size Font size expressed as either a numeric or relative value. Numeric values range from 1 to 7 (1 is the smallest, 7 is the largest, 3 is the default). Relative values can be values such as +1 or -2, increasing by one font size or decreasing by 2 font sizes, respectively. HTML 4.01

Note

  • The HTML <font> element is found within the <body> tag.
  • The <font> tag is obsolete in HTML5. Use CSS instead to format the text. The CSS equivalents would be color, font, font-family, font-size, etc.

Browser Compatibility

The <font> tag has basic support with the following browsers:

  • Chrome
  • Android
  • Firefox (Gecko)
  • Firefox Mobile (Gecko)
  • Internet Explorer (IE)
  • Edge Mobile
  • Opera
  • Opera Mobile
  • Safari (WebKit)
  • Safari Mobile

Example

We will discuss the <font> tag below, exploring examples of how to use the <font> tag in HTML5, HTML 4.01 Transitional, XHTML 1.0 Transitional, XHTML 1.0 Strict, and XHTML 1.1.

  • HTML5
  • HTML4
  • XHTML

HTML5 Document

You can not use the <font> tag in HTML5. Instead, use CSS properties such as font, font-family, font-size and color to format the text in the document.

HTML 4.01 Transitional Document

If you created a new web page in HTML 4.01 Transitional, your <font> tag might look like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>HTML 4.01 Transitional Example by www.techonthenet.com</title> </head> <body> <h1>Heading 1</h1> <p>Example 1 <font color="red">font color is red using a named color</font></p> <p>Example 2 <font color="#FF0000">font color is red using hexadecimal format</font></p> <p>Example 3 <font face="Verdana, Geneva, sans-serif">font face is a different font family</font></p> <p>Example 4 <font size="5">font size is 5 using numeric value</font></p> <p>Example 5 <font size="+2">font size is two font sizes bigger using a relative value</font></p> <p>Example 6 <font color="red" face="Verdana, Geneva, sans-serif" size="5">combining attributes</font></p> </body> </html>

In this HTML 4.01 Transitional Document example, we have 6 <font> tag examples.

The first <font> tag shows how to set the font color with a named color while the second <font> tag shows how to set the font color with a hexadecimal value. The third <font> tag shows how to set the font face with a comma separate list of font families to use. The fourth <font> tag shows how to set the font size using a numeric value while the fifth <font> tag shows how to set the font size using a relative value.

The sixth <font> tag shows how to combine the color, face, and size together in the same <font> tag.

XHTML 1.0 Transitional Document

If you created a new web page in XHTML 1.0 Transitional, your <font> tag might look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>XHMTL 1.0 Transitional Example by www.techonthenet.com</title> </head> <body> <h1>Heading 1</h1> <p>Example 1 <font color="red">font color is red using a named color</font></p> <p>Example 2 <font color="#FF0000">font color is red using hexadecimal format</font></p> <p>Example 3 <font face="Verdana, Geneva, sans-serif">font face is a different font family</font></p> <p>Example 4 <font size="5">font size is 5 using numeric value</font></p> <p>Example 5 <font size="+2">font size is two font sizes bigger using a relative value</font></p> <p>Example 6 <font color="red" face="Verdana, Geneva, sans-serif" size="5">combining attributes</font></p> </body> </html>

In this XHTML 1.0 Transitional Document example, we have 6 <font> tag examples.

The first <font> tag shows how to set the font color with a named color while the second <font> tag shows how to set the font color with a hexadecimal value. The third <font> tag shows how to set the font face with a comma separate list of font families to use. The fourth <font> tag shows how to set the font size using a numeric value while the fifth <font> tag shows how to set the font size using a relative value.

The sixth <font> tag shows how to combine the color, face, and size together in the same <font> tag.

XHTML 1.0 Strict Document

You can not use the <font> tag in XHTML 1.0 Strict.

XHTML 1.1 Document

You can not use the <font> tag in XHTML 1.1.

Share on:

Advertisement

Home | About Us | Contact Us | Testimonials | Donate

While using this site, you agree to have read and accepted our Terms of Service and Privacy Policy.

Copyright © 2003-2024 TechOnTheNet.com. All rights reserved.

Từ khóa » Html Color Tag Font