HTML Formatting
If you use a word processor, you must be familiar with the ability to make text bold, italicized, or underlined; these are just three of the ten options available to indicate how text can appear in HTML and XHTML.
Bold Text
Anything that appears within <b>...</b> element, is displayed in bold as shown below:
<!DOCTYPE html>
<html>
<head>
<title>Bold Text Example</title>
</head>
<body>
<p>The following word uses a <b>bold</b> typeface.</p>
</body>
</html>
You can run the code and see the result.
Italic Text
Anything that appears within <i>...</i> element is displayed in italicized as shown below:
Example:
<!DOCTYPE html>
<html>
<head>
<title>Italic Text Example</title>
</head>
<body>
<p>The following word uses a <i>italicized</i> typeface.</p>
</body>
</html>
Run the code and see the result.
Underlined Text
Anything that appears within <u>...</u> element, is displayed with an underline as shown below:
<!DOCTYPE html>
<html>
<head>
<title>Underlined Text Example</title>
</head>
<body>
<p>The following word uses a <u>underlined</u> typeface.</p>
</body>
</html>
Run the code and see the result.
Strike Text
Anything that appears within <strike>...</strike> element is displayed with a strikethrough, which is a thin line through the text as shown below:
<!DOCTYPE html>
<html>
<head>
<title>Strike Text Example</title>
</head>
<body>
<p>The following word uses a <strike>strikethrough</strike> typeface.</p>
</body>
</html>
Run the code and see the result.
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>
Run the code and see the result.
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 following word uses a <sup>superscript</sup> typeface.</p>
</body>
</html>
Run the code and see the result.
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 Examples</title>
</head>
<body>
<p>The following word uses <sub>subscript</sub> typeface.</p>
</body>
</html>
Run this code and see the result.
Inserted Text
Anything that appears within <ins>...</ins> element is displayed as inserted text.
<!DOCTYPE html>
<html>
<head>
<title>Inserted Text Example</title>
</head>
<body>
<p>I want to drink <del>cola</del> <ins>wine</ins></p>
</body>
</html>
Run this code and see the result.
Similarly, there are other HTML formatting elements as well, which I am posting below, you can try them:
- Deleted Text <del>...</del>
- Larger Text <big>...</big>
- Samaller Text <small>...</small>
Topics
Jammu & Kashmir - History, Culture & Traditions | J&K Current Trends | Social Network | Health | Lifestyle | Human Resources | Analytics | Cosmetics | Cosmetology | Forms | Jobs
Quote of the Day
"Time Flies Over, but Leaves its Shadows Behind"