🔴 Advanced  ·  Lesson 37

Best Practices and Common Mistakes

Best Practices और Common Mistakes

Why Best Practices Matter

HTML is forgiving — it often "works" even when written badly, which is exactly the trap. Sloppy HTML runs today but breaks mysteriously tomorrow, ranks worse on Google, fails for disabled users, and makes the next developer (often future-you) miserable. Best practices are the habits that separate code that merely works from code that is professional, maintainable and correct. This chapter is a capstone — it gathers the warnings scattered across the whole course into one reference.

The Do List — habits of clean HTML

DoWhy
Use semantic tagsheader/nav/main/article over div soup — SEO + accessibility
One h1 per page, ordered headingsClear outline for Google and screen readers
Always write alt on imagesAccessibility + Google Images
Label every form fieldUsable, accessible forms
Lowercase tags and attributesConvention; required by JSX/XHTML later
Quote attribute valuesPrevents silent breakage on spaces
Indent nested elementsReadable structure; catch unclosed tags
Include charset + viewportCorrect text + mobile-friendly

The Common Mistakes — and their fixes

❌ Forgetting to close tags        → <p>text  (fix: always close </p>)
❌ Wrong nesting                   → <p><div>..</div></p> (block inside p)
❌ Using <br><br><br> for spacing  → use <p> and CSS margins
❌ Inline styles everywhere        → style="..." everywhere; use CSS classes
❌ Missing alt / alt="image"       → describe the image meaningfully
❌ <div> as a button              → use real <button> (keyboard + a11y)
❌ Deprecated tags                 → <font> <center> <marquee> are dead
❌ Skipping heading levels         → h1 → h4 breaks the outline
❌ Spaces/caps in filenames        → about us.HTML → about-us.html
❌ Secrets in comments             → passwords visible in View Source
The single biggest one: using <div> for everything ("divitis"). Before typing a div, ask: is there a semantic tag for this? Header? Nav? Button? Article? Nine times out of ten there is, and using it fixes SEO, accessibility and readability at once. Div is the fallback, never the default.

Validate Your HTML — the free quality check

Go to:  validator.w3.org
Paste your URL or code → it lists every error and warning.
The W3C Validator is a free tool that reads your HTML and flags unclosed tags, wrong nesting, missing attributes and invalid code — the machine equivalent of a strict teacher checking your homework. Professionals validate before shipping. A page that validates cleanly is far less likely to have the mysterious layout bugs that come from broken structure. Make it a habit: build, validate, fix, ship.

The Master Checklist — your HTML capstone

Before calling any page "done":
✅ <!DOCTYPE html>, charset, viewport, unique title, meta description
✅ One h1, logical heading order
✅ Semantic tags used (header, nav, main, article, footer)
✅ Every image has meaningful alt
✅ Every form field has a label; validation on inputs
✅ All tags closed and correctly nested
✅ Lowercase tags, quoted attributes
✅ No inline styles, no deprecated tags, no divitis
✅ Descriptive links, clean URLs
✅ Passes W3C validation
Tick all of these and you're writing professional-grade HTML — the foundation for everything in CSS and JavaScript ahead.

Best Practices क्यों

Browser बहुत क्षमाशील है — वह टूटा HTML भी किसी तरह दिखा देता है. इसीलिए "यह चल तो रहा है" अच्छे HTML का पैमाना नहीं है. साफ, मानक HTML के तीन ठोस फायदे हैं: SEO (Google structure समझकर बेहतर rank देता है), accessibility (screen readers सही पढ़ते हैं), और maintainability (छह महीने बाद आप या आपकी team उसे समझ पाएंगे). नीचे की आदतें कोई अतिरिक्त मेहनत नहीं मांगतीं — बस शुरू से सही ढंग से लिखना.

करने वाली बातें

  • हमेशा <!DOCTYPE html> से शुरू कीजिए — वरना browser पुराने "quirks mode" में चला जाता है और layout अजीब हो जाता है.
  • <html lang="en"> या lang="hi" लगाइए — search engines और screen readers के लिए.
  • Viewport meta tag ज़रूर रखिए — इसके बिना mobile पर कोई भी responsive CSS काम नहीं करती.
  • Semantic tags use कीजिए — <header>, <nav>, <main>, <article>, <footer>. हर चीज़ के लिए <div> मत बनाइए.
  • Page पर सिर्फ एक <h1>, और headings का क्रम बिना छलांग के.
  • हर image पर alt और हर input पर <label>.
  • Lowercase tag और attribute नाम, और attribute values हमेशा quotes में.
  • ठीक से indent कीजिए — nesting एक नज़र में दिखनी चाहिए.
इनमें से पहले तीन — DOCTYPE, lang, viewport — हर page के <head> में जाने चाहिए, हर बार, बिना सोचे. यही तीन lines अकेले सबसे ज़्यादा "मेरा page mobile पर टूट रहा है" समस्याएं रोकती हैं.

आम गलतियां

<!-- ✗ Layout ke liye table -->
<table><tr><td>Sidebar</td><td>Content</td></tr></table>

<!-- ✗ Purane presentational tags -->
<center><font color="red">Hello</font></center>

<!-- ✗ Har jagah inline style -->
<p style="color:red;font-size:20px">Text</p>

<!-- ✗ Div soup -->
<div class="header"><div class="nav">...</div></div>

<!-- ✗ Galat nesting -->
<p><div>Block ko p ke andar nahi rakh sakte</div></p>
Layout के लिए tables 1990 के दशक का तरीका है — tables सिर्फ असली tabular data (marks sheet, price list) के लिए हैं. <center>, <font>, <big> जैसे presentational tags HTML5 में हटा दिए गए; styling CSS का काम है. Inline styles बिखर जाती हैं और override करना मुश्किल हो जाता है. Div soup मतलब semantic tag मौजूद होते हुए भी div use करना. और गलत nesting (block element को <p> के अंदर) browser चुपचाप "ठीक" कर देता है, अक्सर उस तरीके से जो आपने नहीं चाहा.

अपना HTML Validate कीजिए

W3C Validator (validator.w3.org) आपका HTML जांचकर हर गलती बता देता है — बंद न किए tags, दोहराए ids, गायब alt, गलत nesting. यह मुफ्त है, इसमें आप URL डाल सकते हैं या code paste कर सकते हैं. Browser ये गलतियां चुपचाप छुपा लेता है; validator उन्हें उजागर करता है. अच्छी आदत: कोई भी page live करने से पहले एक बार validate कीजिए. साथ में DevTools का "Inspect" panel देखिए — वहां browser ने आपके HTML को असल में कैसे समझा वह दिखता है, जो गलत nesting पकड़ने का सबसे तेज़ तरीका है.

Master Checklist

  • ☑ <!DOCTYPE html> सबसे ऊपर
  • ☑ <html lang="...">
  • ☑ <meta charset="UTF-8">
  • ☑ <meta name="viewport" content="width=device-width, initial-scale=1.0">
  • ☑ अर्थपूर्ण <title> और <meta name="description">
  • ☑ एक <h1>, क्रमबद्ध headings
  • ☑ Semantic tags, div soup नहीं
  • ☑ हर image पर alt, हर input पर <label>
  • ☑ External CSS और JS files (inline नहीं)
  • ☑ Script </body> से पहले या defer के साथ
  • ☑ W3C validator पर zero errors
यह checklist आपके हर project के लिए है. इसे एक बार आदत बना लीजिए और आपका HTML उस बहुत सारे code से बेहतर होगा जो आज web पर चल रहा है. अच्छा HTML लिखना कठिन नहीं — बस कुछ नियम लगातार लागू करना है.
← Back to HTML Tutorial
🔗

Share this topic with a friend

यह topic किसी दोस्त को भेजें

Found it useful? Send it to a classmate learning the same thing.

अच्छा लगा? जो दोस्त यही सीख रहा है, उसे भेज दीजिए।

💻 Live Code Editor

इस पेज का code यहाँ तैयार है — बदलिए और तुरंत नतीजा देखिए. कुछ install किए बिना.
👁 Live Preview
सब कुछ आपके browser में ही चलता है — कोई server, कोई signup नहीं. JavaScript का console.log देखने के लिए F12 दबाइए.