HTML වලදී බොහෝ දෙනා අතින් සිදුවන වැරදි 11 ක් (සහ ඒවා මගහැර ගන්නා හැටි)

Common HTML mistakes in web design

HTML කේතකරණයේදී නවකයින් අතින් වගේම පළපුරුදු වෙබ් ඩිසයින(ර්) ලා අතිනුත් බොහෝ අතපසුවීම් සිදු වෙන බව කලක සිටම හදුනා ගත් දෙයක්.

වැරදි ලෙස සකස් කරන ලද HTML වෙබ් පිටුවක් සෙවුම් යන්ත්‍ර වලින් ප්‍රතික්ෂේප කරනවා විතරක් නෙවෙයි, අන්තර්ජාල හැකර් කරුවන්ගේ ගොදුරක් බවට පත් වීමේ අවදානමකුත් තියෙනවා.

මේ තියෙන්නේ HTML කේතකරණයේදී නවකයින් අතින් වගේම පළපුරුදු වෙබ් ඩිසයින(ර්) ලා අතිනුත් නිතර සිදුවෙන අතපසුවීම් කිහිපයක්. මේ අතපසුවීම් හැකි තරම් අවම කරගෙන valid HTML page එකක් හදාගන්න හැම විටම උත්සාහ කරන්න.

01. Block Elements සහ Inline Elements

Block elements කියන්නේ වෙබ් පිටුවක අන්තර්ගතය කොටස් වලට වෙන් කරන elements වර්ගයක්. අපි වෙබ් පිටුවකට block element එකක් ඇතුලත් කර හැම විටම ඒ element එක එකතු වෙන්නේ අලුත්ම content block එකක් විදියට. block elements වලට උදාහරණ තමයි, h1 – h6, p, blockquote, div, ol, ul, …

Inline elements භාවිතා කරන්නේ block element එකක් ඇතුලේ. තවත් විදියකින් කිව්වොත්, inline elements වලින් block element එකක් තුල විවිධ වෙනස්කම් කරන්න පුලුවන්. Inline elements වලට උදාහරණ තමයි, a, em, strong, style, span, ins, del, s, b, u, …

කිසිම අවස්ථාවක inline element එකක් ඇතුලට block element එකක් යොදන්න එපා. ඒක වැරදියි.

උදාහරණයක් විදියට, ඔයාට h2 මාතෘකාවක් ලින්ක් එකක් විදියට භාවිතා කරන්න අවශ්‍ය නම් ඒක මේ විදියට නෙවෙයි,

<a href="abcd.html"><h2>Best HTML Tips</h2></a>

මේ විදියට භාවිතා කරන්න.

<h2><a href="abcd.html">Best HTML Tips</a></h2>

02. alt=”” in Images

අලුත් HTML 5.0 වලදී img ටැග් එකට alt=”” attribute එක අනිවාර්යයි. alt=”” නොමැතිව img භාවිතා කිරීම වැරදියි.

<img src="abcd.html"/>

නිවැරදි ක්‍රමය

<img src="abcd.html" alt="Some SEO catchy text"/>

03. ලැයිස්තු පෙන්වීමට <br/> භාවිතා කිරීම

ඇතැම් අවස්ථාවල ලැයිස්තු එහෙමත් නැතිනම් ලිස්ට් සකස් කිරීමට <p> සහ <br/> ටැග් භාවිතා කරනවා මම දැකලා තියෙනවා. ඔය පහලින් තියෙනවා වගේ. ඒක සම්පූර්ණයෙන්ම වැරදියි.

<p>1. Banana<br/>
2. Pineapple<br/>
3. Grapes<br/>
4. Oranges</p>

නිවැරදි ක්‍රමය නම්, ලැයිස්තු සකස් කිරීමට ඒ සදහාම වෙන්වූ <ol> සහ <ul> ලෙස tags දෙකක් තියෙනවා. ඒවා භාවිතා කරන්න.

<ol>
<li>Banana</li>
<li>Pineapple</li>
<li>Grapes</li>
<li>Oranges</li>
</ol>

04. තද අකුරු සහ ඇල අකුරු පෙන්වීමට <b> සහ <i> Tags භාවිතා කිරීම

නවතම HTML සංස්කරණය වන HTML 5.0 හි නිර්දේශය නම්, <b> සහ <i> ටැග් භාවිතා කිරීම හැකි තරම් අවම කරන ලෙසයි. ඒ වෙනුවට <strong> සහ <em> භාවිතා කරන්න පුලුවන්. එහෙමත් නැතිනම්, font-weight සහ font-style යන CSS properties භාවිතා කළ හැකියි.

05. පේලි අතර පරතරය වැඩි කිරීමට <br/> Tags භාවිතා කිරීම

සමහර අවස්ථාවලදී එකම ඡේදයක පේළි දෙකක් අතර පරතරය වැඩි කර පෙන්වීමට <br/> tag එක කිහිප වතාවක් භාවිතා කරලා තියෙනවා. ඒකත් සම්පූර්ණයෙන්ම වැරදියි.

<p>This is a line of text
<br/>
<br/>
This is another line of same paragraph and it is WRONG</p>

<br/> ටැග් එක තියෙන්නේ ඡේදයක වාක්‍යයක් හෝ කොටසක් අලුත් පේලියකින් ආරම්භ කිරීම සදහා මිසක් පේලි අතර පරතරය වැඩි කර ගැනීමට නොවේ.

එසේ පේළි දෙකක් අතර පරතරය වැඩි කර ගැනීමට අවශ්‍ය නම් ඒ සදහා පහත දැක්වෙන ආකාරයට <p> tag දෙකක් භාවිතා කරන්න.

<p>This is a paragraph</p>
<p>This is another paragraph. It keeps the white space perfectly.</p>

06. Attributes වල අගයයන් සදහා උපුටා ගැනීමේ කොමා නොයෙදීම

ඔබ භාවිතා කරන HTML attributes වල අගයයන් සදහා උපුටා ගැනීමේ කොමා භාවිතා කිරීම අනිවාර්යයි.

වැරදි ක්‍රමය

<img src=mountain.jpg id=thumbs/>
<a href=about-us.html class=navigation/>

නිවැරදි ක්‍රමය

<img src="mountain.jpg" id="thumbs"/>
<a href="about-us.html" class="navigation"/>

07. Incorrect Nesting of HTML Elements

HTML වලදී එක් element එකක් තුල තවත් element එකක් භාවිතා කරනවා නම්, ඒවා නිවැරදිව විවෘත කිරීම (closing) සහ වැසීම (opening) කල යුතුයි. සම්මතය නම්, මුලින්ම විවෘත කරන ලද tag එක අවසානයටම වසා දැමීම. එය අනිවාර්යයෙන්ම අනුගමනය කළ යුතුයි.

ඔබේ වෙබ් පිටුවක කේතයේ මේ tags නිවැරදිව nesting කර තිබෙනවාද කියා පරීක්ෂා කර බැලීමට සරල ක්‍රමයක් තියෙනවා. පහල රූපයෙන් පෙන්වන ආකාරයට opening tag එක සහ closing tag යා කරමින් සිතින් රේඛා ඇන්ද විට ඒවා එකිනෙක නොකැපී යායුතුයි.

වැරදි ක්‍රමය

Incorrect nesting

නිවැරදි ක්‍රමය

Correct nesting

08. Inline CSS Styles භාවිතා කිරීම

මේ ලිපිය කියවන ඔබ Inline CSS styles ගැන දන්නවා මම හිතන්නේ. Inline styles භාවිතා කිරීමෙන් ඔයාගෙ වෙබ් පිටුවට අවාසි ගොඩක් සිද්ධ වෙනවා.

  • වෙබ් පිටුවේ ‘බර’ වැඩි වෙනවා.
  • External සහ internal styles වලට සහාය දක්වන්නේ නැහැ.
  • Responsive වෙබ් පිටු හදන්න අමාරුයි.
  • වෙබ් පිටුවේ වලංගු භාවය (validity) පිළිබද ගැටලු ඇති වෙන්න පුලුවන්

ඒ නිසා, පහත දැක්වෙන ආකාරයේ inline styles භාවිතා කිරීම හැකිතාක් අවම කරන්න. ඒ වෙනුවට internal සහ external styles භාවිතා කරන්න.

වැරදි ක්‍රමය

<h2 style="text-decoration:underline; color:#3368df">This is a Sub Heading</h2>

නිවැරදි ක්‍රමය

HTML Code
<h2 class="uline">This is a Sub Heading</h2>
CSS Code
h2.uline {
text-decoration: underline;
color: #3368df;
}

09. border=”” Attribute භාවිතා කිරීම

HTML වල නිතරම වාගේ දකින්න ලැබුනු දෙයක් තමයි <img>, <table>, <p>, <div> වගේ ටැග්ස් වලදී border=”” attribute එක භාවිතා කිරීම. නමුත් HTML 5.0 හි ආගමනයත් සමග වෙබ් පිටුවකදී එය භාවිතා කිරීම නිර්දේශ කරන්නේ නැහැ.

අනුමත කරන ලද නිවැරදි ක්‍රමවේදය තමයි, ඒ සදහා CSS භාවිතා කිරීම.

වැරදියි,

<img src="awesome.jpg" border="1"/>

නිවැරදියි,

HTML Code
<img src="awesome.jpg"/>
CSS Code
img {
border: 1px;
}

10. <blink> and <marquee> Tags

<blink> සහ <marquee> කියන්නේ වෙබ් අඩවියක යම් කොටසකට විශේෂ අවධානයක් යොමු කර ගැනීම සදහා භාවිතා කරන අතිරේක tags දෙකක්.

හැබැයි ඔබ මතක තබා ගත යුතු දෙයක් තමයි, මේ tags දෙක භාවිතා කරනවානම් වෙබ් අඩවියේ ආරක්ෂාව සහ ස්ථාවරභාවය පිළිබද පූර්ණ වගකීම ඔබ සතු වන බව!

ඒකට හේතුව තමයි, මෙම tags දෙක කිසිම විටෙක W3C (World Wide Web Consortium) විසින් හදුන්වා දෙන ලද නිල tags දෙකක් නොවීම. ඔබට W3C අනුමත tags ලැයිස්තුව මෙම පිටුවෙන් බලාගන්න පුලුවන්. බලන්න මේ <blink> සහ <marquee> tags දෙක ඒ ලැයිස්තුවේ තියෙනවාද කියලා.

W3C විසින් අනුමත නොකරන ලද tag එකක් භාවිතා කිරීම ඔබේ වෙබ් අඩවිය වෙත වෛරස සහ හැකර්කරුවන්ට අත වැනීමක් බව සිහි තබා ගන්න!

11. භාවිතයෙන් ඉවත් කරන ලද (Deprecated) Tags සහ Attributes භාවිතා කිරීම

HTML වලට කලින් කලට විවිධ සංස්කරණ වලදී අලුතින් tags සහ attributes එකතු වෙනවා වගේම ඇතැම් tags සහ attributes ඉවත් වෙනවා. ඒ සමගම ඔබේ වෙබ් අඩවියේත් HTML කේත යාවත්කාලීන විය යුතුයි.

නමුත් බොහෝ වෙබ් අඩවි වල තවමත් භාවිතයෙන් ඉවත් කරන ලද tags සහ attributes භාවිතා කරනවා දැකගන්න පුලුවන්.

HTML tags ලැයිස්තුවේ සහ attributes ලැයිස්තුවේ භාවිතයෙන් ඉවත් කරන ලද tags සහ attributes වලට ඉදිරියෙන් “Not supported in HTML5” ලෙස පැහැදිලිව සදහන් කර තිබෙනවා.

ඔබේ වෙබ් අඩවියෙත් එවැනි tags සහ attributes තියෙනවා නම් හැකි ඉක්මනින් ඒවා ඉවත් කරන්නට වගබලා ගන්න. එය ඔබේ වෙබ් අඩවියේ ආරක්ෂාව වගේම වේගයත් වැඩි කරන්නට හේතු වනු ඇති.

Note

මේ ලිපියෙන් මම ඔයාලට ඉදිරිපත් කලේ HTML වලදී බහුලව සිදුවන දෝෂ කිහිපයක්. සාමාන්‍යයෙන් මේ වගේ දෝෂ නිසා ඔබේ වෙබ් අඩවියේ පෙනුමට කිසිම ආකාරයේ හානියක් නොවෙන්න පුලුවන්.

නමුත්, W3C ට අනුව ඔබේ වෙබ් අඩවියේ ආරක්ෂාව, උපරිම වේගය සහ මනා ක්‍රියාකාරිත්වය තහවුරු කිරීම සදහා එය නිවැරදි කේත හා ක්‍රමවේද භාවිතා කරමින් සකස් කල එකක් යුතුයි.

ඔබේ වෙබ් අඩවියේ ඇති වෙබ් පිටුත් එවැනි valid වෙබ් පිටුද යන්න සැකහැර දැනගැනීම සදහා W3C validator පිටුව භාවිතා කල හැකියි.

Please Login to comment
avatar
1000

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  Subscribe  
Notify of
Scroll to top
Share via
Copy link
Powered by Social Snap