What is HTML Formatting ?
HTML Formatting is a process to format text to make it look and feel better. There are many formatting tags in HTML. These tags are used to make text bold, italic or highlighted. There are nearly 12 options available in HTML and XHTML for how text appears.
Formatting elements were designed to display special types of text:
| <b> | Bold text |
| <strong> | Important text |
| <i> | Italic text |
| <em> | Emphasized text |
| <mark> | Marked text |
| <small> | Small text |
| <del> | Deleted text |
| <ins> | Inserted text |
| <sub> | Subscript text |
| <sup> | Superscript text |
| <big> | Large Text |
| <u> | Underlined Tex |
| <strike> | Strikethrough Text |
Bold Text or <b> Element
The HTML <b> element defines bold text, without any extra importance.
Example:
<!DOCTYPE html>
<html>
<body>
<p>This text is normal.</p>
<p><b>This text is bold.</b>
</p>
</body>
</html>
Output:
Important text or <strong> Element
The HTML <strong> element defines strong text, with added semantic importance.
Example:
<!DOCTYPE html>
<html>
<body>
<p>This text is normal.</p>
<p><strong>This text is strong.</strong></p>
</body>
</html>
Output:
HTML Italic Text or <i> Elements
The HTML <i> element defines italic text, without any extra importance.
Example:
<!DOCTYPE html>
<html>
<body>
<p>This text is normal.</p>
<p><i>This text is italic.</i></p>
</body> </html>
Output:
HTML Emphasized Text or <em> Elements
The HTML <em> element defines emphasized text, with added semantic importance.
Example:
<!DOCTYPE html>
<html>
<body>
<p>This text is normal.</p>
<p><em>This text is emphasized.</em></p>
</body>
</html>
Output:
Improtant Note: Browsers display <strong> as <b>, and <em> as <i>. However, there is a difference in the meaning of these tags: <b> and <i> defines bold and italic text, but <strong> and <em> means that the text is "important".
HTML Small Text or <small> Element
The HTML <small> element defines smaller text:
Example:
<!DOCTYPE html>
<html>
<body>
<h2>HTML <small>Small</small> Formatting</h2>
</body>
</html>
Output:
HTML Large Text or <big> Element
The HTML <big> element defines large text:
Example:
<!DOCTYPE html>
<html>
<body>
<h2>HTML <big>Big or Large</big> Formatting</h2>
</body>
</html>
Output:
HTML Underlined Text or <u> Elements
The HTML <u> element defines underlined text.
Example:
<!DOCTYPE html>
<html>
<body>
<p>This text is normal.</p>
<p><u>This text is underlined.</u></p>
</body>
</html>
Output:
HTML Marked Text or <mark> Element
The HTML <mark> element defines marked or highlighted text:
Example:
<!DOCTYPE html>
<html>
<body>
<h2>HTML <mark>Marked</mark> Formatting</h2>
</body>
</html>
Output:
HTML Deleted Text or <del> Element
The HTML <del> element defines deleted (removed) text.
Example:
<!DOCTYPE html>
<html>
<body>
<p>The del element represents deleted (removed) text.</p>
<p>My favorite color is <del>blue</del> red.</p>
</body>
</html>
Output:
HTML Inserted Text or <ins> Element
The HTML <ins> element defines inserted (added) text.
Example:
<!DOCTYPE html>
<html>
<body>
<p>The ins element represent inserted (added) text.</p>
<p>My favorite <ins>color</ins> is red.</p>
</body>
</html>
Output:
HTML Strike Text or <strike> Element
The HTML <strike> element defines strikethrough, which is a thin line through the text.
Example:
<!DOCTYPE html>
<html>
<body>
<p>This is <strike>strikethrough</strike> text.</p>
</body>
</html>
Output:
HTML Subscripted Text or <sub> Element
The HTML <sub> element defines subscripted text.
Example:
<!DOCTYPE html>
<html>
<body>
<p>This is <sub>subscripted</sub> text.</p>
</body>
</html>
Output:
HTML Superscripted Text or <sup> Element
The HTML <sup> element defines superscripted text.
Example:
<!DOCTYPE html>
<html>
<body>
<p>This is <sup>superscripted</sup> text.</p>
</body>
</html>
Output:
HTML Monospaced Font Text or <big> Element
The content of a <tt>...</tt> element is written in monospaced font. Suppose you want that each letter has the same width then you should write the content within <tt>.............</tt> element.
Note: We know most fonts are referred to as variable - width fonts because different letters have different widths. (for example: 'w' is wider than 'i'). Monospaced Font provides similar space among every letter.
Example:
<!DOCTYPE html>
<html>
<body>
<h2>HTML <tt>monospaced</tt> typeface.</h2>
</body>
</html>
Output:
HTML Grouping Content or <div> and <span>Element
Div Element
The <div> and <span> elements allow you to group together several elements to create sections or subsections of a page.
Example:
<!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" bgcolor:"white">
<h5>Content Articles</h5><p>Actual content goes here.....</p>
</div>
</body>
</html>Output:
Span Element
The <span> element, on the other hand, can be used to group inline elements only. if you have a part of a sentence or paragraph which you want to group together, you could use the <span> element.
Example:
<!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>Output:
