শুরুর কথা
সত্যি কথা বলতে বাঁধা নেই, অনেক মানুষই HTML, CSS এবং জাভাস্ক্রিপ্ট শিখেছেন অন্যান্য ওয়েবপেজের সোর্স দেখার পর কপি-পেস্ট করে। তারা কখনও যাচাই করেও দেখে না, তারা যে ওয়েবসাইট থেকে কপি পেস্ট করেছেন - তা ভালোভাবে, আধুনিক ধারা বজার রেখে তৈরি করা হয়েছে না! যার ফলে দেখা যায়, অনেক ওয়েব ডেভেলপারই বছর খানেক পুরনো যাদুঘরে ঠাঁই পাওয়া টেকনিক ব্যবহার করে ওয়েব ডেভেলপ করছেন, যেসব টেকনিক আজকাল আর প্রয়োজনই হয় না বরঞ্চ খুবই খারাপ অভ্যাস বলে ধরে নেয়া হয়। সময়ের সঙ্গে সঙ্গে ওয়েব ডেভেলপারদের যেসকল অভ্যাস অপ্রয়োজনীয় ও অযৌক্তিক হিসেবে চিহ্নিত হয়েছে, সেগুলোর একটি তালিকা করার প্রয়াস থেকেই এই আর্টিকেলটি লেখা হয়েছে।
Doctype (ডক টাইপ)
প্রায় ১০ ধরণের (X)HTML doctypes বিদ্যমান রয়েছে। কোন ক্ষেত্রে এদের মধ্যে তফাৎ খুবই সামান্য (অনেক ক্ষেত্রে কোন পার্থক্যই পাওয়া যায় না)। তাই অতিরিক্ত জটিলতা বাড়িয়ে ঝামেলায় না গিয়ে সোজাসুজি নিচের ছোট্ট ও পরিষ্কার Doctype দিয়ে আপনার HTML শুরু করুন!
<!DOCTYPE html>
যা প্রতিটি ব্রাউজারেই (এমনকি ইন্টারনেট এক্সপ্লোরার ৬) সঠিকভাবে কাজ করে।
<meta> এলিমেন্ট charset এট্রিবিউট
নিচের লাইনটি ওয়েবপেজগুলোতে খুঁজে পাওয়া খুব একটা কঠিন না, অনেক ওয়েবসাইটের পেজগুলোতে এভাবে এনকোডিং ডিক্লেয়ার করা হয়।
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
অথচ, নিচের ছোট্ট লাইনটি ব্যবহার করলে (ইন্টারনেট এক্সপ্লোরার ৬ সহ) সকল ব্রাউজার সঠিকভাবে কাজ করবে! শুধু শুধু বেশি লেখালেখি করার দরকার কি?
<meta charset="UTF-8" />
কিছু মজাদার reverse engineering এবং pragmatism এর মাধ্যমে এ মজার জিনিসটি জানা সম্ভব হয়েছে, এই টেকনিকটি ব্যবহার করবেন কিন্তু!
অকাজের <meta> এলিমেন্ট
অসংখ্য বিলুপ্ত, অকাজের, স্ট্যান্ডার্ডের বাইরে এবং অযথা ঝামেলা বাড়ানো প্রাগৈতিহাসিক মেটা এলিমেন্ট আজও ডেভেলপাররা কপি-পেস্ট করে বেড়ান। বিশেষ করে যেগুলোর ব্যবহার এড়িয়ে চলা উচিৎ,
<meta name="MSSmartTagsPreventParsing" content="true">যা কেবলমাত্র ইন্টারনেট এক্সপ্লোরার ৬ এর একটি বেটা ভার্সনে কাজ করতো। এই ভার্সন এখন আর ব্যবহার করা হয় না এবং এই ভার্সনের পরবর্তী কোন ভার্সনে স্মার্ট ট্যাগ ফিচারটি রাখা হয় নি। তাই এই ট্যাগটি নিরর্থক।<meta name="robots" content="all">. If the robots value does exists and is perfectly legitimate, don't use not existing values, likeall. By default it isindex, followwhich is basically what the non-existingallis supposed to do. Just remove the whole<meta>.<meta name="copyright" content="…">. This meta doesn't exist. Remove it and creates a copyright page or div, link to it using the<link>HTML element with therel="copyright"value<meta name="rating" content="…">. এই মেটাট্যাগের কোন অস্তিত্ব নেই, পুরো<meta>মুছে দিন।
HTML comments in scripts
There was once a time in which some browsers understood the <script> tag and others didn't. This sometimes led to browsers rendering as text what should be interpreted as script. A natural idea was to put scripts as HTML comments. This way, browsers executing scripts would execute them and those who did not understand scripts would just ignore them.
From this era, we inherit things like:
<script>
<!--
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "https://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "bla.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
//-->
</script>
or:
<script type="text/javascript">
<!--//--><![CDATA[//><!--
Blabla.extend(MyFramework.settings, { "basePath": "/" });
//--><!]]>
</script>
All of this is completely useless nowadays - even browsers which do not execute scripts just ignore <script> tags. Just write your scripts within between the start and end <script> tags. Better, insert your scripts as separate files with the src attribute; while you're at it, consider trying the HTML5 async and defer attributes.
Elements which should not be used anymore
font
The font tag should not be used any more. CSS is preferred to control typography appearance on the elements, targeted by tag or ID/Class attributes..
b, i, u
These tend to be a bit more controversial, but as much as possible, try to use respectively <strong>, <em> or <span> and CSS (text-decoration:underline) when relevant.
Exercise discretion when choosing which of these elements to use. Some development-oriented pages advise simply replacing <b> with <strong> and <i> with <em>. It is a bad idea to follow this advice. <strong> is for statements of strong importance, while <em> is for otherwise emphasized text. For example, it's a bad idea to use <em> simply to achieve italicization; italic, non-emphasized text can be achieved by using font-style:italic in your pages' CSS. Similarly, titles of books and works of art are traditionally styled with italic text, but using the <cite> element for these items provides more semantic mark-up than <em> or <i>.