এইচটিএমএল(5) স্টাইল গাইড এবং কোডিং কনভেনশন HTML(5) Style Guide and Coding Conventions

শরিফুল ইসলাম
Job category-Php Coder

এইচটিএমএল কোডিং এর নিয়ম

ওয়েব ডেভেলপাররা এইচটিএমএল এ কোডিং স্টাইল এবং syntax ব্যবহারের ক্ষেত্রে প্রায়ই দ্বিধান্বিত থাকেন।

২০০০ থেকে ২০১০ সালের মধ্যে অনেক ওয়েব ডেভেলপার এইচটিএমএলকে এক্সএইচটিএমএল এ রূপান্তরিত করে।

এক্সএইচটিএমএল দিয়ে ডেভেলপাররা সঠিক এবং সুন্দরভাবে কোডিং লিখতে বাধ্য হয়।

যখন এইচটিএমএল ৫ কোড ভ্যালিডেশন (বৈধ্যতা) নিয়ে আসে তখন এটি আরও সাবলিল হয়।

HTML5 দিয়ে, আপনি আপনার নিজেকে তৈরি করতে পারবেন শ্রেষ্ঠ অনুশীলন, স্টাইল গাইড এবং কোডিং কনভেনশন দ্বারা।

স্মার্ট এবং ভবিষ্যত প্রমান

এইচটিএমএল এ গঠনগত ভাবে কোডিং করলে তা অন্যদের জন্য বুজতে অনেক সহজ হয়।

ভবিষ্যতে এক্সএমএল রিডার এর মত প্রোগ্রাম আপনার এইচটিএমএল পরতে চাইতে পারে।

স্টাইল এ দক্ষতা আনতে হলে স্মার্ট, পরিপাটি, পরিষ্কার, এবং সুগঠিত হতে হবে।

সঠিক ডকুমেন্ট টাইপ

ডকুমেন্ট এর প্রথমে doctype লিখতে হবে

<!DOCTYPE html>

যদি ছোট হাতের অক্ষরে আমরা লিখি

<!DOCTYPE html>

ছোট হাতের এলিমেন্ট (উপাদান) এর নাম লিখতে হবে

উপাদানের নামের ক্ষেত্রে এইচটিএমএল ৫ একসাথে ছোট এবং বড় হাতের লেখাকে গ্রহন করে।

আমরা সবসময় সুপারিশ করি উপাদানের নাম ছোট হাতের অক্ষরে লেখার জন্য।

একসাথে ছোট এবং বড় হাতের অক্ষর মিলে লেখা ভাল নয়।
ডেভেলপারদের ছোট হাতের অক্ষরে লিখতে হবে (এক্সএইচটিএমএল হিসাবে)
ছোট হাতের অক্ষরে লেখা পরিচ্ছন্ন দেখায়
ছোট হাতের অক্ষরে লেখা সহজ।

খারাপ অনুশীলন

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

আরও বেশি খারাপ অনুশীলন

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

সঠিক অনুশীলন

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

সকল এলিমেন্ট (উপাদান) এর সমাপনি বন্ধনী

এইচটিএমএল ৫ এ, সকল এলিমেন্ট এর বন্ধনী সমাপ্ত করার প্রয়োজন নেই। (উদাহরণ <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>

এইচটিএমএল এর ফাকা উপদানগুলোর ট্যাগ সমাপ্ত করা

এইচটিএমএল ৫ এ এই বিষয়টি অপশনাল

এটি গ্রহণযোগ্য

<meta charset="utf-8">

অথবা

<meta charset="utf-8" />

এক্সএইচটিএমএল এবং এক্সএমএল এ স্লাশ চিহ্ন (/) দরকার পরে।

যদি আপনি এক্সএমএল সফটওয়্যারকে পেজ অ্যাক্সেস করার অনুমতি দেন তাহলে, এই চিহ্নকে রেখে দেওয়ােই ভাল।

Attribute এর নাম ছোট হাতের হতে হবে

Attribute নামের ক্ষেত্রে এইচটিএমএল ৫ একসাথে ছোট এবং বড় হাতের লেখাকে গ্রহণ করে।

আমরা সবসময় এর নাম ছোট হাতের অক্ষরে লেখার জন্য সুপারিশ করি ।

একসাথে ছোট এবং বড় হাতের অক্ষর মিলে লেখা ভাল নয়।
ডেভেলপারদের ছোট হাতের অক্ষরে লিখতে হবে (এক্সএইচটিএমএল হিসাবে)
ছোট হাতের অক্ষরে লেখা পরিচ্ছন্ন দেখায়
ছোট হাতের অক্ষরে লেখা সহজ।

ভাল দেখায় না

ভাল দেখায়

উদ্ধৃতি অ্যাট্রিবিউট মান

কোটেশন চিহ্ন ছাড়া attribute এর ভ্যালুকে লেখা এইচটিএমএল ৫ সাপোর্ট করে।

আমরা সবসময় সুপারিশ করি

যদি ভ্যালুতে ফাকা স্থান থাকে তাহলে উদ্ধৃতি চিহ্ন ব্যবহার করতে হবে
ভিন্ন ভিন্ন স্টাইল মিসিয়ে লেখা কখনই ভাল নয়
কোটেশন দেয়া মান পড়া সহজ ।

নিচের কোডটি কাজ করবে না কারন ফাকা স্থান আছে :

<table class=table striped>

এটি কাজ করবে

<table class="table striped">

ইমেজ এট্রিবিউট

সবসময় ইমেজ এর সাথে alt attribute ব্যবহার করতে হবে। কারন যখন ছবি লোড না হবে তখন খুব প্রয়োজনীয়।

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

ইমেজ সাইজ নির্ধারণ করে দেওয়া উচিত কারন ব্রাউজার ইমেজ লোড হওয়ার পূর্বে তার জন্য জায়গা ফাকা রাখে

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

Spaces এবং equal চিহ্ন

ফাকা জায়গা বেশি হলে কোন সমস্যা নেই

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

কিন্তু ফাকা কম হলে তা পরতে সহজ এবং সুবিধার হয়

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

লম্বা কোড লাইন এড়িয়ে চলুন

যখন এইচটিএমএল এডিটর ব্যবহার করা হয় তখন বাম পাস থেকে ডান পাশে স্ক্রল করা এক ধরনের বিরক্তিকর। এইজন্য ৮০ টি ক্যারেক্টার এর লাইন এ লিখতে হবে।

ফাকা line এবং Indentation

কোন কারন ছাড়া ফাকা লাইন করা উচিত নয়।

বড় বড় কোড এর জন্য তা ব্যবহার করা যাবে।

Indentation এর ক্ষেত্রে ট্যাব এর পরিবর্তে ২ টি স্পেস ব্যবহার করতে হবে।

কোন কারন ছাড়া ফাকা জায়গা এবং Indentation ব্যবহার করা উচিত নয়।

প্রয়োজনীয় নেই

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

লিস্ট এর উদাহরণ

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

<html> এবং body ট্যাগ বাদ দেওয়া

এইচটিএমএল ৫ এ <html>এবং <body> ট্যাগ বাদ দেওয়া হয়েছে

এইচটিএমএল ৫ এর ক্ষেত্রে উদাহরণ

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

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

আমরা কখনই বলি না <html>এবং <body> ট্যাগ বাদ দেওয়ার জন্য।

<html> হল ডকুমেন্ট এর রুট। পেজ এর ভাষাকে এর মাঝে নির্দিষ্ট করে দিতে হয়।

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

ল্যাঙ্গুয়েজ ডিক্লায়ার করা এসেম্বিলি অ্যাপলিকেশন (স্ক্রিণ রিডার) এবং সার্চ ইঞ্জিন এর জন্য গুরুত্বপূর্ণ ।

<html>এবং <body> ট্যাগ বাদ দেওয়া DOM এবং এক্সএমএল সফটওয়্যার ক্র্যাশ এর কারণ হতে পারে।

পুরাতন ব্রাউজার (IE9) এরর দেখাতে পারে যদি <body> না ব্যবহার না করা হয়।

<head> ট্যাগ কি বাদ দেওয়া

এইচটিএমএল ৫ এর ক্ষেত্রে এটি ঠিক আছে।

ডিফল্ট ভাবে ব্রাউজার বডি সেকশন এর পূর্বে সকল উপাদান যোগ করে হেড সেকশন এর মধ্যে । সুতরাং <head> ট্যাগ কে বাদ দেওয়া যেতে পারে।

উদাহরণ

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

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

</html>

Meta data

এইচটিএমএল ৫ এ <title> এলিমেন্ট অত্যাবশ্যকীয়। টাইটেলকে যথাসম্ভব অর্থবহ করুন।

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

সঠিকভাবে search engine এ ইনডেক্স করার ক্ষেত্রে ডকুমেন্ট এর মধ্যে ভাষা এবং ক্যারেক্টার encode কে ডিফাইন করে দিতে হবে

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

এইচটিএমএল কমেন্ট

ছোট কমেন্ট এক লাইনে লেকা যেতে পারে। <!–এই খানে লিখতে হবে–>

<!-- 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. This is a long comment example. This is a long comment example.
 -->

লম্বা কমেন্ট একাধিক লাইনে ভেঙ্গে লিখলে বুঝতে সুবিধা হয়।

স্টাইল শিট

Style শিট লিঙ্ক করার ক্ষেত্রে সাধারন syntax ব্যবহার করুন

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

ছোট নিয়ম এক লাইন এ লিখতে হবে

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

বড় নিয়ম কয়েকটি লাইন এ লিখতে হবে

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

ব্রাকেট এর শুরুর আগে একটা স্পেস ব্যবহার করতে হবে,
indentation এ দুইটি স্পেস ব্যবহার করতে হবে,
প্রপার্টি এবং এর ভ্যালুর মাঝে কোলন এর পাশাপাশি একটি স্পেস ব্যবহার করতে হবে,
কমা এবং সেমিকোলন এর পরে একটা স্পেস ব্যবহার করতে হবে,
প্রত্যেক জোড়া প্রপার্টি ভ্যালু এর পরে সেমিকোলন ব্যবহার করতে হবে,
কোটেশন ব্যবহার করতে হবে যদি ভ্যালু এর মাঝে একটা স্পেস থাকে,
৮০ ক্যারেক্টার এর উপরে কোন লাইনে রাখা যাবে না।

যেকোনো ধরনের লেখার ক্ষেত্রে স্পেস এর পরে কমা বা সেমিকোলন যুক্ত করা সাধারন নিয়ম।

এইচটিএমএল এর মধ্যে javascript লোড করা

সাধারন syntax ব্যবহার করে external javascript লোড করা যায়। এর জন্য কোন attribute এর দরকার পরে না।

<script src="myscript.js">

Javascript দিয়ে এইচটিএমএল কে অ্যাক্সেস করা

যদি এইচটিএমএল স্টাইল যদি পরিপাটি না হয় তাহলে javascript এ এরর আসতে পারে। এই দুইটি statement দুই ধরনের ফলাফল দেখাবে

var obj = getElementById("Demo")

var obj = getElementById("demo")

যদি সম্ভব হয় এইচটিএমএল এর উপাদানের সাথে javascript যোগ করার পর উপাদানের একই নাম ব্যবহার করতে হবে।

ফাইল এর নামের ক্ষেত্রে ছোট হাতের অক্ষর ব্যবহার

ফাইল এর নাম করনের ক্ষেত্রে অনেক ওয়েব সার্ভার কেস এর ব্যাপারে সক্রিয় (apache , unix)

london.jpg কখনই London.jpg নামে অ্যাক্সেস হবে না

অন্যান্য ওয়েব সার্ভার যেমন (Microsoft, IIS) খুব বেশি সক্রিয় না

London.jpg কে London.jpg বা london.jpg নামে অ্যাক্সেস করা যাবে।

যদি আপনি বড় ছোট হাতের অক্ষর একসাথে ব্যবহার করেন তাহলে অত্যন্ত সামঞ্জস্যপূর্ণ হতে হবে।

যদি আপনি সংবেদনশীল নয় এমন একটি সার্ভার থেকে সংবেদনশীল এমন একটি সার্ভার এ যান তাহলে ছোট ছোট এরর আপনার ওয়েব পেজকে নষ্ট করে দিতে পারে।

এই সকল সমস্যা থেকে প্রতিকারের জন্য ছোট হাতের অক্ষর ব্যবহার করতে হবে।

File extensions

এইচটিএমএল ফাইল এর এক্সটেনশন হল .html ( বা .htm)

সিএসএস ফাইল এর এক্সটেনশন হল .css

Javascript ফাইল এর এক্সটেনশন হল .js