HTML Style Guide नियमों और best practices का एक set होता है, जिससे HTML code साफ़, readable और professional बनता है। इसका उद्देश्य यह है कि code किसी भी developer को आसानी से समझ आए और future में maintain करना आसान हो।
HTML Style Guide क्यों ज़रूरी है?
एक consistent style code को readable बनाता है।
Team में काम करते समय confusion कम होता है।
Maintenance और debugging आसान हो जाती है।
Search engines और browsers के लिए structure बेहतर रहता है।
HTML Document Structure का सही तरीका
हर HTML page में basic structure होना चाहिए।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Style Guide</title>
</head>
<body>
<h1>Hello World</h1>
<p>This is a sample page.</p>
</body>
</html>
Tags और Attributes हमेशा lowercase में लिखें
Lowercase लिखना best practice माना जाता है।
गलत:
<P CLASS="text">Hello</P>
सही:
<p class="text">Hello</p>
Proper Indentation का उपयोग करें
Indentation से HTML structure साफ दिखाई देता है।
गलत:
<ul>
<li>Home</li>
<li>About</li>
</ul>
सही:
<ul>
<li>Home</li>
<li>About</li>
</ul>
Attributes को Quotes में लिखें
Attribute values हमेशा double quotes में होनी चाहिए।
गलत:
<input type=text>
सही:
<input type="text">
Title और Meta Tags ज़रूर लिखें
हर page का meaningful title होना चाहिए।
<head>
<title>HTML Style Guide Tutorial</title>
<meta name="description" content="HTML coding best practices">
</head>
Semantic Elements का सही इस्तेमाल करें
Semantic tags structure को clear बनाते हैं।
गलत:
<div id="header"></div>
<div id="footer"></div>
सही:
<header></header>
<footer></footer>
Images में Alt Attribute ज़रूरी है
Alt attribute accessibility और SEO के लिए important है।
<img src="logo.png" alt="Website Logo">
Inline CSS से बचें
HTML में styling inline नहीं लिखनी चाहिए।
गलत:
<p style="color:red;">Hello</p>
सही:
<p class="text">Hello</p>
Empty Elements को Clean तरीके से लिखें
<br>
<img src="image.jpg" alt="Sample Image">
Comments का सीमित उपयोग करें
Comments helpful होते हैं, लेकिन ज़रूरत से ज़्यादा नहीं।
<!-- Main content starts -->
<main>
<p>Welcome</p>
</main>
Meaningful Class और ID Names रखें
नाम देखकर element का काम समझ आना चाहिए।
गलत:
<div class="x1"></div>
सही:
<div class="main-content"></div>
Deprecated Tags का उपयोग न करें
Old HTML tags avoid करें।
गलत:
<font color="red">Text</font>
सही:
<p class="red-text">Text</p>
HTML Style Guide Summary
Lowercase tags और attributes
Proper indentation
Semantic elements का उपयोग
Inline CSS से बचाव
Accessibility का ध्यान