4. Text Formatting Tags (Semantic Style)

1. Headings (h1 to h6) Document Outline

Basic: <h1> se lekar <h6> tak headings milti hain, jahan h1 sabse bada hota hai.

Pro: Headings sirf text ka font bada karne ke liye nahi hote. Ye Document Outline banate hain. SEO crawlers in tags ko scan karke page ka context samajhte hain. Best Practices:

• Poore page par sirf aur sirf ek <h1> hona chahiye (Main Theme/Title).
• Logical sequence todna nahi chahiye (h2 ke direct baad h4 nahi aana chahiye, h3 zaruri hai).

2. Paragraphs & Line Breaks

Pro: <p> tag browser mein automatically margin-block-start aur end (upar-neeche gap) dalta hai. Wahi <br> (line break) sirf text ko neeche ki line mein shift karta hai. Professional developers do paragraphs ke beech faasla banane ke liye <br> ka use kabhi nahi karte (ye bad practice hai), hamesha CSS margin ka istemal karte hain.

3. Presentational vs Semantic Formatting (The Truth)

Basic: <b> se text bold hota hai, <i> se italic hota hai.

Pro: HTML5 ne Presentational (design wale) tags ko hata kar Semantic (meaning wale) tags par focus kiya hai.

• <strong>: Text ko design mein bold karta hai, par screen reader ko batata hai ki word Bohot Important hai (Emphasis badhata hai).
• <em>: Italic design karta hai, par voice output mein emphasis (strees) deta hai. Visual formatting hamesha CSS pe chhod deni chahiye.

4. Utility Formatting Tags

• <mark>: Search highlight effect ke liye (Default yellow background).
• <del> & <ins>: Semantic strike-through. E-commerce sites par purana price katna aur naya price insert dikhane ka perfect SEO-friendly tareeqa.
• <sub> & <sup>: Subscript (e.g. H₂O) aur Superscript (e.g. x²).

5. Preformatted Text & Code Snippets

Pro: Normal HTML space aur enters (line breaks) ko collapse karke sirf 1 space bana deta hai. Agar aapko multi-line code dikhana hai (jaise python with spaces), toh <pre> tag ka use karna padta hai jo 'pre-formatted' white-spaces ko preserve karta hai. Code dikhane ka standard HTML5 tarika hai: <pre><code> apka code </code></pre>.