Common HTML CSS Mistakes जिनसे बचना चाहिए
आप web designing में नए हों या कोई advanced programmer हों हर किसी से कभी न कभी HTML और CSS में coding करते समय गलतियाँ हो जाती हैं| कई बार तो हमें browser में open करने के बाद इन गलतियों का तुरंत पता चल जाता है लेकिन कुछ mistakes ऐसे भी होते हैं जो की हमें screen पर दिखाई नही देते लेकिन उनका असर बाद में जरूर दिखाई देता है जैसे यदि हम image में alt attribute न use करें तो भी image display होगा और इससे presentation पर को असर नहीं होगा लेकिन आगे परेशानी तब होगी जब search engine उस इमेज को समझ नही पाएगा और अच्छे से index नहीं कर पाएगा |
आज हम उन common HTML CSS mistakes के बारे में जानेंगे जिन्हें कभी न कभी आपने भी face किया ही होगा और साथ में हम यह भी जानेंगे की उन गलतियों को कैसे सुधारा जाये|
Contents
HTML Coding में होने वाली सामान्य गलतियाँ
1. DOCTYPE Declaration का उपयोग नही करना
किसी भी HTML file में सबसे पहली line में DOCTYPE declare किया जाता है जो की user के browser को बताता है की दिखाई देने वाला document एक HTML document है| यहाँ पर ध्यान देने वाली बात यह है की DOCTYPE कोई HTML element या कोई tag नही है| इसके जरिये browser को यह पता चलता है की हम अपने document में HTMLका कौनसा version use कर रहें हैं और उस version के अनुसार ही browser में उस पेज का render होता है|
यदि आप इसका उपयोग नही करते हैं तो आपके द्वारा बनाया गये HTML page को browser अपने अनुसार किसी पुराने version के document की तरह render करेगा जिससे हो सकता है की आप जिस तरह से उस document को दिखाना चाहते हैं वैसे user को न दिखे|
इसे <html> tag से पहले लिखा जाता है और इसका कोई closing tag नही होता| सभी HTML versions के लिए अलग-अलग DOCTYPE उपयोग किये जाते हैं वर्तमान में ज्यादातर HTML 5 version use किया जाता है जिसमे DOCTYPE नीचे दिए तरीके से declare किया जाता है|
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
...
</body>
</html>
2. Open किये गये Tag को Close करना भूलना
यह सबसे common mistake है जो की शुरुआत में लगभग हर किसी से होती है| कुछ tags जो self closing होते हैं उनको छोड़ कर बाकि tags के opening और closing tags होते हैं जिन्हें close करना जरूरी होता है ऐसा नही करने से कई चीजें properly काम नहीं करती इसलिए इस पर ध्यान देना जरूरी है|
HTML tags को जिस order में open किया जाता है उसके opposite order में close किया जाता है यानि जो सबसे पहले open होता है उसे सबसे last में close किया जाता है, इसका एक उदाहरण आप नीचे देख सकते हैं|
<p>This is an <strong>example</strong> of <em>nested elements.</em></p>3. img tag में alt attribute को blank छोड़ना
image tag में alt use करना जरूरी है| जब browser पर image load नही हो पाता तब alt attribute में specify किया गया text उस image के स्थान पर display होता है जिससे user को उस image के बारे में पता चलता है इसके अलावा search engine जैसे Google जब पेज को crawl करता है तो इसी alt attribute से ही उसे पता चलता है की वह image की बारे में है|
<img src=”image.jpg” alt=”image description”/>4. Head section वाले contents को head tag में न रखना
कुछ ऐसे elements हैं जिन्हें हमेशा <head> और </head> के बीच ही रखना चाहिए जैसे <title>, <style>, <meta> आदि| जब भी कोई CSS file link करनी हो तो head section में ही link करना चाहिए|
<head>
<title>Your page title</title>
<meta name=”description” content=”page description”>
<link href=”style.css” rel=”stylesheet” type=”text/css”>
</head>5. List के लिए HTML list की जगह line break का use करना
कई बार हमें list के format में हमे contents को एक के बाद एक दिखाना होता है ऐसी जगह में हमें <br/> के बजाय ordered list <ol> या unordered <ul> का use करना चाहिए|
गलत तरीका
1. Google <br/>
2. Yahoo<br/>
3. Bingसही तरीका
<ol>
<li>Google</li>
<li>Yahoo</li>
<li>Bing</li>
</ol>6. Deprecated Elements या Attributes का उपयोग करना
Web technology में समय के साथ कई बदलाव होते रहते हैं जो आज हम use कर रहें हैं हो सकता है कुछ सालों बाद वह किसी काम का न रहे, ऐसे ही HTML के साथ भी है कुछ सालों पहले तक आपने कई websites में user को attract करने के लिए रंग बिरंगे चलते-फिरते marquee का उपयोग करते देखा होगा लेकिन अब इसका चलन बंद हो गया है ऐसे ही कई और भी elements और attributes हैं जो बहुत पुराने हो चुके हैं और W3C consortium ने भी उन्हें deprecated declare कर दिया है तो इनके उपयोग से हमें बचना चाहिए|
CSS में होने वाले Common Mistakes
1. Semicolon और curly bracket पर ध्यान न देना
हमें किसी एक selector पर CSS rules apply करने होते हैं तो उन सारे rules को हम curly braces के अंदर लिखना होता है और उसके अंदर last वाले rule को छोड़ कर हर एक को semicolon से end करना जरूरी होता है|
#sidebar{
width:30%;
height:400px;
float:left;
}2. ID और Class का सही उपयोग न करना
यह एक common problem है जो की ज्यादातर beginners के साथ होती है| ID और class के बीच अंतर नही समझने और इनके बीच confused होने के कारण यह गलती होती है| यहाँ पर यह समझना जरूरी है की ID को सिर्फ एक element या item के साथ use किया जाता है जबकि class का उपयोग multiple items को style करने के लिए किया जा सकता है|
ID
#header{width:100%; height:200px;}
#footer{width:100%; height:100px;}
Class
.colorblue{color:#0000FF;}
.green-button{color: white; border-radius: 4px; background: rgb(28, 184, 65);}ऊपर हमने दो ID और दो class बनाये हैं अब आप दोनों में अंतर साफ-साफ देख सकते हैं|
- किसी page में header और footer सिर्फ एक होते हैं इसके लिए हम ID का उपयोग कर सकते हैं
- यदि हमें document में कहीं भी किसी text को blue करनी है तो उसके लिए .colorblue वाली class use कर सकते हैं,
- हमें green color का button बनाना है तो इस काम केलिए .green-button class का उपयोग कर जितने चाहें buttons बना सकते हैं
3. Shorthand Properties का उपयोग न करना
Shorthand code के जरिये हम लम्बे-लम्बे rules को सिर्फ एक line में ही define कर सकते हैं जिससे file की size कम होती है और page की loading speed भी बढती है| उदाहरण के लिए यदि हमें किसी selector पर margin apply करना है तो यह काम हम दो तरीके से कर सकते हैं:
पहला तरीका
#selector {
margin-top: 20px;
margin-right: 0;
margin-bottom: 20px;
margin-left 0;
}दूसरा तरीका
#selector{margin: 20px 0;}इन दोनों तरीके से हम किसी selector पर top, bottom margin 20px और left व right margin 0px set कर सकते हैं| यदि हम पहला तरीका उपयोग करें तो इसके लिए चार line के कोड लिखने पड़ेंगे वहीँ दुसरे तरीके से यानि shorthand का use करके हम इसे सिर्फ एक line में लिख सकते हैं|
यह भी पढ़ें : CSS Box Model और उनके Properties
4. Hexadecimal के बदले Color Names का use करना
हमें color के लिए हमेशा hex code या rgb() का उपयोग करना चाहिए और color name का use करने से बचना चाहिए क्योंकि colors की संख्या millions में है जिनमे से कुछ ही रंगों का नाम निर्धारित है इसके अलावा name use करने पर यह जरूरी नही की अलग-अलग browser में वह एक सामान दिखाई दे|
उदाहरण के लिए हम एक code लिखते हैं :
p{color:red;}हमने browser को यह बताया की p element के color को red करना है लेकिन red color भी कई प्रकार के होते हैं dark red, light red और भी अलग-अलग shades होते हैं अब यह browser के ऊपर है की वह कौनसा कलर चुने, अब क्या आप चाहते हैं की आपका पेज कैसे दिखे यह browser तय करे ? नहीं न, इसलिए हमें हमेशा exact color specify करने चाहिए और इसके लिए hexadecimal या rgb का उपयोग श्रेष्ठ है|
5. Inline Style का उपयोग करना
Inline style मतलब सीधे HTML element में styles apply करना| CSS use करने का main goal यही है की हम document structure से presentation यानि style वाले part को अलग करें ऐसे में यदि inline style apply किया जाय तो इसका कोई अर्थ नही रह जाता|
गलत तरीका
<p style="color:#ccc;">paragraph</p>सही तरीका
HTML:
<p>paragraph</p>CSS:
p{color:#ccc;}हमे CSS के लिए अलग से file बना कर उसे पेज से लिंक करना चाहिए इसके कई सारे फायदे हैं:
• Code को maintain करना आसान है
• Class बना कर एक कोड से कई बार काम लिया जा सकता है
• यह browser cache में store हो जाता है जिससे बार बार load होने की जरूरत नही है इससे पेज की loading speed बढ़ेगी
यह भी पढ़ें:
आज आपने Common HTML CSS Mistakes के बारे में जाना जो की किसी से भी हो सकता है लेकिन थोड़ी सी सावधानी और practice से इसे दूर किया जा सकता है|
क्या आपने भी कभी इस तरह की छोटी-छोटी गलतियों का सामना किया है?
अगर हाँ तो वह कौन सी गलतियाँ थी, Comment box के जरिये हमारे साथ अपना experience जरूर share करें|
