একটি সামঞ্জস্যপূর্ণ, পরিষ্কার এবং পরিপাটি গোছালো এইচটিএমএল কোড আপনার কোডটি অন্যদের কাছে পড়তে ও বুঝতে সহজ করে তোলে।
এইচটিএমএল স্টাইল গাইড এবং কোডিং প্রচলন
ভাল এইচটিএমএল কোড লেখার জন্য এখানে কিছু গাইডলাইন এবং টিপস রয়েছে।
সর্বদা ডকুমেন্ট টাইপ ডিকলিয়ার করুন
সবসময় এইচটিএমএল ডকুমেন্টের প্রথম লাইনে ডকুমেন্ট টাইপ ঘোষণা করতে হয় ।
এইচটিএমএল এর সঠিক ডকুমেন্ট টাইপ হলো:
<!DOCTYPE html>
এলিমেন্ট গুলো লোয়ার কেসে লিখুন
এইচটিএমএল এলিমেন্টের নাম গুলিতে বড় হাতের অক্ষর এবং ছোট হাতের অক্ষরগুলিকে মিশ্রিত করতে দেয়। অর্থাৎ আপনি ছোট হাতের এবং বড় হাতের একত্রে লিখতে পারেন ।
তবে আমরা সব সময় সুপারিশ করবো আপনি এলিমেন্ট নেম গুলো ছোট হাতের বা লোয়ার কেসে লিখুন, কারনঃ
- বড় হাতের এবং ছোট হাতের অক্ষরে এইচটিএমএল লিখলে দেখতে খারাপ লাগে ।
- ডেভেলপার রা সমসময় লোয়ার কেসে অর্থাৎ ছোট হাতের অক্ষরেই লেখে ।
- ছোট হাতের অক্ষর দেখতে অনেক পরিষ্কার লাগে ।
- ছোট হাতের অক্ষর লেখাও সহজ ।
ভালো কোড প্র্যাকটিস
<body> <p>This is a paragraph.</p> </body>
খারাপ কোড প্র্যাকটিস
<BODY> <P>This is a paragraph.</P> </BODY>
সব এইচটিএমএল এলিমেন্ট ক্লোজ করুন
এইচটিএমএলে সমস্ত উপাদান বা এলিমেন্ট ক্লোজ না করলেও কিছু কিছু কোড কাজ করে। উদাহরন সরুপ <p> এলিমেন্ট ক্লোজ না করলেও কাজ করে ।
তারপর ও আমরা দৃঢ় ভাবে আপনাকে রিকমেন্ড করবো এইচটিএমএল এলিমেন্ট ক্লোজ করুন যেগুলোর ক্লোজিং ট্যাগ রয়েছে ।
ভালো কোড প্র্যাকটিস
<section> <p>This is a paragraph.</p> <p>This is a paragraph.</p> </section>
খারাপ কোড প্র্যাকটিস
<section> <p>This is a paragraph. <p>This is a paragraph. </section>
লোয়ার কেস অ্যাট্রিবিউট নেম
এইচটিএমএল এলিমেন্টের মতো অ্যাট্রিবিউট নেম ছোট হাতের ও বড় হাতের অক্ষরে লেখা যায় ।
তারপরও আমরা রিকমেন্ড করবো আপনি ছোটহাতের অক্ষরে অ্যাট্রিবিউট নেম গুলো লিখুন, কারনঃ
- বড় হাতের এবং ছোট হাতের অক্ষরে এইচটিএমএল লিখলে দেখতে খারাপ লাগে ।
- ডেভেলপার রা সমসময় লোয়ার কেসে অর্থাৎ ছোট হাতের অক্ষরেই লেখে ।
- ছোট হাতের অক্ষর দেখতে অনেক পরিষ্কার লাগে ।
- ছোট হাতের অক্ষর লেখাও সহজ ।
ভালো কোড প্র্যাকটিস
<a href="https://kivabe.com/codes/html/">Visit our HTML tutorial</a>
খারাপ কোড প্র্যাকটিস
<a HREF="https://kivabe.com/codes/html/">Visit our HTML tutorial</a>
অ্যাট্রিবিউট ভ্যালু কোটেশন এ রাখুন
কোটেশন ছাড়াই অ্যাট্রিবিউট ভ্যালু গুলো কাজ করে, তবে সব সময় নয় । এবং আমরা রিকমেন্ড করবো আপনি সবসময় অ্যাট্রিবিউট ভ্যালু গুলো কোটেশন এর ভেরতে রাখবেন । এর কারন
- ডেভেলপার রা সবসময় কোটেশন এর মধ্যে রাখে ।
- কোটেড ভেলু গুলো পড়তে সহজ হয় ।
- যদি অ্যাট্রিবিউট ভ্যালুতে স্পেস থাকে তবে অবশ্যই কোটেশন এর মধ্যে রাখতে হবে ।
ভালো কোড প্র্যাকটিস
<table class="striped">
খারাপ কোড প্র্যাকটিস
<table class=striped>
খুবই খারাপ কোড প্র্যাকটিস
<table class=table striped>
শেষের উদাহরনে খেয়াল করুন অ্যাট্রিবিউট ভ্যালুর মধ্যে স্পেস আছে এবং এই অবস্থায় যদি থাকে, তাহলে আপনার কোডের অ্যাট্রিবিউট ভ্যালু কাজ করবেনা ।
ছবির ক্ষেত্রে সবসময় alt, width এবং height নির্ধারন করুন
সবসময় ইমেজের ক্ষেত্রে alt অ্যাট্রিবিউট ব্যবহার করুন। অ্যাট্রিবিউট টি দরকার করান কোন করানে ইমেজ টি লোড না হলে alt অ্যাট্রিবিউট ভ্যালুটি ওয়েব পেজে দেখায়।
একই ভাবে সবসময় ছবির ক্ষেত্রে width এবং height অ্যাট্রিবিউট ও ডিফাইন করতে হয় । এটি ছবির ঝাকুনি থামায় কারন ছবিতে ওয়াইড ও হাইড সেট করা না থাকলে শুরুতে ছবির জন্য কোন জায়গা ওয়েব ব্রাউজারে থাকেনা । কিন্তু ইমেজ টি লোড হলে সে জায়গা করে নেয় এবং ওয়েব পেজ ঝাকুনি খায় ।
ভালো কোড প্র্যাকটিস
<img src="flower.jpg" alt="Flower" width="500" height="333">
খারাপ কোড প্র্যাকটিস
<img src="flower.jpg">
স্পেস এবং সমান সাইন
এইচটিএমএল সমান চিহ্নের চারপাশে ফাঁকা স্থান অনুমতি দেয়। তবে স্পেস না দিলেই বালো দেখায় এবং সাধারনত এটাই করা হয় ।
ভালো কোড প্র্যাকটিস
<link rel="stylesheet" href="styles.css">
খারাপ কোড প্র্যাকটিস
<link rel = "stylesheet" href = "styles.css">
লম্বা কোডের লাইন না লেখাই ভালো
এইচটিমএল কোড এডিটর ব্যবহার করার সময় আমরা সাধারনত ডান থেকে মাবে স্ক্রল করিনা। তাই কোডের লাইন গুলোও লম্বা করা ঠিক হবেনা কেননা তা পড়তে কষ্ট হবে ।
কোড ইনডেনশন এবং ফাকা লাইন
কোন করান ছাড়া ফাকা লাইন. স্পেস এবং ইন্ডেনশন ব্যবহার করবেন না ।
রিডেবিলিটি (সহজ পাঠ্য) -র জন্য ফাকা লাইন যোগ করা যেতে পারে বড় কোন কোড ব্লক এর জন্য ।
রিডেবিলিটির জন্য দুটি ফাকা স্পেস দিয়ে ইনডেনশন দিতে পারেন, তবে ট্যাব কী ব্যবহার করবেন না ।
ভালো কোড প্র্যাকটিস
<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. It is the seat of the Japanese government and the Imperial Palace, and the home of the Japanese Imperial Family.</p> </body>
খারাপ কোড প্র্যাকটিস
<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.
It is the seat of the Japanese government and the Imperial Palace,
and the home of the Japanese Imperial Family.
</p>
</body>ভালো টেবিল উদাহরণ
<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>ভালো লিস্ট উদাহরণ
<ul> <li>London</li> <li>Paris</li> <li>Tokyo</li> </ul>
<title> এলিমেন্ট ছেড়ে যাবেন না
এইচটিএমএল এ <title> এলিমেন্ট অবশ্যই ব্যবহার করতে হবে ।
সার্চ ইন্জিন অপটিমাইজেশন (SEO) এর জন্য ওয়েব পেজের টাইটেল খুবই জরুরী। সার্চ ইন্জিনের এলগরিদম দ্বারা ওয়েব পেজের টাইটেল ব্যবহৃত হয় যখন সার্চ ইন্জিন গুলো ওয়েব পেজ লিস্টিং করে।
<title> এলিমেন্ট টিঃ
- ওয়েব ব্রাউজারের টুলবারে টাইটেল দেখায়
- যখন ওয়েব পেজ টি ফেবারিট এ যোগ করা হয়, তখন টাইটেল ব্যবহৃত হয় ।
- সার্চ ইন্জিনের রেজাল্ট এ পেজের টাইটেল ডিফাইন করে
তাই, চেষ্টা করুন যতটা সম্ভব সঠিক এবং অর্থবহ টাইটেল ব্যবহার করার
<title>HTML Style Guide and Coding Conventions</title>
এম্পটি এইচটিএমএল এলিমেন্ট ক্লোজ করতে হবে ?
এটি ঐচ্ছিক যে আপনি Empty HTML Element গুলো ক্লোজ করবেন কিনা ।
অনুমোদিত
<meta charset="utf-8">
এটিও অনুমোদিত
<meta charset="utf-8" />
আপনার ওয়েব পেজটি যদি XML/XHTML সফ্টওয়ার দ্বারা এক্সেস করা হয়ে থাকে, তাহলে slash (/) ব্যবহার করে ক্লোজ করতে হবে কারন XML এবং XHTML এ এটি লাগে ।
lang Attribute
সবসময় <html> ট্যাগ এর ভেতরে lang attribute টি ব্যবহার করা উচিত যা কিনা ওয়েব পেজের ভাষা ঠিক করে দেয় । এটি সার্চ ইন্জিন এবং ওয়েব ব্রাউজার কে ওয়েব পেজের ভাষা সম্পর্কে ধারনা দেয় ।
<!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
ওয়েব ডকুমেন্টের মুল বিষয় এর যথাযথ ব্যাখ্যা ও সার্চ ইন্জিনে ইনডেক্সিং এর জন্য ওয়েব পেজে মেটা ডাটা খুব প্রয়োজন। মেটা ডাটার মাধ্যমে ওয়েব পেজের শুরুতেই character encoding <meta charset=”charset”> প্রকাশ করতে হয় ।
<!DOCTYPE html> <html lang="en-us"> <head> <meta charset="UTF-8"> <title>Page Title</title> </head>
Viewport Setting
viewport হচ্ছে ব্যবহার কারিরা যে অংশ টি দেখতে পায় সেই অংশ টি । এটি ডিভাইস ভেদে ভিন্য ভিন্য রকমের হয়। viewport কে ও meta ট্যাগ এর মাধ্যমে প্রকাশ করা হয় । নিচের মতো করে ।
<meta name="viewport" content="width=device-width, initial-scale=1.0">
ভিউপোর্ট সেটিং নিয়ে বিস্তারিত আলোচনা করা আছে রেসপনসিভ ওয়েব ডিজাইন এ ।
HTML Comments
একটি লাইনে সংক্ষিপ্ত মন্তব্য লেখা উচিত, নিচের মতোঃ
<!-- This is a comment -->
একাধিক লাইনের বিস্তৃত মন্তব্যগুলি এইভাবে লেখা উচিতঃ
<!-- This is a long comment example. This is a long comment example. -->
বড় কমেন্টের ক্ষেত্রে যদি ২ টি স্পেস দিয়ে ইনডেন্ট দেয়া হয়, তাহলে দেখতে শুবিধা হয়।
Style Sheets
স্টাইল শিটের সাথে লিঙ্ক করার জন্য সাধারণ সিনট্যাক্স ব্যবহার করুন (type অ্যাট্রিবিউটি এখন আর লাগেনা)
<link rel="stylesheet" href="styles.css">
সংক্ষিপ্ত সিএসএসের নিয়মগুলি সংক্ষেপে লেখা যেতে পারে:
p.box{font-family:Verdana;font-size:16px;}
দীর্ঘ সিএসএসের নিয়মগুলি একাধিক লাইনে লেখা উচিত:
body {
background-color: BurlyWood;
font-family: "Arial Black", Helvetica, sans-serif;
font-size: 16px;
color: black;
}- যে লাইনে সিলেক্টর আছে, সেই লাইনে ওপেনিং ব্রাকেট { দিন ।
- ওপেনিং ব্রাকেট { এর সামনে এবং সিলেক্টর এর মাঝে একটি স্পেস দিন ।
- সিএসএস রুল গুলোতে দুটি স্পেস দিন ।
- প্রতিটি প্রপার্টি ভেলুর পর সেমিকলন ; দিন ।
- যদি প্রপার্টি ভেলুতে স্পেস থাকে, তাহলে সেগুলকে কটেশন এর মধ্যে নিন ।
- শেষে একটি নতুন লাইনে ক্লোজিং ব্রাকেট } দিন ।
Loading JavaScript
এক্সটার্নাল স্ক্রিপ্ট লোড করার জন্য সিমপল সিনটেক্স ব্যবহার করুন (type অ্যাট্রিবিউটি এখন আর লাগেনা)
<script src="myscript.js">
JavaScript দিয়ে HTML এলিমেন্ট এক্সেস করা
JavaScript কেস সেনসেটিভ এবং অপর দিকে HTML কেস ইনসেনসেটিভ, অর্থাৎ ছোট হাত কিংবা বড় হাতের মিশ্রন হলেও আউটপুট একই রকম হয় ।
নিচের JavaScript statement দুটি আলাদা ফলাফল দেবে
getElementById("Demo").innerHTML = "Hello";
getElementById("demo").innerHTML = "Hello";আমরা যখন জাভাস্ক্রিপ্ট শিখবো, তখন বিষয়টি ক্লিয়ার হবে ।
লোয়ার কেস ফাইল নেম
ওয়েব পেজে বিভিন্য ধরনের মিডিয় ফাইল ব্যবহার হয় । আবার ওয়েব পেজের কোড গুলোও ফাইলে থাকে ।
বেশির ভাগ ওয়েব সার্ভার ই এখন Apache, Unix ভিত্তিক । এবং এই সার্ভার গুলো কেস সেনসেটিভ ।
তাই এপাচি/লিনাক্স সাভারে আপনি যদি Logo.png ফাইল রাখেন এবং সেটিকে কল করেন নিচের মতো করে
<img src="logo.png" alt="logo">
ছবিটি ওয়েবে লোড হবেনা । কারন কেস সেনসেটিভিটি ।
তাই সবসময় ছোট হাতের ফাইল নেম ব্যবহার করাই ভালো, কারনঃ
- আপনি যদি ছোট ও বড় হাতের মিশ্রন ঘটিয়ে ফাইন নেম দেন, কল করার সময় খুব সাবধানে ঠিক সেই রকম ভাবেই লিখতে হবে ।
- যদি কখনও সার্ভার বদল করেন, তাহলে ছোট ও বড় হাতের মিশ্রনের জন্য আগের সার্ভারে কাজ করলেও নতুন সার্ভারে নাও চলতে পারে এবং এ কারনে আপনার পুরো সাইট ই বন্ধ হয়ে যেতে পারে ।
ফাইল এক্সটেনশন
ফাইল এক্সটেনশন গোলও ছোট হাতের লেখা ভালো ।
সব এইচটিএমএল ফাইল গুলো .html হবে ( .htm ও সাপোর্ট করে )
CSS File গুলোর ফাইল এক্সটেনশন হবে .css
JavaScript File গুলোর ফাইল এক্সটেনশন হবে .js
.htm ও .html এর মধ্যে কি পার্থক্য আছে ?
এ দুটোর মধ্যে কোন ফার্থক্য নেই । আপনি HTML ফাইল গুলোর এক্সটেনশন .htm কিংবা .html যে কোন একটি ই ব্যবহার করতে পারেন । দুটোই যে কোন ওয়েব ব্রাউজার ও ওয়েব সার্ভারে সাপোর্ট করে ।
ডিফল্ট ফাইল নেম
যখন URL এর শেষে কোন ফাইল নেম দেয়া থাকেনা (যেমন https://kivabe.com/codes/) তখন সার্ভার ডিফল্ট ফাইল নেম index.htm, index.html, default.htm কিংবা default.html এর যে কোন একটি খোজে এবং সেগুলোর যে কোন একটি পেলে সার্ভার ওপেন করে দেয় ওয়েব ব্রাউজারে।
যদি আপনার সার্ভার ডিফল্ট ভাবে শুধু index.html সাপোর্ট করে তবে আপনাকে অবশ্যই index.html ফাইল সার্ভারে তৈরি করে রাখতে হবে ।
তবে সার্ভার কনফিগার করার সময় ডিফল্ট ফাইল নেম ঠিক করে দেয়া যায় ।