X

X

X

HTML5 স্টাইল গাইড এবং কোড লিখার নিয়মকানুন


HTML Coding এর নিয়মকানুন

অনেক সময় ওয়েব ডেভেলপাররা কোডিং এর আদর্শ নিয়ম কানুন মানেন না। তবে ২০০০ থেকে ২০১০ এ অনেক ডেভেলপার HTML থেকে XHTML এ কোড লেখা শুরু করেছেন।
XHTML এ ডেভেলপাররা “well-formed” code লিখতে বাধ্য।


Smart হোন এবং ভবিষ্যতের জন্য নিরাপদ কোড লিখুন

সঠিকভাবে কোড লিখলে এটি সবার জন্য বোঝার ক্ষেত্রে বুঝতে সুবিধাজনক হয়। এমন হতে পারে আপনার HTML কোড কোনো XML reader এ ইন্টারপ্রেট বা পড়ার প্রয়োজন হতে পারে। সেক্ষেত্রে যদি আপনার কোড XHTML এ লিখা হয় তবে XML reader খুব সহজে এটি পড়তে পারবে। নাহলে অনাকাঙ্খিত ভুল হতে পারে।

সবসময় আপনার কোড সুন্দর, পরিষ্কার এবং সুগঠিতভাবে তৈরি করুন।

সঠিক Document Type ব্যবহার করুন

সবসময় document type কে সবার প্রথমে লিখবেন।

<!DOCTYPE html>

যদি ছোট হাতের অক্ষরে লিখতে চান তবে নিচের উদাহরণটি অনুসরণ করুন।

<!doctype html>

ইলামেন্টের নাম ছোটো হাতের অক্ষরে লিখবেন

HTML5 ইলামেন্টের নাম ছোটো কিংবা বড় হাতের অক্ষরে লিখা যায়। তবে অধিকাংশ ডেভেলপারদের মতে ছোটো হাতের অক্ষরে লিখা ভালো এবং সুবিধাজনক।
সেই কোডারে-এর সম্পূর্ণ কোড ছোটো হাতের অক্ষরে লিখা হয়েছে।

মনে রাখবেন-

  • ছোটো এবং বড় হাতের অক্ষরের মিশ্রণে ইলামেন্ট নাম লিখা ঠিক নয়।
  • ডেভেলপাররা সাধারণত ছোটো হাতের অক্ষরে ইলামেন্টের নাম লিখেন।
  • ছোটো হাতের অক্ষরে লিখা কোড দেখেতে সুন্দর এবং পরিষ্কার পরিচ্ছন্ন।
  • ছোটো হাতের অক্ষরে কোড লিখা তুলনামূলক সহজ।

ভুল:

<SECTION>
<p>This is a paragraph.</p>
</SECTION>

মারাত্মক ভুল:

<Section>
<p>This is a paragraph.</p>
</SECTION>

সঠিক:

<section>
<p>This is a paragraph.</p>
</section>

সব HTML Element কে বন্ধ (Close) করবেন

HTML5 এ সব ইলামেন্টকে বন্ধ করার প্রয়োজন হয় না। যেমন, <p> ইলামেন্ট।

তবে আমাদের এবং পৃথিবীর অনেক নামীদামী ডেভেলপারের পরামর্শ হচ্ছে, অবশ্যই সব ইলামেন্টকে বন্ধ করা উচিৎ।

ভুল:

<section>
<p>This is a paragraph.
<p>This is a paragraph.
</section>

সঠিক:

<section>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</section>

Empty HTML Element গুলোকেও বন্ধ করবেন

HTML5 এ Empty HTML Element গুলোকে বন্ধ করা ঐচ্ছিক।

অনুমোদিত:

<meta charset=”utf-8″>

এটাও অনুমোদিত:

<meta charset=”utf-8″ />

তবে XML এবং XHTML closing slash (/) ব্যবহার করা বাধ্যতামূলক। যদি XML সফওয়্যার দিয়ে আপনার কোডকে পড়ার প্রয়োজন হয়, তবে অবশ্যই closing slash ব্যবহার করবেন।


Attribute এর নাম ছোটো হাতের অক্ষরে লিখবেন

HTML5 এ ছোটো এবং বড় হাতের অক্ষরে attribute এর নাম লিখা সমর্থিত।

তবে আমাদের পরামর্শ হচ্ছে বরাবরের মতো অবশ্যই ছোটো হাতের অক্ষরে লিখবেন:

ভুল:

<div CLASS=”menu”>

সঠিক:

<div class=”menu”>

Attribute এর মানকে অবশ্যই Quote করবেন

HTML5 এ attribute এর মানকে Quote ছাড়া লিখা সমর্থনযোগ্য।

তবে আমাদের পরামর্শ হচ্ছে অবশ্যই উদ্ধৃতি চিহ্নের (Quote) মধ্যে লিখবেন।

  • Quoted মানগুলো খুব সহজে পঠনযোগ্য।
  • যদি মানগুলোর মধ্যে space থাকে তবে অবশ্যই উদ্ধৃতি চিহ্নের মধ্যে লিখতে হবে।

মারাত্মক ভুল:

এটি সঠিকভাবে কাজ করবে না । কেননা মানগুলোর মধ্যে space আছে:

<table class=table striped>

ভুল:

<table class=striped>

সঠিক:

<table class=”striped”>

Image ইলামেন্টের Attribute

image ইলামেন্টে অবশ্যই “alt” attribute যুক্ত করবেন। এটি গুরুত্বপূর্ণ কেননা যদি কোনো কারণে ওয়েব পেজে ছবিটি লোড না হয়, তবে alt এর মান তার বদলে উপস্থাপিত হবে।

ভুল:

<img src=”html5.gif”>

সঠিক:

<img src=”html5.gif” alt=”HTML5″ style=”width:128px;height:128px”>

Space এবং সমান চিহ্ন

HTML5 এ সমান চিহ্নের দুপাশে space ব্যবহার সমর্থিত। কিন্তু স্পেস ছাড়া পড়া সুবিধাজনক।

ভুল:

<link rel = “stylesheet” href = “styles.css”>

সঠিক:

<link rel=”stylesheet” href=”styles.css”>

দীর্ঘ Code Line লিখবেন না

HTML কোড কখনই খুব দীর্ঘ করে লিখবেন না। ৮০ অক্ষরের বেশি হলে লাইনটিকে ভেঙে পরের লাইনে লিখবেন।


Blank Line এবং Indentation

কোনো কারণ ছাড়া blank line লিখবেন না। তবে পড়ার সুবিধার জন্য দীর্ঘ এবং লজিক্যাল কোড ব্লককে পৃথক করার জন্য লাইন ব্রেক blank line ব্যবহার করতে পারেন। সহজে পড়ার জন্য দুটি বা চারটি স্পেস ব্যবহার করবেন। ট্যাব কী ব্যবহার করবেন না।

অপ্রয়োজনীয়:

<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 এর উদাহরণ:

<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>

List এর উদাহরণ:

<ol>
<li>London</li>
<li>Paris</li>
<li>Tokyo</li>
</ol>

<html> এবং <body> বাদ দিয়ে কোড?

HTML5 standard এ <html> tag এবং <body> tag বাদ দিয়ে কোড লিখা যায়।

নিচের কোডটিও HTML5 এ সঠিক:

Code Example

<!DOCTYPE html>
<head>
  <title>Page Title</title>
</head>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

কিন্তু বাস্তবে <html> এবং <body> tag কে বাদ দেওয়া ঠিক নয়।

<html> ইলামেন্ট হচ্ছে পুরো পেজের মূল। এটিতে পেজে ব্যবহৃত ভাষা উল্লেখ্য করা উচিৎ:

<!DOCTYPE html>
<html lang=”en-US”>

স্ক্রিন রিডার এবং সার্চ ইঞ্জিনের জন্য পেজে ব্যবহৃত ভাষা উল্লেখ্য করা খুব গুরুত্বপূর্ণ।

<html> অথবা <body> বাদ দিলে কোনো কোনো DOM এবং XML software সঠিকভাবে কাজ করবে না। আবার পুরোনো ব্রাউজারে পেজটি সঠিকভাবে উপস্থাপিত নাও হতে পারে।


<head> বাদে কোড?

HTML5 standard এ <head> tag কেও বাদ দিয়ে কোড লিখা যায়।

সাধারণভাবে ব্রাউজারা সব ইলামেন্টকে <body> এবং <head> ইলামেন্ট আগে উপস্থাপণ করবে। <head> tag ব্যবহার না করে কিছু জটিলতা কমানো সম্ভব:

Code Example

<!DOCTYPE html>
<html>
<title>Page Title</title>

<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>

</html>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


তবে <head> tag বাদ দেওয়া ঠিক না।


Meta Data

<title> element HTML5 এ ব্যবহার করা বাধ্যতামূলক। সবসময় অর্থবহ টাইটেল ব্যবহার করা উচিৎ।

<title>HTML5 Syntax and Coding Style</title>

সঠিকভাবে interpretation এবং সার্চ ইঞ্জিন দ্বারা ইন্ডেক্সিং সঠিকভাবে করার জন্য ভাষা এবং এনকোডিং উল্লেখ্য করা প্রয়োজন।

<!DOCTYPE html>
<html lang=”en-US”>
<head>
<meta charset=”UTF-8″>
<title>HTML5 Syntax and Coding Style</title>
</head>

Viewport সেট করবেন

HTML5 <meta> tag ব্যবহার করে ভিউপোর্ট কন্ট্রোল করা যায়। ভিউপোর্ট বলতে ব্রাউজারের ভিজিবল এরিয়াকে বোঝায়।

প্রতিটি ওয়েবপেজের <meta> viewport element কে ব্যবহার করা উচিৎ।

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

<meta> viewport element দিয়ে ব্রাউজারকে নির্দেশনা দেওয়া হয়, কিভাবে পেজটি ব্রাউজারে স্কেলিং হবে।

width=device-width দিয়ে ব্রাউজারে স্ক্রিনের প্রস্থকে দৃশ্যমান এরিয়া হিসেবে বিবেচনা করার নির্দেশ দেয়।

initial-scale=1.0 দিয়ে প্রাথমিক জুম লেভেল সেট করা হয়।

নিচে ভিউপোর্ট সহ এবং ভিউপোর্ট ছাড়া উদাহরণ দেওয়া হলো।

Tip: যদি ফোন দিয়ে ব্রাউজ করে থাকেন তবে নিচের লিংকে ক্লিক করে বিস্তারিত জানতে পারবেন।

 


HTML Comment

ছোটো কমেন্টগুলোকে এক লাইনে লেখা উচিৎ।

<!– This is a comment –>

যদি অধিক লাইনের কমেন্ট হয়ে থাকে তবে নিচের মত লিখা উচৎ:

<!–
This is a long comment example. This is a long comment example.
This is a long comment example. This is a long comment example.
–>

Style Sheet এর ব্যবহার

স্টাইল শিট লিংক করার জন্য সহজ কোড ব্যবহার করুন।

<link rel=”stylesheet” href=”styles.css”>

ছোটো কোডকে এক লাইনে লিখা যায়।

p.intro {font-family: Verdana; font-size: 16em;}

বড় কোডকে একাধিক লাইনে লিখা উচিৎ।

body {
background-color: lightgrey;
font-family: “Arial Black”, Helvetica, sans-serif;
font-size: 16em;
color: black;
}


HTML এ JavaScript লোড করার নিয়ম

সিম্পল সিনট্যাক্স ব্যবহার করবেন।

<script src=”myscript.js”>

JavaScript দিয়ে HTML Element কে Access করা

অপরিচ্ছন্ন স্টাইল ব্যবহার করলে জাভাস্ক্রিপ্ট এ ভুল হতে পারে। নিচের উদাহরণটি লক্ষ্য করুন।

Code Example

<script>
// Only paragraph 2 will be overwritten
document.getElementById("demo").innerHTML = "HELLO.";
</script>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


File এর নাম ছোটো হাতের অক্ষরে লিখুন

কিছু কিছু ওয়েব সার্ভার যেমন, Apache, Unix ছোটো এবং বড় হাতের অক্ষরকে আলাদা হিসেবে বিবেচনা করে । কাজেই “london.jpg” ও “London.jpg” একই ফাইল নয়।


File Extension সমূহ

HTML এর .html অথবা .htm extension থাকা উচিৎ।

CSS ফাইলের .css extension থাকা উচিৎ।

JavaScript এর .js extension থাকা উচিৎ।


.htm এবং .html এর মধ্যে পার্থক্য

.htm এবং .html এর মধ্যে কোনো পার্থক্য নেই। যেকোনো একটি ব্যবহার করা যেতে পারে।


Technical পার্থক্য

যখন কোনো URL এ ফাইলের নাম থাকে না তখন সার্ভার ডিফল্ট ফাইলনেম রিটার্ন করে। কমন ফাইল নামগুলো হলো index.html, index.htm, default.html, এবং default.htm ।

যদি আপনার সার্ভারে শুধুমাত্র “index.html” কে ডিফল্ট ফাইল নাম হিসেবে সেট করা হয় , তবে ফাইলের নাম অবশ্যই “index.html” হবে, “index.htm.” নয়।

তবে সার্ভারে একাধিক ডিফল্ট ফাইল নাম সেট করে রাখা যায়।