html formatting 

HTML Formatting


HTML Formatting

HTML Formatting is a process of formatting text for better look and feel. There are many formatting tags in HTML. These tags are used to make text bold, italicized, or underlined. There are almost 12 options available that how text appears in HTML and XHTML.

Here, we are going to learn 12 HTML formatting tags.


1) Bold Text

If you write anything within <b>…………</b> element, is shown in bold letters.

See this example:

  1. <p> <b>Write Your First Paragraph in bold text.</b></p>   

Test it Now

Output:

Write Your First Paragraph in bold text.


2) Italic Text

If you write anything within <i>…………</i> element, is shown in italic letters.

See this example:

  1. <p> <i>Write Your First Paragraph in italic text.</i></p>   

Test it Now

Output:

Write Your First Paragraph in italic text.


3) HTML Marked formatting

If you want to mark or highlight a text, you should write the content within <mark>………</mark>.

See this example:

  1. <h2>  I want to put a <mark> Mark</mark> on your face</h2>  

Test it Now

Output:

I want to put a Mark on your face


4) Underlined Text

If you write anything within <u>………</u> element, is shown in underlined text.

See this example:

  1. <p> <u>Write Your First Paragraph in underlined text.</u></p>   

Test it Now

Output:

Write Your First Paragraph in underlined text.


5) Strike Text

Anything written within <strike>…………………..</strike> element is displayed with strikethrough. It is a thin line which cross the statement.

See this example:

  1. <p> <strike>Write Your First Paragraph with strikethrough</strike>.</p>   

Test it Now

Output:

Write Your First Paragraph with strikethrough.


6) Monospaced Font

If you want that each letter has the same width then you should write the content within <tt>………….</tt> element.

Note: We know that most of the fonts are known as variable-width fonts because different letters have different width. (for example: ‘w’ is wider than ‘i’). Monospaced Font provides similar space among every letter.

See this example:

  1. <p>Hello <tt>Write Your First Paragraph in monospaced font.</tt></p>   

Test it Now

Output:

Hello Write Your First Paragraph in monospaced font.


7) Superscript Text

If you put the content within <sup>…………..</sup> element, is shown in superscript ; means it is displayed half a character’s height above the other characters.

See this example:

  1. <p>Hello <sup>Write Your First Paragraph in superscript.</sup></p>    

Test it Now

Output:

Hello Write Your First Paragraph in superscript.


8) Subscript Text

If you put the content within <sub>…………..</sub> element, is shown in subscript ; means it is displayed half a character’s height below the other characters.

See this example:

  1. <p>Hello <sub>Write Your First Paragraph in subscript.</sub></p>  

Test it Now

Output:

Hello Write Your First Paragraph in subscript.


9) Deleted Text

Anything that puts within <del>……….</del> is displayed as deleted text.

See this example:

  1. <p>Hello <del>Delete your first paragraph.</del></p>   

Test it Now

Output:

Hello Delete your first paragraph.


10) Inserted Text

Anything that puts within <ins>……….</ins> is displayed as inserted text.

See this example:

  1. <p> <del>Delete your first paragraph.</del><ins>Write another paragraph.</ins></p>   

Test it Now

Output:

Delete your first paragraph.Write another paragraph.


11) Larger Text

If you want to put your font size larger than the rest of the text then put the content within <big>………</big>. It increase one font size larger than the previous one.

See this example:

  1. <p>Hello <big>Write the paragraph in larger font.</big></p>   

Test it Now

Output:

Hello Write the paragraph in larger font.


12) Smaller Text

If you want to put your font size smaller than the rest of the text then put the content within <small>………</small>tag. It reduces one font size than the previous one.

See this example:

  1. <p>Hello <small>Write the paragraph in smaller font.</small></p>   

Test it Now

Output:

Hello Write the paragraph in smaller font.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s