HTML Formatting| Courses

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:

**HTML Formatting Tags**
<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

The HTML  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:

The HTML  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

The HTML  element defines italic text, without any extra importance.

Example:

<!DOCTYPE html>

<html>

<body> This text is normal.

This text is italic. </body> </html>

Output:

The HTML  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 as , and as . However, there is a difference in the meaning of these tags: and defines bold and italic text, but and means that the text is "important".

The HTML  element defines smaller text:

Example:

<!DOCTYPE html>
<html>
<body>
<h2>HTML <small>Small</small> Formatting</h2>
</body>
</html>

Output:

HTML

The HTML <big> element defines large text:

Example:

<!DOCTYPE html>
<html>
<body>
<h2>HTML <big>Big or Large</big> Formatting</h2>
</body>
</html>

Output:

The HTML  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:

The HTML  element defines marked or highlighted text:

Example:

<!DOCTYPE html>
<html>
<body>
<h2>HTML <mark>Marked</mark> Formatting</h2>
</body>
</html>

Output:

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:

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:

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:

The HTML  element defines _subscripted text.

Example:

<!DOCTYPE html>
<html>
<body><p>This is <sub>subscripted</sub> text.</p></body>
</html>

Output:

The HTML element defines ^{superscripted} text.

Example:

<!DOCTYPE html>
<html>
<body>

<p>This is <sup>superscripted</sup> text.</p>

</body>
</html>

Output:

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:

Div Element

The <div> and 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:

The  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  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:

What is HTML Formatting ?

Bold Text or <b> Element

Important text or <strong> Element

HTML Italic Text or <i> Elements

HTML Emphasized Text or <em> Elements

HTML Small Text or <small> Element

HTML Large Text or <big> Element

HTML Underlined Text or <u> Elements

HTML Marked Text or <mark> Element

HTML Deleted Text or <del> Element

HTML Inserted Text or <ins> Element

HTML Strike Text or <strike> Element

HTML Subscripted Text or <sub> Element

HTML Superscripted Text or <sup> Element

HTML Monospaced Font Text or <big> Element

HTML Grouping Content or <div> and <span>Element

Span Element

HTML Tutorials