HTML

Examples of Formatting Tags in HTML

This article demonstrates the Examples of Formatting Tags in HTML.

In order to display the tag names, we use the symbol entities &lt; and &gt; These symbol entities represent < and > respectively. After that, an example of each of the formatting tag is provided. Since we do not need to use the CSS for formatting, these tags offer a convenient mechanism for basic formatting of the text.

The formatting features provided by these tags include small, big, strong, bold, italics, and underlined tags. Also, there are tags for inserted text, deleted tags, and strike through text. Furthermore, we have tags for emphasized text, marked text, subscripts, and superscripts.

<html>
 <head>
	<title>Formatting Tags</title>
 </head>
 <body>
    <center><h1>Formatting Tags Demo</h1></center>
    <div>
       <p>The following list contains the formatting tags available in HTML</p>
       <p>
	<ol>
            <li>&lt;b&gt; Displays the text in bold.</li>
            <li>&lt;i&gt; Displays the text in italics</li>
            <li>&lt;u&gt; Displays the undelined text.</li>
            <li>&lt;sup&gt; Displays the superscripted text.</li>
            <li>&lt;sub&gt; Displays the subscripted text.</li>
            <li>&lt;big&gt; Displays the big text.</li>
            <li>&lt;small&gt; Displays the small text.</li>
            <li>&lt;strong&gt; Displays the strong text.</li>
            <li>&lt;em&gt; Displays the emphasized text.</li>
            <li>&lt;strike&gt;  Displays the strike through text.</li>
            <li>&lt;ins&gt; Displays the inserted text.</li>
            <li>&lt;del&gt; Displays the deleted text.</li>
            <li>&lt;mark&gt; Displays the highlighted text.</li>
        </ol>
       </p>
    </div>
    <div>
       <h3>Examples of the Formatting Tags</h3>
       <p>The <b>Bold</b> Text.</p>
       <p>The <i>italics</i> Text.</p>
       <p>The <u>Underlined</b> Text.</u>
       <p>The Superscript: 2<sup>n</sup> Text.</p>
       <p>The Subscript: x<sub>1</sub> Text.</p>
       <p>The <small>Small</small> Text.</p>
       <p>The <big>Big</big> Text.</p>
       <p>The <strong>Strong</strong> Text.</p>
       <p>The <em>Emphasized</em> Text.</p>
       <p>The <mark>Highlighted</mark> Text.</p>
       <p>The <strike>Strike through</strike> Text.</p>
       <p>The <del>Deleted</del> Text.</p>
       <p>The <ins>Inserted</ins> Text.</p>
 </body>
</html>

Output

Demonstrating an Examples of Formatting Tags in HTML
Demonstrating an Examples of Formatting Tags in HTML
Using Formatting Tags in HTML
Using Formatting Tags in HTML

Apart from these tags there are some more formatting tags. The following example demonstrates the other formatting tags. Basically, we use these tags tags to display the teletype text, computer code, sample output, keyboard input, and computer variables.

<html>
 <head>
	<title>Formatting Tags</title>
 </head>
 <body>
    <center><h1>Formatting Tags Demo</h1></center>
    <div>
       <p>The following list contains more formatting tags</p>
       <p>
	<ol>
            <li>&lt;tt&gt; Displays the teletype text.</li>
            <li>&lt;code&gt; Displays the computer code.</li>
            <li>&lt;samp&gt; Displays the sample output.</li>
            <li>&lt;kbd&gt; Displays the keyboard input.</li>
            <li>&lt;var&gt; Displays a variable.</li>
        </ol>
       </p>
    </div>
    <div>
       <h3>Examples of the Formatting Tags</h3>
       <p>The <tt>teletype<tt> Text.</p>
       <p>The <code>Computer Code</code> Text.</p>
       <p>The <samp>Sample Output<//samp> Text.</u>
       <p>The <kbd>Keyboard Input</kbd></p>
       <p>A <var>Variable</var>.</p>
 </body>
</html>

Output

More Formatting Tags
More Formatting Tags

Preformatted Text

In order to display the preformatted text, we use the <pre> tag. The following example demonstrates the use of <pre> tag. When we want to provide some predefined formatting in the text, we can use the <pre> tag. Basically, the <pre> tag maintains the formatting and displays the spaces and line breaks as given by the user. Otherwise, the spaces including the line breaks will collapse to a single space.

<html>
 <head>
	<title>Pre Formatting Tag</title>
 </head>
 <body>
    <center><h1>Formatting Tags Demo</h1></center>
    <div>
       <p><pre>This        is an
   example 
of 
preformatting          tag.</pre></p>
    </div>
    <div>
       <h3>Another Example of the Pre Formatting Tag</h3>
       <p><pre>
             Menu
          -----------
          1. Add
          2. Subtract
          3. Multiply
          4. Divide
          5. Exit </pre>
       </p>
 </body>
</html>

Output

An Example of using Pre Formatting Tag in HTML
An Example of using Pre Formatting Tag in HTML

Further Reading

HTML Examples for Beginners

Introduction to Django Framework and its Features

Django Practice Exercise

Installing Django on Windows

Examples of Array Functions in PHP

Basic Programs in PHP

Registration Form Using PDO in PHP

Inserting Information from Multiple CheckBox Selection in a Database Table in PHP

programmingempire

princites.com

You may also like...

1 Comment

  1. […] Further, demonstrate the use of formatting tags by creating an HTML document. […]

Leave a Reply

Your email address will not be published. Required fields are marked *