← Back to HTML Course | Chapter 1: Introduction & Basics | Lesson 9 of 11

HTML Formatting

जब आप एक essay लिखते हैं, तो आप key formulas और quote sentences को चिन्हित करने के लिए highlighters, bold pens, और italics का उपयोग करते हैं। आप ऐसा इसलिए करते हैं ताकि महत्वपूर्ण concepts तुरंत आपकी नजर में आ जाएं। HTML formatting tags बिल्कुल उसी stationery set की तरह काम करते हैं। वे आपको शब्दों को modify करके उन्हें उभारने देते हैं। ये formatting options आपके text को visually engaging बनाते हैं और search engines व screen readers को बताते हैं कि कौन से शब्द extra महत्व रखते हैं।
Syntax
markup
<b>Bold text</b>
<i>Italic text</i>
<mark>Highlighted text</mark>
<sub>Subscript</sub> <sup>Superscript</sup>

Bold बनाम Strong Text

b tag text को styling purposes के लिए physically bold बनाता है। strong tag भी text को bold करता है, लेकिन इसमें गहरा semantic अर्थ होता है। यह search engines और screen-reader software को संकेत देता है कि अंदर का text critical importance रखता है।

Note: जिन शब्दों पर ज़ोर देना ज़रूरी है उनके लिए strong का उपयोग करें, और सिर्फ cosmetic bolding के लिए b को बचाकर रखें।
Warning: पूरे paragraphs को strong tags में wrap न करें क्योंकि इससे text का structural importance कमजोर हो जाता है।

उदाहरण: Bold vs. Strong Text

markup
<p><b>Bold for style</b> and <strong>strong for importance</strong>.</p>

Italics बनाम Emphasized Text

bolding की तरह ही, slanted text के लिए एक visual और structural pair होता है। i tag सिर्फ styling के लिए text को slant करता है, जबकि em tag verbal emphasis जोड़ता है। एक screen reader em text को थोड़ी अधिक voice stress के साथ पढ़ेगा।

Note: किसी sentence का अर्थ बदलने वाले specific शब्दों पर ज़ोर देने के लिए em tag का उपयोग करें।
Warning: सुनिश्चित करें कि italicized text compact smartphone displays पर readable बना रहे।

उदाहरण: Italics vs. Emphasized Text

markup
<p><i>Italic for style</i> and <em>emphasized for meaning</em>.</p>

Text को Mark और Highlight करना

mark tag text को default रूप से चमकीले पीले background के साथ highlight करता है, जो बिल्कुल किसी physical marker highlight जैसा दिखता है। यह आपके pages पर matching search results को इंगित करने के लिए बेहद उपयोगी है।

Note: mark element किसी search results interface में matching keywords को highlight करने के लिए एकदम सही है।
Warning: सुनिश्चित करें कि bright background color colorblind users के लिए text को readable रखे।

उदाहरण: Marking and Highlighting Text

markup
<p>Search results for <mark>HTML</mark> tutorials.</p>

Subscript और Superscript

Subscript (sub) text को थोड़ा नीचे धकेलता है और उसे छोटा बनाता है, जबकि Superscript (sup) text को ऊपर धकेलता है। ये dates, mathematical squares, और chemical equations को format करने के लिए ज़रूरी elements हैं।

Note: 10th में th जैसे ordinal indicators या mathematical powers के लिए superscript का उपयोग करें।
Warning: compact paragraphs के अंदर sub और sup को nest करते समय सावधान रहें क्योंकि ये line height spacing को बिगाड़ सकते हैं।

उदाहरण: Subscript and Superscript

markup
<p>H<sub>2</sub>O and 10<sup>th</sup> place.</p>

Inserted और Deleted Elements

del tag दर्शाता है कि document से text हटाया गया है, जो आमतौर पर एक strike-through line के साथ render होता है। ins tag नए जोड़े गए content को दर्शाता है, जो default रूप से underline के साथ display होता है।

Note:
  • बेहद professional changelogs और document revision histories बनाने के लिए del और ins को साथ में उपयोग करें।
  • Accepted attributes:
  • cite — बदलाव समझाने वाला URL
  • datetime — बदलाव की valid date/time string, जैसे 2026-01-15 या 2026-01-15T10:30
  • यह ins और del दोनों पर लागू होता है
Warning: underlined ins tag को standard hyperlink के साथ confuse न करें, क्योंकि इससे आपके visitors confuse हो सकते हैं।

उदाहरण: Inserted and Deleted Elements

markup
<p><del>Old price: $50</del> <ins>New price: $40</ins></p>

small Element

small element side comments और छोटे प्रिंट को दर्शाता है, जैसे copyright notices, legal disclaimers, या licensing terms, और ब्राउज़र default रूप से इसे visually छोटे font में render करते हैं। इसमें सिर्फ visual styling से परे semantic अर्थ भी होता है।

Note: small का उपयोग सच में secondary जानकारी के लिए करें जैसे fine print, न कि जब भी आपको छोटा दिखने वाला text चाहिए — उसके लिए CSS font-size है।
Warning: small का उसके intended semantic purpose की जगह सिर्फ visual styling के लिए overuse करने से assistive technology के लिए इसका meaning confuse हो जाता है।

उदाहरण: The small Element

markup
<p>Product details here.</p>
<small>&copy; 2024 Example Company. All rights reserved.</small>
Live Example
Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
🔒

Chapter Quiz — Complete all 11 topics to unlock

0/11 topics done

Complete these topics first:

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.