Text Formatting Tags in HTML

आप HTML tutorial के Text Formatting Tags in HTML topic में सीखेंगे की HTML tag का use करके web page पर text को किस तरह format किया जाता हैं |

Formatting Text in HTML

HTML बहुत से ऐसे tags provide करता हैं जिनका use web pages पर normal text को diffrent दिखाने के लिए कर सकते हैं | for example आप text को bold करने के लिए <b> tag , text को italic करने के लिए <i> tag , text को highlight करने के लिए <mark> tag , etc. का use कर सकते है | इसके अलावा बहुत से text formatting tags हैं जिनका आप अपने requirment के according use कर सकते है |

निचे के उदहारण में most commonly use किये जाने वाले formatting tags को दर्शाया है |

Example

<p>This is <b>bold text example</b>.</p>
<p>This is <strong>strong text example</strong>.</p>
<p>This is <i>italic text example</i>.</p>
<p>This is <em>emphasized text example</em>.</p>
<p>This is <mark>highlighted text example</mark>.</p>
<p>This is <code>code text example</code>.</p>
<p>This is <small>smaller text example</small>.</p>
<p>This is <sub>subscript text</sub> and <sup>superscript text</sup>.</p>
<p>This is <del>deleted text example</del>.</p>
<p>This is <ins>inserted text example</ins>.</p>

Output

This is bold text example.

This is strong text example.

This is italic text example.

This is emphasized text example.

This is highlighted text example.

This is code text example.

This is smaller text example.

This is _{subscript text} and ^{superscript text}.

This is deleted text example.

This is inserted text example.

By default से <strong> tag में लिखे गए text को web browser <b> tag में लिखे गए text की तरह output में show करता है, जबकि <em> tag में लिखे गए text को browser <i> tag में लिखे गए text की तरह output में show करता है | हालाँकि, इन tags के अर्थ में अंतर है।

Difference between <b> and <strong> tag

<b> और <strong> दोनों tags में लिखे गए text का output bold typeface की तरही show होगा , लेकिन <strong> tag content का अत्यधिक महत्व को indicates करता है, जबकि <b> tag का उपयोग content के महत्व की बजाय सिर्फ पाठक का ध्यान आकर्षित करने के लिए किया जाता है।

Example

<strong>Warning!</strong> There is danger ahead, please proceed with caution.
Tomorrow our office will be <b>closed</b> due to <b>kite festival</b>.

Output

Warning! There is danger ahead, please proceed with caution.

Tomorrow our office will be closed due to kite festival.

Difference between <i> and <em> tag

Similarly, <em> और <i> tags में लिखे गए text का output bold italic type तरही show होगा , लेकिन <em> tag indicates करता है कि इसमें लिखे गए content ने आसपास के text की तुलना में जोर दिया है | जबकि <i> tag का उपयोग content सिर्फ read करने में normal text से अलग दिखे उसके लिए किया जाता है |

Example

<p>puppies are <em>cute</em> animals.</p>
<p>The Royal Circus <i>ended</i> on Last Night.</p>

Output

Puppies are cute animals.

The Royal Circus ended on Last Night.

Note : <em> और <strong> tags का उपयोग तब करे जब आप के पेज के content में कुछ शब्दों या वाक्यांशों पर अत्यधिक जोर या महत्व देने की जरूरत हो |

Quotation elements in HTML

HTML में quotation elements का use web page में quoted text को insert करने के लिए किया जाता है ताकि यह normal text से अलग text दिखे |

HTML के सबसे अधिक उपयोग किए जाने वाले quotation elements :

<blockquote> element: Blockquotes generelly ऊपर निचे extra space के साथ left and right side margins को display करता है |

Example

<p>
     Tech Samundra provides website design full course free of cost.
</p>
<blockquote>

     Tech Samundra provides website design full course free of cost.
</blockquote>

Output

Tech Samundra provides website design full course free of cost.

Tech Samundra provides website design full course free of cost.

<q> element: short line quotations के लिए आप html में <q> tag का use कर सकते है | most browser quotation mark चिह्नों के अंदर text को display करता है |

Example

<p>
     Tech Samundra is one of the best free computer course tutorial site.
</p>
<q>Here you will learn basic level to advance level computer courses</q>

Tech Samundra is one of the best free computer course tutorial site.

Here you will learn basic level to advance level computer courses

<abbr> element: abbreviation – word, phrase या name का संक्षिप्त रूप है। संक्षिप्त name को दर्शाने के लिए आप <abbr> tag का उपयोग कर सकते हैं। संक्षिप्त name का पूर्ण विस्तार प्रदान करने के लिए इस tag के अंदर title attribute का उपयोग किया जाता है, जब mouse cursor element पर hover होता है तब browser द्वारा tooltip के रूप में display होता है।

आइए एक example के जरिये इसे समझते है |

<p>
     Welcome to <abbr title="Tech Samundra">TS</abbr>
</p>

Output

Welcome to TS

<address> element: <address> element का उपयोग करके, हम एक web page में एक address को define कर सकते हैं | Usually address tag में लिखे गए content के line को separate करने के लिए line break को जोड़ा जाता है और इस tag के अंदर लिखे गए content italic format में display होता है |

Example

<address>
Address : <br />
Rajivnagar, Opp. Gujarat Housing Board, <br />
Kathwada Road, Kathwada <br />
Ahmedabad - 382430.
</address>

Output

Address :
Rajivnagar, Opp. Gujarat Housing Board,
Kathwada Road, Kathwada
Ahmedabad – 382430.

<bdo> element: <bdo> element का use bidirectional override define करने के लिए किया जाता है , जिसका अर्थ है की text को right से left या left से right लिखा गया है | इसका use current text के दिशा को over-ride करने के लिए किया जाता है। text को right से left ओर display करने के लिए “rtl” attribute की आवश्यकता होती है।

Example

<p>
Tech Samundra provides world best computer tutorial with Hindi language.
</p>
<p>
<bdo rtl="rtl">Tech Samundra provides world best computer tutorial with Hindi language.</bdo>
</p>

Output

Tech Samundra provides world best computer tutorial with Hindi language.

Tech Samundra provides world best computer tutorial with Hindi language.

<cite> element: इस element का use, work के title को define करने और text पर जोर देने के लिए किया जाता है |

Example

<p>The <cite>Tech Samundra</cite> is best website for free computer courses.</p>

Output

The Tech Samundra is best website for free computer courses.

Also, Visit our YouTube channel Tech Samundra