Formatting Tags

HTML contains several elements, tags and attributes, to display text in multiple formats with different layouts.

<FONT> ... </FONT> tag

With the <font> tag you can control the typeface, type size, and color of the text displayed in the browser.
          - The typeface can be changed with the face attribute:   <font face="typeface">text</font>
<font face="Arial Black">This is the Arial Black font.</font>

          - The text size can be changed with the size attribute:   <font size="value">text</font>
"value" is a number from 1 to 7, which sets the type size relative to the default size set in the browser (3 is the default).
Also, you can add a relative value "+n" or "-n" (based on the default).
<font size="+2">Font with +2 size</font>

          - The font color can be changed with the color attribute:   <font color="a_color">text</font>
color="#RRGGBB" or "color name".
<font color="#01ce02">Text with font color #01ce02</font>

The "<font> ... </font>" tag is an outdated method for affecting the style of the enclosed text. This element is no longer used in professional web design in favor of CSS style sheets for changing text appearance.
The <font> tag is not supported in HTML5.

Bold, Italic, Underline and other elements

Elements often used to format text (called formatting tags): - Often <strong> renders as <b>, and <em> renders as <i>. But <strong> or <em> means that you want the text to be rendered in a way that the user understands as "important".
<b> bold </b>
<i> italic </i>
<u> underline </u>
<em> emphasized </em>
<strong> strong </strong>

Other elements used for text formatting

- The set 1: Example:
 <title>Document Title</title>

Text within    PRE   tag
new line without a BR
<tt>Teletype text</tt><br />
<cite>Example of cite</cite>

This code will display:
Text within    PRE   tag
new line without a BR
Teletype text
Example of cite

- The set 2: Example:
 <title>Document Title</title>

<del>Deleted text</del><br />
<big>Display the text in bigger format</big><br />
<small>Display the text in smaller format</small><br />
<sub>Place text in subscript position</sub> Normal text <sup>Place text in superscript position</sup>

This code will display:
Deleted text
Display the text in bigger format
Display the text in smaller format
Place text in subscript position Normal text Place text in superscript position

- The set 3 (The following tags are used for documents with technical applications): Example:
 <title>Document Title</title>

<p>DOM reference: <code>document.getElementById('id')</code></p>
<dfn>Truecolor</dfn> uses 24 bits per pixel.
<p>Provide alternative error messages to <samp>404 Not Found</samp>.</p>
<p>Enter your coupon code. Example: <kbd>AX4003</kbd></p>
<code><var>webSite</var> = '';</code>

This code will display:

DOM reference: document.getElementById('id')

Truecolor uses 24 bits per pixel.

Provide alternative error messages to 404 Not Found.

Enter your coupon code. Example: AX4003

webSite = '';

- The set 4: Example:
 <title>Document Title</title>

I say: <q>If you want and you really believe, anything is possible.</q>
 <p>The unrequited joys can bring sadness and shared suffering can bring joy.</p>
 This is the first day of the rest of your life.
 <p>Patience with love and love with patience.</p>
<address>HTML Course:</address>

This code will display:
I say: If you want and you really believe, anything is possible.

The unrequited joys can bring sadness and shared suffering can bring joy.

This is the first day of the rest of your life.

Patience with love and love with patience.

HTML Course:

Daily Test with Code Example

Which tag defines the clickable areas inside the image map?
<map> <img> <area>
<img src="image.jpg" usemap="#map1">
<map name="map1">
  <area shape="rect" coords="9, 120, 56, 149" href="#">
  <area shape="rect" coords="100, 200, 156, 249" href="#">
Which CSS property defines what is done if the content in a box is too big for its defined space?
display overflow position
#id {
  overflow: auto;
Click on the event which is triggered when the mouse is positioned over an object.
onclick onmouseover onmouseout
document.getElementById("id").onmouseover = function(){
  document.write("Have Good Life");
Indicate the PHP variable that contains data added in URL address after the "?" character.
if(isset($_GET["id"])) {
  echo $_GET["id"];
HTML Text Formatting

Last accessed pages

  1. Atv Blitz (493)
  2. Auto Moto Games (7297)
  3. Download PHP MySQL resources (677)
  4. Animating Armature - Pose Frames (1746)
  5. Bloopers 2 (343)

Popular pages this month

  1. Qwop (7148)
  2. Drag Racer V3 (4900)
  3. Bubbles3 (1994)
  4. List with All the Games (1669)
  5. Butterfly Kyodai (1589)