HTML Style Guide

सुसंगत, स्वच्छ और व्यवस्थित HTML कोड दूसरों के लिए आपके कोड को समझना और समझना आसान बनाता है।

बेहतर HTML कोड बनाने के लिए यहां कुछ दिशानिर्देश और युक्तियां दी गई हैं।

Always Declare Document Type

दस्तावेज़ प्रकार को अपने दस्तावेज़ की पहली पंक्ति के रूप में घोषित करें।

HTML के लिए मान्य दस्तावेज़ प्रकार:

<!DOCTYPE html>

Use Lowercase Element Names

HTML घटक नामों में अपरकेस और लोअरकेस अक्षरों के मिश्रण की अनुमति देता है।

हालाँकि, हम लोअरकेस तत्व नामों का उपयोग करने की सलाह देते हैं क्योंकि:

Mixing uppercase and lowercase names looks bad

अपरकेस और लोअरकेस नामों को मिलाना बुरा लगता है

Developers normally use lowercase names

डेवलपर्स आम तौर पर छोटे अक्षरों वाले नामों का उपयोग करते हैं

Lowercase looks cleaner

लोअरकेस अधिक साफ-सुथरा दिखता है

Lowercase is easier to type

लोअरकेस टाइपिंग आसान है

Good:

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

Bad:

<BODY>
<P>This is a paragraph.</P>
</BODY>

Close All HTML Elements

HTML में, आपको सभी तत्वों (उदाहरण के लिए तत्व) को लपेटने की आवश्यकता नहीं है।

हालाँकि, हम दृढ़तापूर्वक सभी HTML तत्वों को बंद करने की अनुशंसा करते हैं:

Good:

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

Bad:

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

Use Lowercase Attribute Names

HTML विशेषता नामों को अपरकेस और लोअरकेस अक्षरों को मिलाने की अनुमति देता है।

हालाँकि, हम लोअरकेस विशेषता नामों का उपयोग करने की सलाह देते हैं क्योंकि:

Good:

<a href="https://www.jassifteam.com/html/">Visit our HTML tutorial</a>

Bad:

<a HREF="https://www.jassifteam.com/html/">Visit our HTML tutorial</a>

Always Quote Attribute Values

HTML बिना उद्धरण चिह्नों के विशेषता मानों की अनुमति देता है।

हालाँकि, हम विशेषता मान उद्धृत करने की अनुशंसा करते हैं क्योंकि:

डेवलपर्स आमतौर पर विशेषता मान उद्धृत करते हैं
उद्धृत मूल्यों को मापना आसान है
यदि मान में रिक्त स्थान हैं तो आपको उद्धरण चिह्नों का उपयोग करना चाहिए

Good:

<table class="striped">

Bad:

<table class=striped>

Very bad:

यह काम नहीं करेगा क्योंकि मान में रिक्त स्थान हैं:

<table class=table striped>

Always Specify alt, width, and height for Images

छवियों के लिए हमेशा वैकल्पिक विशेषता निर्दिष्ट करें। यदि किसी कारण से छवि प्रदर्शित नहीं की जा सकती तो यह विशेषता महत्वपूर्ण है।

इसके अलावा, छवियों की चौड़ाई और ऊंचाई को परिभाषित करते समय। इससे घबराहट कम हो जाती है क्योंकि ब्राउज़र छवि लोड करने से पहले स्थान आरक्षित कर सकता है।

Good:

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

Bad:

<img src="html5.gif">

Spaces and Equal Signs

HTML समान चिह्नों के आसपास रिक्त स्थान की अनुमति देता है। लेकिन बिना अंतराल के कदम उठाना आसान है और कंपनियों को एक साथ बेहतर ढंग से जोड़ता है।

Good:

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

Bad:

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

Avoid Long Code Lines

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

कोड की बहुत लंबी लाइनों से बचने का प्रयास करें.

Blank Lines and Indentation

अनावश्यक रूप से रिक्त पंक्तियाँ, रिक्त स्थान या इंडेंट न जोड़ें।

चरणबद्धता में आसानी के लिए कोड के बड़े या तार्किक ब्लॉकों को अलग करने के लिए रिक्त पंक्तियाँ जोड़ें।

कदम बढ़ाने में आसानी के लिए दो-स्पेस इंडेंटेशन जोड़ें। टैब कुंजी का प्रयोग न करें.

Good:

<body>

<h1>Famous Cities</h1>

<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>

<h2>London</h2>
<p>London is the capital city of England. It is the most populous
city in the United Kingdom.</p>

<h2>Paris</h2>
<p>Paris is the capital of France. The Paris area is one of the largest
population centers in Europe.</p>

</body>

Bad:

<body>
<h1>Famous Cities</h1>
<h2>Tokyo</h2><p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
<h2>London</h2><p>London is the capital city of England. It is the most populous
city in the United Kingdom.</p>
<h2>Paris</h2><p>Paris is the capital of France. The Paris area is one of the largest
population centers in Europe.</p>
</body>

Good Table Example:

<table>
  <tr>
    <th>Name</th>
    <th>Description</th>
  </tr>
  <tr>
    <td>A</td>
    <td>Description of A</td>
  </tr>
  <tr>
    <td>B</td>
    <td>Description of B</td>
  </tr>
</table>

Good List Example:

<ul>
  <li>London</li>
  <li>Paris</li>
  <li>Tokyo</li>
</ul>

Never Skip the <title> Element

HTML में <title> तत्व आवश्यक है।

पृष्ठ शीर्षक में सामग्री खोज इंजन अनुकूलन (एसईओ) के लिए बहुत महत्वपूर्ण है! खोज परिणामों में पृष्ठों को सूचीबद्ध करते समय क्रम निर्धारित करने के लिए खोज इंजन द्वारा पृष्ठ शीर्षक का उपयोग किया जाता है।

<शीर्षक> तत्व:

ब्राउज़र टूलबार में हेडर को परिभाषित करता है
पृष्ठ विकल्पों में जोड़े जाने पर शीर्षक प्रदान करता है
खोज इंजन परिणामों में पृष्ठ का शीर्षक प्रदर्शित करें

इसलिए, शीर्षक को यथासंभव सटीक और सार्थक बनाने का प्रयास करें:

<title>HTML Style Guide and Coding Conventions</title>

Omitting <html> and <body>?

<html> और <body> टैग के बिना एक HTML पृष्ठ की जाँच की जाएगी:

Example

<!DOCTYPE html>
<head>
  <title>Page Title</title>
</head>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

हालाँकि, हम दृढ़तापूर्वक <html> और <body> दोनों टैग जोड़ने की अनुशंसा करते हैं!

<body> को हटाने से पुराने ब्राउज़र में त्रुटियाँ उत्पन्न होंगी।

<html> और <body> को हटाने से DOM और XML सॉफ़्टवेयर भी क्रैश हो जाएगा।

Omitting <head>?

HTML <head> टैग को छोड़ा भी जा सकता है।

ब्राउज़र <body> से पहले सभी तत्वों को डिफ़ॉल्ट <head> तत्व में जोड़ देगा।

Example

<!DOCTYPE html>
<html>
<title>Page Title</title>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

हालाँकि, हम <head> टैग का उपयोग करने की अनुशंसा करते हैं।

Close Empty HTML Elements?

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

Allowed:

<meta charset="utf-8">

Also Allowed:

<meta charset="utf-8" />

यदि XML/XHTML सॉफ़्टवेयर आपके पृष्ठ तक पहुंचने की अपेक्षा करता है, तो समापन स्लैश (/) रखें, क्योंकि यह XML और XHTML में आवश्यक है।

Add the lang Attribute

किसी वेब पेज की भाषा घोषित करने के लिए, हमेशा <html> टैग के अंदर lang विशेषता जोड़ें। यह खोज इंजनों और ब्राउज़रों की सहायता के लिए है।

Example

<!DOCTYPE html>
<html lang="en-us">
<head>
  <title>Page Title</title>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Meta Data

सही व्याख्या और सही खोज इंजन अनुक्रमण सुनिश्चित करने के लिए, HTML दस्तावेज़ में भाषा और वर्ण एन्कोडिंग <meta charset='charset'> दोनों को यथाशीघ्र परिभाषित किया जाना चाहिए:

<!DOCTYPE html>
<html lang="en-us">
<head>
  <meta charset="UTF-8">
  <title>Page Title</title>
</head>

Setting The Viewport

व्यूपोर्ट वेब पेज का वह भाग है जिसे उपयोगकर्ता देख सकता है। यह डिवाइस के आधार पर भिन्न होता है - यह मोबाइल फोन पर कंप्यूटर स्क्रीन से छोटा हो सकता है।

आपको अपने सभी वेब पेजों में निम्नलिखित <मेटा> तत्व जोड़ना चाहिए:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

यह ब्राउज़र को निर्देश देता है कि पेज के आयाम और स्केलिंग को कैसे नियंत्रित किया जाए।

चौड़ाई=डिवाइस-चौड़ाई घटक डिवाइस की स्क्रीन-चौड़ाई (जो डिवाइस के अनुसार भिन्न होती है) के आधार पर पृष्ठ की चौड़ाई निर्धारित करता है।

प्रारंभिक-स्केल=1.0 जब पृष्ठ को घटक ब्राउज़र द्वारा पहली बार लोड किया जाता है तो प्रारंभिक स्केल सेट करता है।

यहां व्यूपोर्ट मेटा टैग के बिना एक वेब पेज और व्यूपोर्ट मेटा टैग के साथ एक ही वेब पेज का एक उदाहरण दिया गया है:

व्यूपोर्ट मेटा टैग के बिना एक वेब पेज का उदाहरण और व्यूपोर्ट मेटा टैग के साथ एक ही वेब पेज

सहायता नोट:

यदि आप इस पृष्ठ को फ़ोन या टैबलेट पर ब्राउज़ कर रहे हैं, तो अंतर देखने के लिए आप नीचे दिए गए दो लिंक पर क्लिक कर सकते हैं:

व्यूपोर्ट मेटा टैग के बिना व्यूपोर्ट मेटा टैग के साथ

व्यूपोर्ट मेटा टैग के बिना

व्यूपोर्ट मेटा टैग के बिना सामग्री ठीक से स्केल नहीं होगी

व्यूपोर्ट मेटा टैग के साथ

व्यूपोर्ट मेटा टैग के साथ सामग्री को डिवाइस की चौड़ाई के अनुसार सही ढंग से स्केल किया जाता है

HTML Comments

संक्षिप्त टिप्पणियाँ एक पंक्ति में लिखी जानी चाहिए:

<!-- 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.
-->

यदि लंबी टिप्पणियाँ दो स्थानों से इंडेंट की गई हों तो उनका अवलोकन करना आसान होता है।

Using Style Sheets

स्टाइल शीट को लिंक करने के लिए सरल सिंटैक्स का उपयोग करें (प्रकार विशेषता की कोई आवश्यकता नहीं):

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

संक्षिप्त सीएसएस नियमों को इस प्रकार संक्षिप्त किया जा सकता है:

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

लंबे सीएसएस नियम कई पंक्तियों में लिखे जाने चाहिए:

body {
  background-color: lightgrey;
  font-family: "Arial Black", Helvetica, sans-serif;
  font-size: 16em;
  color: black;
}

CSS Style Guidelines:

उद्घाटन ब्रैकेट को चयनकर्ता के समान पंक्ति पर रखें
प्रारंभिक कोष्ठक से पहले एक स्थान का प्रयोग करें
दो-स्पेस इंडेंटेशन का उपयोग करें
अंतिम सहित प्रत्येक विशेषता-मान संयोजन के बाद अर्धविराम का उपयोग करें
मानों के आसपास उद्धरण चिह्नों का उपयोग केवल तभी करें जब मान में रिक्त स्थान हो
समापन कोष्ठक को अग्रणी रिक्त स्थान के बिना एक नई पंक्ति पर रखें

Loading JavaScript in HTML

बाहरी स्क्रिप्ट लोड करने के लिए सरल सिंटैक्स का उपयोग करें (प्रकार विशेषता की कोई आवश्यकता नहीं):

<script src="myscript.js">

Accessing HTML Elements with JavaScript

"गंदे" HTML कोड का उपयोग करने से जावास्क्रिप्ट त्रुटियाँ हो सकती हैं।

ये दो जावास्क्रिप्ट कथन अलग-अलग परिणाम लौटाते हैं:

Example

getElementById("Demo").innerHTML = "Hello";

getElementById("demo").innerHTML = "Hello";

जावास्क्रिप्ट स्टाइल गाइड पर जाएँ।

Use Lower Case File Names

कुछ वेब सर्वर (अपाचे, यूनिक्स) फ़ाइल नामों के मामले में संवेदनशील होते हैं: "london.jpg" को "London.jpg" के रूप में एक्सेस नहीं किया जा सकता है।

अन्य वेब सर्वर (Microsoft, IIS) केस संवेदनशील नहीं हैं: "london.jpg" को "London.jpg" के रूप में एक्सेस किया जा सकता है।

यदि आप अपरकेस और लोअरकेस अक्षरों के संयोजन का उपयोग करते हैं, तो आपको इसके बारे में पता होना चाहिए।

यदि आप केस-असंवेदनशील से केस-संवेदी सर्वर की ओर बढ़ते हैं, तो छोटी त्रुटियाँ भी आपकी वेबसाइट को तोड़ सकती हैं!

इन समस्याओं से बचने के लिए, हमेशा छोटे फ़ाइलनामों का उपयोग करें!

File Extensions

File Type	Extension
HTML files	should have a .html extension (.htm is allowed)
CSS files	should have a .css extension
JavaScript files	should have a .js extension

Differences Between .htm and .html?

.htm और .html फ़ाइल एक्सटेंशन के बीच कोई अंतर नहीं है!

किसी भी वेब ब्राउज़र और वेब सर्वर द्वारा दोनों को HTML के रूप में माना जाता है।

Default Filenames

जब कोई URL अंत में फ़ाइल नाम निर्दिष्ट नहीं करता है (जैसे कि https://www.jassifteam.com/), तो सर्वर एक डिफ़ॉल्ट फ़ाइल नाम जोड़ता है जैसे "index.html", "index.htm", "default.html" या "default.htm"।

यदि आपका सर्वर डिफ़ॉल्ट फ़ाइल नाम के रूप में केवल "index.html" के साथ कॉन्फ़िगर किया गया है, तो आपकी फ़ाइल का नाम "index.html" होना चाहिए, न कि "default.html"।

हालाँकि, सर्वर को एक से अधिक डिफ़ॉल्ट फ़ाइल नाम के साथ कॉन्फ़िगर किया जा सकता है; आमतौर पर आप जितने चाहें उतने डिफ़ॉल्ट फ़ाइल नाम सेट कर सकते हैं।

Exercise

स्टाइल गाइड का HTML टैग लिखने का उचित तरीका क्या है?

<body>Paragraph</body>

✓ ठीक है! छोटे अक्षर टैग, सही समापन और अच्छी संरचना

<BODY>Paragraph</BODY>

✗ ग़लत! स्टाइल गाइड में अपरकेस टैग की अनुशंसा नहीं की जाती है

<body>Paragraph</body>

✗ ग़लत! कोई समापन टैग नहीं

<body>Paragraph</body>

✗ ग़लत! मिश्रित मामला (पी उद्घाटन, पी समापन) यादृच्छिक है

पहले अगला