Learn HTML Formatting

Tips (Total 12)

1. What is HTML Text Formatting

2. What is HTML Formatting Elements

3. How to create HTML and Elements

4. How to create HTML Elements

5. How to create HTML Elements

6. How to create HTML Elements

7. How to create HTML Element

8. How to create HTML Element

9. How to create HTML <del> Element

10. How to create HTML <ins> Element

11. How to create HTML Element

12. How to create HTML Element

# Tips-1) What is HTML Text Formatting

HTML contains several elements for defining text with a special meaning.

HTML Formatting is a process of formatting text for better look and feel. HTML provides us ability to format text without using CSS. There are many formatting tags in HTML. These tags are used to make text bold, italicized, or underlined. There are almost 14 options available that how text appears in HTML and XHTML.

In HTML the formatting tags are divided into two categories:

Physical tag: These tags are used to provide the visual appearance to the text.
Logical tag: These tags are used to add some logical or semantic value to the text.

NOTE: There are some physical and logical tags which may give same visual appearance, but they will be different in semantics.

Here, we are going to learn 14 HTML formatting tags. Following is the list of HTML formatting text.

Element name	Description
<b>	This is a physical tag, which is used to bold the text written between it.
<strong>	This is a logical tag, which tells the browser that the text is important.
<i>	This is a physical tag which is used to make text italic.
<em>	This is a logical tag which is used to display content in italic.
<mark>	This tag is used to highlight text.
<u>	This tag is used to underline text written between it.
<tt>	This tag is used to appear a text in teletype. (not supported in HTML5)
<strike>	This tag is used to draw a strikethrough on a section of text. (Not supported in HTML5)
<sup>	It displays the content slightly above the normal line.
<sub>	It displays the content slightly below the normal line.
<del>	This tag is used to display the deleted content.
<ins>	This tag displays the content which is added
<big>	This tag is used to increase the font size by one conventional unit.
<small>	This tag is used to decrease the font size by one unit from base font size.

Example of HTML Text Formatting

HTML contains several elements for defining text with a special meaning. It is made changing Various activities of Text.

<p><b>This text is bold</b></p>
<p><i>This text is italic</i></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>

Full Example of HTML Text Formatting

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<p><b>This text is bold</b></p>
<p><i>This text is italic</i></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>

</body>
</html>

Output should be:

# Tips-2) What is HTML Formatting Elements

Formatting elements were designed to display special types of text:

 - Bold text
 - Important text
 - Italic text
 - Emphasized text
 - Marked text
 - Smaller text
<del> - Deleted text
<ins> - Inserted text
 - Subscript text
 - Superscript text

# Tips-3) How to create HTML and Elements

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

Example of HTML and Elements

<p>This text is normal.</p>

<p><b>This text is bold.</b></p>

Full Example of HTML and Elements

First one is This text is normal. Second one is This text is bold.

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<p>This text is normal.</p>

<p><b>This text is bold.</b></p>

</body>
</html>

Output should be:

# Tips-4) How to create HTML Elements

The HTML  element defines text with strong importance. The content inside is typically displayed in bold.

Example of HTML Elements

This text is normal. This text is important!

<p>This text is normal.</p>

<p><strong>This text is important!</strong></p>

Full Example of HTML Elements

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<p>This text is normal.</p>

<p><strong>This text is important!</strong></p>

</body>
</html>

Output should be:

# Tips-5) How to create HTML Elements

The HTML  element defines a part of text in an alternate voice or mood. The content inside is typically displayed in italic.

Tip: The  tag is often used to indicate a technical term, a phrase from another language, a thought, a ship name, etc.

Example of HTML Elements

Followings are two Example. You may follow it.

<p>This text is normal.</p>
<p><i>This text is italic.</i></p>

Full Example of HTML Elements

tag : It is one of the element of HTML which is used in formatting HTML texts. It is used to define a text in technical term, alternative mood or voice, a thought, etc.

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<p>This text is normal.</p>
<p><i>This text is italic.</i></p>

</body>
</html>

Output should be:

# Tips-6) How to create HTML Elements

The HTML  element defines emphasized text. The content inside is typically displayed in italic.

Tip: A screen reader will pronounce the words in  with an emphasis, using verbal stress.

Example of HTML Elements

See the Example

index.html

Example: HTML

<p>This text is normal.</p>
<p><em>This text is emphasized.</em></p>

Full Example of HTML Elements

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<p>This text is normal.</p>

<p><em>This text is emphasized.</em></p>

</body>
</html>

Output should be:

# Tips-7) How to create HTML Element

The HTML  element defines smaller text:

Example of HTML Element

<p><small>This is some smaller text.</small></p>

Full Example of HTML Element

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<p>This is some normal text.</p>
<p><small>This is some smaller text.</small></p>

</body>
</html>

Output should be:

# Tips-8) How to create HTML Element

The HTML  element defines text that should be marked or highlighted:

Example of HTML Element

<mark>milk</mark>

Full Example of HTML Element

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<p>Do not forget to buy <mark>milk</mark> today.</p>

</body>
</html>

Output should be:

# Tips-9) How to create HTML <del> Element

The HTML <del> element defines text that has been deleted from a document. Browsers will usually strike a line through deleted text:

Example of HTML <del> Element

My favorite color is <del>blue</del> red.

<del>blue</del>

Full Example of HTML <del> Element

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<p>My favorite color is <del>blue</del> red.</p>

</body>
</html>

Output should be:

# Tips-10) How to create HTML <ins> Element

The HTML <ins> element defines a text that has been inserted into a document. Browsers will usually underline inserted text:

Example of HTML <ins> Element

<ins>red</ins>

Full Example of HTML <ins> Element

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<p>My favorite color is <del>blue</del> <ins>red</ins>.</p>

</body>
</html>

Output should be:

# Tips-11) How to create HTML Element

The HTML  element defines subscript text. Subscript text appears half a character below the normal line, and is sometimes rendered in a smaller font. Subscript text can be used for chemical formulas, like H2O:

Example of HTML Element

<p>This is <sub>subscripted</sub> text.</p>

Full Example of HTML Element

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<p>This is <sub>subscripted</sub> text.</p>

</body>
</html>

Output should be:

# Tips-12) How to create HTML Element

The HTML  element defines superscript text. Superscript text appears half a character above the normal line, and is sometimes rendered in a smaller font. Superscript text can be used for footnotes, like WWW[1]:

Example of HTML Element

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

Full Example of HTML Element

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>