Text formatting in HTML

Bold, Italics, Underline, strike, monospaced, superscript, subscript, div, span, Inserted and large text

In our daily life, all of us use many types of word processor, you must be familiar with the ability of word processor to make text bold, italicised, or underlined. In the similar way HTML has built in text formatting tags which can be used to format text in HTML. These are explained below:

Making Text Bold

Any text that appears within <b>…</b> element, is displayed in bold as shown below. Example is shown below:

<!DOCTYPE html>
<html>
<head>
      <title> Making Text Bold </title>
</head>
<body>
      <p>Welcome to the city of <b>temples</b>Jammu</p>
</body>
</html>

This will produce the following result

Welcome to the city of temples Jammu

Making Text Italics

The text that appears within <i>…</i> element is displayed in italicised as shown below:

<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
      <title> Making Text Bold </title>
</head>
<body>
    <p>Welcome to the city of <i>temples</i>Jammu</p>
</body>
</html>

This will produce the following result

Welcome to the city of temples Jammu

Making Text Underlined

The text that appears within <u>…</u> element is displayed in underlined text as shown below

<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
      <title> Making Text Bold </title>
</head>
<body>
    <p>Welcome to the city of <u>temples</u>Jammu</p>
</body>
</html>

This will produce the following result

Welcome to the city of temples Jammu

Strike Text

Anything that appears within <strike>…</strike> element is displayed with strike through, which is a thin line through the text as shown below:

<!DOCTYPE html>
<html>
<head>
      <title>Strike Text Example</title>
</head>
<body>
      <p>Welcome to the city of <strike>temples</strike>Jammu</p>
</body>
</html>

This will produce the following result

Welcome to the city of temples Jammu

Monospaced Font

The content of a <tt>…</tt> element is written in monospaced font. Most of the fonts are known as variable-width fonts because different letters are of different widths (for example, the letter ‘m’ is wider than the letter ‘i’). In a monospaced font, however, each letter has the same width.

<!DOCTYPE html>
<html>
<head>
      <title>Monospaced Font Example</title>
</head>
<body>
      <p>The following word uses a <tt>monospaced</tt> typeface.</p>
</body>
</html>
This will produce the following result
The following word uses a monospaced typeface.

Superscript Text

The content of a <sup>…</sup> element is written in superscript; the font size used is the same size as the characters surrounding it but is displayed half a character’s height above the other characters.

<!DOCTYPE html>
<html>
<head>
      <title>Superscript Text Example</title>
</head>
<body>
      <p>The square of x can be written as x<sup>2 </sup></p>
</body>
</html>

This will produce the following result

The square of x can be written as x 2 

Subscript Text

The content of a <sub>…</sub> element is written in subscript, the font size used is the same as the characters surrounding it, but is displayed half a character’s height beneath the other characters.

<!DOCTYPE html>
<html>
<head>
      <title> Subscript Text Example</title>
</head>
<body>
      <p>The Subscript of x to 2 can be written as x<sub>2 </sub></p>
</body>
</html>

This will produce the following result

The square of x can be written as x 2 

Inserted Text

Anything that appears within <ins>…</ins> element is displayed as inserted text. In practice sometime there is need to insert new text in the existing paragraph. In such cases we use <ins> tab as well as <del> tab.

<!DOCTYPE html>
<html>
<head>
      <title>Inserted Text Example</title>
</head>
<body>
      <p>I want to have <del>tea</del> <ins>coffee</ins></p>
</body>
</html>

This will produce the following result

I want to have tea coffee

Larger Text

The content of the <big>…</big> element is displayed one font size larger than the rest of the text surrounding it as shown below.

<!DOCTYPE html>
<html>
<head>
      <title>Larger Text Example</title>
</head>
<body>
      <p>Welcome to the city of <big>temples</big>Jammu</p>
</body>
</html>

Smaller Text

The content of the <small>…</small> element is displayed one font size smaller than the rest of the text surrounding it as shown below

<!DOCTYPE html>
<html>
<head>
      <title>Larger Text Example</title>
</head>
<body>
      <p>Welcome to the city of <big>temples</big>Jammu</p>
</body>
</html>

Grouping Content

The <div> and <span> elements allow you to group together several elements to create sections or subsections of a page. The properties of these sections can be changed as per requirement by targeting with the help of IDs and classes.

For example, you might want to put all of the footnotes on a page within a <div> element to indicate that all of the elements within that <div> element relate to the footnotes. You might then attach a style to this <div> element so that they appear using a special set of style rules.

<!DOCTYPE html>
<html>
<head>
      <title>Div Tag Example</title>
</head>
<body>
      <div id = "menu" align = "middle" >
         <a href = "/index.htm">HOME</a> | 
         <a href = "/about/contact_us.htm">CONTACT</a> | 
         <a href = "/about/index.htm">ABOUT</a>
      </div>
      <div id = "content" align = "left" >
         <h5>Content Articles</h5>
         <p>Actual content goes here.....</p>
      </div>
   </body>
</html>

This will produce the following result

                       HOME | CONTACT | ABOUT
Content Articles
Actual content goes here.....

Span element

The <span> element, on the other hand, can be used to group inline elements only. So, if you have a part of a sentence or paragraph which you want to group together, you could use the <span> element as follows.

<!DOCTYPE html>
<html>
<head>
      <title>Span Tag Example</title>
</head>
<body>
<p>This is the example of <span style = "color:green">span tag</span> and the <span style = "color:red">div tag</span> alongwith CSS</p>
</body>
</html>

This is the example of span tag and the div tag alongwith CSS