HTML Text Formatting

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".
Example:
<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:
<html>
<head>
 <title>Document Title</title>
</head>
<body>

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

</body>
</html>
This code will display:
Text within    PRE   tag
new line without a BR
Teletype text
Example of cite

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

<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>

</body>
</html>
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:
<html>
<head>
 <title>Document Title</title>
</head>
<body>

<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> = 'coursesweb.net/html/';</code>

</body>
</html>
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 = 'coursesweb.net/html/';

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

I say: <q>If you want and you really believe, anything is possible.</q>
<blockquote>
 <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>
</blockquote>
<address>HTML Course: http://coursesweb.net/html/</address>

</body>
</html>
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: http://coursesweb.net/html/