HTML Style Guide

HTML Style Guide का मतलब है — HTML को लिखने के नियम और Best Practices, ताकि आपका कोड:

पढ़ने में आसान हो
Maintain करना आसान हो
Error-free और SEO-friendly हो
Team में इस्तेमाल करने लायक हो

क्यों जरूरी है HTML Style Guide अपनाना?

आपके कोड में Consistency आती है।
दूसरों को आपका कोड समझने में आसानी होती है।
Debugging आसान हो जाता है।
Search engines और browsers को कोड समझने में दिक्कत नहीं होती।

HTML Structure हमेशा सही रखें

हर HTML document की शुरुआत DOCTYPE से करें

<!DOCTYPE html>
<html lang="hi">
<head>
  <meta charset="UTF-8">
  <title>My Page</title>
</head>
<body>
  <h1>Welcome</h1>
</body>
</html>

यह browser को बताता है कि यह HTML5 document है।

Tag और Attribute हमेशा Lowercase में लिखें

HTML case-insensitive है, पर standard यही है कि tag और attributes lowercase में हों।

❌ गलत:

<DIV CLASS="container">

सही:

<div class="container">

हमेशा Attribute Values को Quotes ("") में रखें

❌ गलत:

<input type=text name=user>

✅ सही:

<input type="text" name="user">

Single quotes भी इस्तेमाल कर सकते हैं, पर पूरे प्रोजेक्ट में consistency रखिए।

Indentation (Spacing) हमेशा Maintain करें

कोड को पढ़ने योग्य रखने के लिए हर nested element को 2 या 4 spaces से indented करें। Example:

<div class="article">
  <h2>Title</h2>
  <p>This is a paragraph.</p>
  <ul>
    <li>Point 1</li>
    <li>Point 2</li>
  </ul>
</div>

इससे कोड structure साफ दिखाई देता है।

HTML Comments सही जगह लगाएँ

Comments से कोड को समझना आसान होता है।

<!-- Header Section -->
<header>
  <h1>My Website</h1>
</header>

Comments browser में नहीं दिखते, सिर्फ developers के लिए होते हैं।

File Naming Rules (फ़ाइल नाम नियम)

हमेशा lowercase letters और hyphen (-) का उपयोग करें।
❌ गलत: - MyPage.html, HTML_Tutorial.html
✅ सही: - my-page.html, html-tutorial.html
Hyphen SEO के लिए भी बेहतर होता है।

Code को Line by Line साफ रखें

एक लाइन में बहुत सारा HTML मत भरिए।

❌ गलत:

<p><a href="#">Click</a><strong>Here</strong></p>

✅ सही:

<p>
  <a href="#">Click</a>
  <strong>Here</strong>
</p>

HTML Meta Tags हमेशा जोड़ें

हर पेज में कुछ basic meta tags जरूर रखें

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Learn HTML easily with Hindi tutorials.">
<meta name="author" content="CodeKeet">

इससे आपका page SEO और mobile-friendly बनता है।

Inline CSS और JS कम से कम रखें

❌ गलत:

<p style="color: red;">Hello</p>

✅ सही:

<p class="red-text">Hello</p>

.red-text { color: red; }

इससे कोड maintain करना आसान होता है।

Empty Tags को Self-Closing रखें (Optional)

HTML5 में self-closing जरूरी नहीं, पर readability के लिए अच्छा है।

<img src="logo.png" alt="Logo">
<br>
<hr>

Image के लिए हमेशा alt Attribute लगाएँ

SEO और accessibility दोनों के लिए बहुत जरूरी। Example:

<img src="sunset.jpg" alt="Beautiful sunset view">

Logical Structure Follow करें

पेज structure हमेशा इस तरह रखें

<header>हेडर</header>
<nav>नेविगेशन</nav>
<main>
  <article>मुख्य कंटेंट</article>
  <aside>साइडबार</aside>
</main>
<footer>फुटर</footer>

यह HTML5 का Standard Semantic Layout है।

Accessibility Friendly HTML लिखें

हमेशा alt, title, aria-label और lang attribute का सही उपयोग करें।

<html lang="hi">
<a href="#" title="Go to Home Page">Home</a>

Whitespace और Blank Lines का सही इस्तेमाल करें

Code के sections के बीच एक खाली लाइन छोड़ें। यह readability को बढ़ाता है।

Attribute Order हमेशा Consistent रखें

Recommended order: id → class → name → src/href → type → value → alt → title Example:

<img id="hero" class="banner" src="hero.jpg" alt="Main banner">

Boolean Attributes को Short रखें

Example:

<input type="checkbox" checked>
<input type="text" disabled>

Headings (<h1>–<h6>) का सही उपयोग करें

हर पेज पर केवल एक <h1> होना चाहिए। फिर <h2>, <h3> hierarchy में।

<h1>HTML Tutorial</h1>
<h2>HTML Basics</h2>
<h3>HTML Tags</h3>

Code Comments से Sections अलग करें

<!-- ===== HEADER SECTION ===== -->
<header>...</header>

<!-- ===== MAIN CONTENT ===== -->
<main>...</main>

<!-- ===== FOOTER ===== -->
<footer>...</footer>

Example – A Clean HTML Page

<!DOCTYPE html>
<html lang="hi">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Learn HTML Style Guide easily in Hindi.">
  <title>HTML Style Guide Example</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <!-- ===== HEADER ===== -->
  <header>
    <h1>My Website</h1>
  </header>

  <!-- ===== NAVIGATION ===== -->
  <nav>
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </nav>

  <!-- ===== MAIN CONTENT ===== -->
  <main>
    <section>
      <h2>About HTML Style Guide</h2>
      <p>HTML Style Guide से कोड पढ़ने और maintain करने में आसानी होती है।</p>
    </section>
  </main>

  <!-- ===== FOOTER ===== -->
  <footer>
    <p>© 2025 My Website</p>
  </footer>

</body>
</html>

यह है एक “Perfectly Styled” HTML Page जो readable, SEO-friendly और professional है।

Summary

नियम	फायदा
Tags lowercase में रखें	Standard format
Attributes quoted रखें	Error-free
Indentation maintain करें	Clean code
Comments का उपयोग करें	समझने योग्य
Semantic layout अपनाएँ	SEO-friendly
alt, title जैसे attributes दें	Accessibility बेहतर

Practice Task

एक webpage बनाए जिसमें:
Proper indentation और comments हों
Semantic layout (header, nav, main, footer) हो
Meta tags और alt attributes जोड़े गए हों
File name SEO-friendly हो
और पूरा HTML standard style में लिखा गया हो