एचटीएमएल(5) स्टाइल गाइड और कोड कंवेंशन

HTML कोड कानून

वेब डेवलपर्स अकसर HTML में इस्तेमाल किए जाने वाले कोड के शैली और ग्रामार के बारे में अनिश्चित होते हैं

2000 से 2010 के बीच, कई वेब डेवलपर्स HTML से XHTML में बदल गए

XHTML के माध्यम से, डेवलपर्स को बहुत से 'फॉर्मेट्ड' कोड लिखना पड़ता था

HTML5 कोड वेरिफिकेशन में कुछ अधिक आसान होगा

HTML5 के माध्यम से, आपको अपने खुद काश्रेष्ठ प्रथा, शैली निर्देशक और कोड कानून。

बुद्धिमान और भविष्य की गारंटी

शैली का तर्कसंगत उपयोग, दूसरों को आपके HTML को समझने और इस्तेमाल करने में आसानी प्रदान करता है

भविष्य में, XML रीडर जैसे कार्यक्रम, आपके HTML को पढ़ने की जरूरत हो सकती है

अच्छे फॉर्मेटिंग के साथ 'अनुरूप XHTML' ग्रामार का उपयोग करके बुद्धिमानी से इस्तेमाल करें

टिप्पणी：अपने साइट को हमेशा बुद्धिमान, ठीक, स्वच्छ और फॉर्मेट किया रखें

सही दस्तावेज़ क़िस्म का उपयोग करें

दस्तावेज़ के पहले पर निश्चित रूप से दस्तावेज़ क़िस्म का घोषणा करें:

<!DOCTYPE html>

यदि आप लगातार क्षूट टैग का उपयोग करते हैं, तो आप इसे इस तरह इस्तेमाल कर सकते हैं:

<!doctype html>

क्षूट एलीमेंट नाम का उपयोग करें

HTML5 एलीमेंट नाम में मिश्रित आकार के अक्षरों का उपयोग करने की अनुमति देता है。

हम क्षूट एलीमेंट नाम का उपयोग करने की सिफारिश करते हैं:

  • क्षूट और बड़े आकार के नामों का मिश्रण अच्छा नहीं है
  • डेवलपर्स आमतौर पर क्षूट नामों का उपयोग करते हैं (जैसे XHTML में)
  • क्षूट और स्वच्छ है
  • क्षूट है लिखना आसान

अच्छा नहीं है:

<SECTION> 
  <p>यह एक पैराग्राफ है।</p>
</SECTION>

बुरा है:

<Section> 
  <p>यह एक पैराग्राफ है।</p>
</SECTION>

ठीक है:

<section> 
  <p>यह एक पैराग्राफ है।</p>
</section>

सभी HTML एलीमेंट को बंद करें

HTML5 में, आपको सभी एलीमेंट (जैसे <p> एलीमेंट) को बंद करने की आवश्यकता नहीं है。

हम सभी HTML एलीमेंट को बंद करने की सिफारिश करते हैं:

इस तरह बहुत बुरा लगता है:

<section>
  <p>This is a paragraph.
  <p>This is a paragraph.
</section>

इस तरह बहुत अच्छा लगता है:

<section>
  <p>यह एक पैराग्राफ है।</p>
  <p>यह एक पैराग्राफ है।</p>
</section>

खाली HTML एलीमेंट को बंद करना

HTML5 में, खाली एलीमेंट को बंद करना वैकल्पिक है।

ऐसा भी अनुमति है:

<meta charset="utf-8">

ऐसा भी अनुमति है:

<meta charset="utf-8" />

बार्ड (\/) XHTML और XML में आवश्यक है।

यदि आप आपके पृष्ठ को XML सॉफ्टवेयर द्वारा आग्रह करते हैं, तो इस आदत को बनाए रखना एक अच्छा विचार है।

छोटे गुणवली नाम का उपयोग करें

HTML5 बड़े-छोटे गुणवली नाम के संयोजी उपयोग की अनुमति देता है。

हमें छोटे गुणवली नाम का उपयोग करने की सिफारिश करते हैं:

  • संयोजी गुणवली नाम बहुत बुरा नहीं है
  • डेवलपर छोटे गुणवली नाम का उपयोग करने के लिए आदी है (उदाहरण में XHTML में)
  • कम से कम गुणवली नाम ज्यादा शुद्ध लगता है
  • कम से कम गुणवली नाम लिखना आसान है

इस तरह बहुत बुरा लगता है:

<div CLASS="menu">

इस तरह बहुत अच्छा लगता है:

<div class="menu">

गुणवली को उद्धरण में रखना

HTML5 उद्धरण में नहीं होने वाले गुणवली की अनुमति देता है。

हमें गुणवली को उद्धरण में रखने की सिफारिश करते हैं:

  • गुणवली में गुणवली के साथ गुणवली को उद्धरण में रखना आवश्यक है
  • संयोजी शैली बहुत बुरी नहीं है
  • उद्धरण में वाले गुणवली ज्यादा पठनीय है

यह गुणवली अवैध है, क्योंकि गुणवली में स्पेस है:

<table class=table striped>

ऐसा करना वैध है:

<table class="table striped">

आवश्यक गुण

हमेशा छवि का उपयोग करें alt गुण

<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

हमेशा छवि आकार को परिभाषित करें। ऐसा करने से चमकीलापन कम होता है, क्योंकि ब्राउज़र छवि लोड होने से पहले छवि के लिए स्थान आवंटित करता है।

<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

स्पेस और समानता

समानता के दोनों तरफ के स्पेस वैध हैं:

<link rel = "stylesheet" href = "styles.css">

लेकिन ज्यादा कम स्पेस रखने से ज्यादा पठनीय है, बुद्धि रही है कि खाली स्पेस ज्यादा पठनीय है, और एंटिटीज को ज्यादा बेस्ट जोड़ती है:

<link rel="stylesheet" href="styles.css">

लंबी कोड पंक्तियों से बचें

HTML संपादक का उपयोग करते समय, HTML कोड को पढ़ने के लिए दायं-बायं गति करना काफी असुविधाजनक होता है।

कृपया जल्दी से 80 अक्षर से अधिक की कोड पंक्तियाँ न उपयोग करें।

खाली पंक्ति और इनकरण

बिना कारण के खाली पंक्तियाँ बढ़ाने का नया कारण न देखें।

पठनीयता बढ़ाने के लिए, बड़े या तर्कसंगत कोड ब्लॉकों को पृथक करने के लिए खाली पंक्तियाँ बढ़ाएं।

पठनीयता बढ़ाने के लिए, दो स्पेस का इनकरण बढ़ाएं। टैब का उपयोग न करें।

कृपया अनावश्यक खाली पंक्तियाँ और इनकरण न उपयोग करें। छोटे और संबंधित प्रविष्टियों के बीच खाली पंक्ति न उपयोग करें, और प्रत्येक एलीमेंट के लिए इनकरण न देखें:

लाजिमी नहीं:

<body>
  <h1>मशहूर शहर</h1>
  <h2>टोक्यो</h2>
  <p>
    टोक्यो जापान की राजधानी है, बड़े टोक्यो क्षेत्र का केंद्र है,
    और दुनिया में सबसे अधिक जनसंख्या वाला महानगर क्षेत्र है。
    यह जापानी सरकार और इम्पीरियल पैलेस का स्थान है,
    और जापानी साम्राज्य परिवार का घर。
  </p>
</body>

बेहतर:

<body>
<h1>मशहूर शहर</h1>
<h2>टोक्यो</h2>
<p>
टोक्यो जापान की राजधानी है, बड़े टोक्यो क्षेत्र का केंद्र है,
और दुनिया में सबसे अधिक जनसंख्या वाला महानगर क्षेत्र है。
यह जापानी सरकार और इम्पीरियल पैलेस का स्थान है,
और जापानी साम्राज्य परिवार का घर。
</p>
</body>

तालिका उदाहरण:

<table>
  <tr>
    <th>नाम</th>
    <th>वर्णन</th>
  <tr>
  <tr>
    <td>A</td>
    <td>A के वर्णन</td>
  <tr>
  <tr>
    <td>B</td>
    <td>B के वर्णन</td>
  <tr>
</table>

सूची उदाहरण:

<ol>
  <li>लंदनA</li>
  <li>पेरिस</li>
  <li>टोक्यो</li>
</ol>

क्या <html> और <body> को संपते होना चाहिए?

HTML5 मानक में, <html> और <body> टैग को संपते जा सकता है。

नीचे दिए गए कोड को HTML5 के रूप में प्रमाणित करें:

उदाहरण

<!DOCTYPE html>
<head>
  <title>पृष्ठ शीर्षक</title>
</head>
<h1>यह एक शीर्षक है</h1>
<p>यह एक पैराग्राफ है।</p>

स्वयं को प्रयोग करें

हम <html> और <body> टैग को संपते करने का सुझाव नहीं देते हैं。

<html> एलीमेंट टेक्स्ट का मूल एलीमेंट है। यह पृष्ठ भाषा को निर्धारित करने के लिए आदर्श स्थान है。

<!DOCTYPE html>
<html lang="en-US">

सही उपयोगी अनुप्रयोग (स्क्रीन रीडर) और सर्च इंजन के लिए, घोषित भाषा महत्वपूर्ण है。

<html> या <body> को संपते करने से DOM और XML सॉफ्टवेयर को ढह सकता है。

<body> को संपते करने से पुराने ब्राउज़र (IE9) में त्रुटियाँ पैदा हो सकती हैं。

क्या <head> को संपते होना चाहिए?

HTML5 मानक में, <head> टैग को भी संपते जा सकता है。

मूलभूत रूप से, ब्राउज़र <body> से पहले के सभी एलीमेंटों को मूलभूत <head> एलीमेंट में जोड़ देगा。

यदि आप <head> टैग को संपते, तो आप HTML की संज्ञा कम कर सकते हैं:

उदाहरण

<!DOCTYPE html>
<html>
<title>पृष्ठ शीर्षक</title>
<body>
  <h1>यह एक शीर्षक है</h1>
  <p>यह एक पैराग्राफ है।</p>
</body>
</html>

स्वयं को प्रयोग करें

टिप्पणी：वेब डेवलपरों के लिए टैग को छोड़ने की पद्धति अजीब है। नियम बनाने में समय लगता है。

मेटाडाटा

<title> एलीमेंट एचटीएमएल5 में अनिवार्य हैं। जितना संभव हो, अर्थपूर्ण शीर्षक बनाएं。

<title>HTML5 Syntax and Coding Style</title>

सही व्याख्या सुनिश्चित करने और सही सर्च इंडेक्सिंग के लिए, दस्तावेज़ में भाषा और चारकोड़ एन्कोडिंग के परिभाषण को जल्दी से जल्दी दिया जाना चाहिए:

<!DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>HTML5 Syntax and Coding Style</title>
</head>

एचटीएमएल कमेंट

छोटी टिप्पणी एक ही पंक्ति में लिखी जानी चाहिए, और <!-- के बाद एक स्पेस और --> के बाद एक स्पेस जोड़ें:

<!-- This is a comment -->

अधिक लंबी टिप्पणी अधिक पंक्तियों में होनी चाहिए, और उन्हें <!-- और --> के साथ स्वतंत्र पंक्तियों में लिखा जाना चाहिए:

<!-- 
  This is a long comment example. This is a long comment example. This is a long comment example.
  This is a long comment example. This is a long comment example. This is a long comment example.
-->

अधिक लंबी टिप्पणी देखने के लिए आसान है, अगर वे दो स्पेस के इंडेंट के साथ दिए गए हैं तो。

स्टाइलशीट

स्टाइलशीट को लिंक करने के लिए सरल व्याकरण का उपयोग करें (type एट्रिब्यूट अनिवार्य नहीं है):

<link rel="stylesheet" href="styles.css">

छोटी नियम को एक ही पंक्ति में संकुचित करें, जैसे यहाँ दिया गया है:

p.into {font-family:"Verdana"; font-size:16em;}

अधिक लंबी नियम को कई पंक्तियों में विभाजित करें:

body {
  background-color: lightgrey;
  font-family: "Arial Black", Helvetica, sans-serif;
  font-size: 16em;
  color: black;
}
  • खुलने वाले बारह्को और चयनकर्ता को एक ही पंक्ति में रखें
  • खुलने वाले बारह्को के पहले एक स्पेस जोड़ें
  • दो अक्षर के छोटे इंडेंट का उपयोग करें
  • प्रत्येक अट्रिब्यूट और इसके वैल्यू के बीच एक स्पेस और डबल कोट का उपयोग करें
  • प्रत्येक कमा या सेमीकोलन के बाद स्पेस जोड़ें
  • प्रत्येक अट्रिब्यूट-वैल्यू पारी (अंतिम तक) के बाद सेमीकोलन जोड़ें
  • सिर्फ जब वैल्यू में स्पेस हो तभी वैल्यू को चिपकाने के लिए अलग-अलग चिपकाने का उपयोग करें
  • बंद बारह्को को नई पंक्ति में रखें और उससे पहले स्पेस नहीं जोड़ें
  • प्रत्येक पंक्ति में 80 अक्षर से अधिक नहीं होना चाहिए

टिप्पणी：कमा या सेमीकोलन के बाद स्पेस जोड़ना, सभी लिखने के तरीकों का सामान्य नियम है。

एचटीएमएल में जावास्क्रिप्ट लोड करें

बाहरी स्क्रिप्ट को लोड करने के लिए सरल व्याकरण का इस्तेमाल करें (टाइप अटेबल अनिवार्य नहीं है):

<script src="myscript.js">

एचटीएमएल एलिमेंट तक जेसक्रिप्ट से पहुँच

असाफ़ीदार एचटीएमएल शैली का प्रभाव यह हो सकता है कि जेसक्रिप्ट गलतियां हों

इन दोनों जेसक्रिप्ट वाक्यांशों को भिन्न परिणाम दिखाएंगे:

var obj = getElementById("Demo")
var obj = getElementById("demo")

स्वयं को प्रयोग करें

यदि संभव हो तो HTML में (जेसक्रिप्ट के साथ) उसी नामकरण संधि का इस्तेमाल करें。

जेसक्रिप्ट स्टाइल गाइडलाइन को देखें

छोटे फ़ाइल नाम का इस्तेमाल करें

अधिकांश वेब सर्वर (Apache, Unix) फ़ाइल नाम के आकार के संवेदनशील हैं:

london.jpg के रूप में London.jpg को अद्यतन करना संभव नहीं है。

अन्य वेब सर्वर (माइक्रोसॉफ्ट, IIS) आकार असंवेदनशील हैं:

london.jpg या London.jpg के रूप में london.jpg को अद्यतन करना संभव है。

यदि आप मिश्रित आकार का इस्तेमाल करते हैं, तो आपको उच्च स्तर की समानता बनाए रखनी होगी。

यदि आप एक नज़रअंदाज़ से आकार के से सेवाओं से सेवाओं के बीच जाते हैं तो इन छोटी गलतियां आपके वेबसाइट को नुकसान पहुँचा सकती हैं。

इन समस्याओं को टालने के लिए हमेशा छोटे फ़ाइल नाम का इस्तेमाल करें (यदि संभव हो)。

फ़ाइल एक्सटेंशन

HTML फ़ाइल नाम को एक्सटेंशन इस्तेमाल करना चाहिए .htmlइसके बजाय .htm）。

CSS फ़ाइलों को एक्सटेंशन इस्तेमाल करना चाहिए .css。

JavaScript फ़ाइलों को एक्सटेंशन इस्तेमाल करना चाहिए .js。