Table of Contents
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
