← Back to HTML Course | Chapter 4: Semantics & Entities | Lesson 2 of 10

HTML स्टाइल गाइड

सोचिए आप एक ऐसी सड़क पर गाड़ी चला रहे हैं जहां बिल्कुल भी lane lines, speed limits, या सड़क के किस तरफ चलना है इसके rules नहीं हैं। यह पूरी तरह अफरा-तफरी होगी। HTML style guide code लिखने के लिए वही जरूरी rulebook है। HTML बहुत forgiving है—अगर आप typos करते हैं या tags भूल जाते हैं, तो भी browser आपका page display करने की पूरी कोशिश करता है। लेकिन sloppy code को पढ़ना और maintain करना मुश्किल होता है। एक साफ style guide का पालन करने से आपका code consistent, accessible बना रहता है, और दूसरे developers के लिए पढ़ना व debug करना आसान हो जाता है।

In this page:

  1. lowercase का महत्व
  2. Attribute Quotes को Standardize करना
  3. Consistent Indentation और Nesting
  4. Self-Closing Elements को Close करना
  5. Files और Folders का Naming

lowercase का महत्व

हालांकि HTML case-insensitive है, tags और attributes को lowercase में लिखना industry standard है। इसे W3C द्वारा recommend किया जाता है और XHTML जैसे strict formats में यह जरूरी भी है।

Note: consistency के लिए हमेशा अपने सभी tag names और attribute keys lowercase में लिखें।
Warning: Uppercase tags का उपयोग जैसे अस्त-व्यस्त दिखता है और XML-based platforms में parsing errors का कारण बन सकता है।

उदाहरण: The Importance of lowercase

markup 
<p>Correct: lowercase tag names</p>
<P>Incorrect: uppercase tag names</P>

Attribute Quotes को Standardize करना

HTML आपको attribute values के चारों ओर quotes छोड़ने की अनुमति देता है, अगर उनमें spaces न हों। हालांकि, quotes छोड़ना एक बुरी आदत है जो values में spaces या special characters होने पर layout-breaking errors पैदा कर सकती है।

Note: हमेशा सभी attribute values को standard double quotes के अंदर रखना एक strict आदत बना लें।
Warning: spaces वाले values पर quotes छोड़ देना browsers को आपके attributes गलत पढ़ने पर मजबूर कर देगा, जिससे bugs आ सकते हैं।

उदाहरण: Standardizing Attribute Quotes

markup 
<!-- Correct: quotes protect values with spaces -->
<img src="my photo.jpg" alt="My photo">
<!-- Bad: omitting quotes breaks multi-word values -->
<img src=my photo.jpg alt=My photo>

Consistent Indentation और Nesting

Indentation इस बात पर असर नहीं डालता कि browser आपके page को कैसे render करता है, लेकिन readability के लिए यह बेहद जरूरी है। nested child elements को 2 या 4 spaces से indent करने से आपका page structure एक नज़र में पढ़ना आसान हो जाता है।

Note: अपनी indentation को जल्दी align और साफ करने के लिए अपने code editor के auto-format shortcut का इस्तेमाल करें।
Warning: अपने HTML tags को गलत nesting order में overlap करना आपके browsers में layout bugs पैदा करेगा।

उदाहरण: Consistent Indentation and Nesting

markup 
<div>
  <p>Indented by 2 spaces</p>
</div>

Self-Closing Elements को Close करना

आधुनिक HTML5 में, self-closing elements (जैसे img या br) में trailing slash जोड़ना optional है। हालांकि, एक style चुनकर पूरे प्रोजेक्ट में उसे लगातार इस्तेमाल करना साफ कोड के लिए जरूरी है।

Note: अपने markup को साफ और हल्का रखने के लिए modern HTML5 projects में trailing slash छोड़ दें।
Warning: एक ही page पर दोनों styles को मिलाना गंदा दिखता है; अपने self-closing tags को consistent रखें।

उदाहरण: Closing Self-Closing Elements

markup 
<br>
<br />

Files और Folders का Naming

Web servers case-sensitive होते हैं। अपनी site publish करते समय टूटे हुए links से बचने के लिए, आपको अपनी files और folders को हमेशा lowercase में नाम देना चाहिए, और शब्दों को अलग करने के लिए spaces की जगह hyphens इस्तेमाल करना चाहिए।

Note: अपने प्रोजेक्ट की मुख्य entry page को lowercase में index.html नाम से save करें।
Warning: अपने filenames में spaces का उपयोग करने से browsers उन्हें %20 के रूप में encode करने पर मजबूर होंगे, जिससे बदसूरत, अपठनीय URL paths बनते हैं।

उदाहरण: Naming Files and Folders

markup 
<link rel="stylesheet" href="css/main-styles.css">
Live Example
Related Topics

HTML सेमांटिक्स · HTML एंटिटीज़ · HTML प्रतीक · HTML इमोजी

{# 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. #}
आम गलतियां
  1. अपने HTML tag names के अंदर uppercase और lowercase letters मिलाना।
  2. spaces वाले attribute values पर double quotes छोड़ देना।
  3. अपने HTML files और asset folders का नाम रखते समय spaces के बजाय hyphens इस्तेमाल करना।
चैप्टर सारांश
  • professional consistency के लिए सभी HTML tag और attribute names lowercase में लिखें।
  • attribute values को हमेशा double quotes में wrap करें, भले ही वे single words हों।
  • अपने project को organized रखने के लिए साफ indentation और consistent naming patterns (file names के लिए hyphens) इस्तेमाल करें।
ब्राउज़र सपोर्ट

खराब formatted HTML के साथ browsers बहुत forgiving होते हैं, लेकिन अपने code को readable और maintain करने में आसान रखने के लिए style guide follow करना ज़रूरी है।

🔒

Chapter Quiz — Complete all 10 topics to unlock

0/10 topics done

Complete these topics first:

← Previous Lesson HTML Semantics Next Lesson → HTML Entities

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.