এইচটিএমএল এবং এক্সএইচটিএমএল - HTML & XHTML


এক্সএইচটিএমএল (XHTML) হল আসলে এইচটিএমএল (HTML) যা এক্সএমএল (XML) হিসেবে লেখা হয়।


এক্সএইচটিএমএল কি?


এক্সএইচটিএমএল কেন ব্যবহার করা হয়?

ইন্টারনেটে এমন অনেক এইচটিএমএল ওয়েব পেজ রয়েছে যাদের গঠনপ্রণালী সঠিক নয়। যদিও এই পেজের কোডগুলো এইচটিএমএলের নিয়ম অনুসরন করে না তারপরও সকল ব্রাউজারে এই কোড গুলো কাজ করে।

উদাহরণ


<html>
  <head>
  <title>This is bad HTML</title>

  <body>
  <h1>Bad HTML
  <p>This is a paragraph
</body>

কোড এডিটর


বর্তমানে ইন্টারনেটে অনেক ব্রাউজার রয়েছে। এদের কিছু ব্রাউজার কম্পিউটারে ব্যাবহার করা হয়, এবং কিছু কিছু ব্রাউজার স্মার্টফোন বা মোবাইল ফোন বা অন্য ছোট ডিভাইসগুলিতে ব্যাবহার করা হয়। ক্ষুদ্রতর ডিভাইস গুলোতে বাবহ্রিত ব্রাউজারে প্রায়ই কোন "ভুল" মার্কআপ ট্যাগ ব্যাখ্যা করার জন্য resources নেই।

এক্সএমএল এমন একটি মার্কআপ ট্যাগের সমন্বিত ওয়েব ভিত্তিক ভাষা যেখানে ডকুমেন্ট সঠিকভাবে চিহ্নিত করা প্রয়োজন অর্থাৎ ওয়েব ডকুমেন্টগুলো ভালভাবে অর্থাৎ নির্ভুল ভাবে গঠিত হতে হবে। এইচটিএমএল এবং এক্সএমএল সমন্বয় করে এক্সএইচটিএমএল তৈরি করা হয়েছে। XHTML বা এক্সএইচটিএমএল হল HTML বা এইচটিএমএল যেটা, এক্সএমএল বা XML হিসাবে ডিজাইন করা হয়েছে।


এইচটিএমএল এবং এক্সএইচটিএমএলের পার্থক্য

ডকুমেন্টের গঠন

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

এক্সএইচটিএমএল এট্রিবিউট


<!DOCTYPE ....> বাধ্যতামূলক

এক্সএইচটিএমএল ওয়েব ডকুমেন্টে অবশ্যই এক্সএইচটিএমএল DOCTYPE নির্দেশ করতে হবে। ওয়েব ডকুমেন্টে <html>, <head>, <title> এবং <body> এলিমেন্ট গুলো অবশ্যই থাকতে হবে এবং <html> ট্যাগের এর সাথে অবশ্যই xmlns এট্রিবিউট ব্যবহার করতে হবে।

আমাদের ডকটাইপ রেফারেন্স টিউটোরিয়াল এ এক্সএইচটিএমএল Doctype সম্পর্কে আরও তথ্য আছে। নিচে এর একটি উদাহরন দেখুন।

উদাহরণ


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Title of document</title>
</head>

<body>
  some content
</body>

</html>

কোড এডিটর



সঠিক ভাবে নেস্টেড হতে হবে

এইচটিএমএল কোডের কোন কোন এলিমেন্ট সঠিকভাবে নেস্টেড না হলেও কাজ করে। যেমন নিচে একটি উদাহরণ দেখুন।

উদাহরণ


<b><i>This text is bold and italic</b></i>

কোড এডিটর


এক্সএইচটিএমএল এ, সকল এলিমেন্ট গুলো অবশ্যই একটি অন্যটির সাথে সঠিকভাবে নেস্টেড হতে হবে। নিচে এর একটি উদাহরণ দেখুন।

উদাহরণ


<b><i>This text is bold and italic</i></b>

কোড এডিটর



এক্সএইচটিএমএলে ক্লোজিং ট্যাগ বাধ্যতামূলক

HTML এ ক্লোজিং ট্যাগ ব্যাবহার করা বাধ্যতামূলক নয়, কিছু কিছু এলিমেন্ট ক্লোজিং ট্যাগ না হলেও ঠিক ভাবে কাজ করে। কিন্তু XHTML এর ক্ষেত্রে সকল ট্যাগের ক্লোজিং ট্যাগ থাকতে হবে। তাই XHTML এর ক্ষেত্রে নিচের উদাহরণটি ভুল।

উদাহরণ


<p>This is a paragraph.
<p>This is another paragraph.

কোড এডিটর


XHTML এর জন্য নিচের উদাহরণটি সঠিক হবে।

উদাহরণ


<p>This is a paragraph</p>
<p>This is another paragraph</p>

কোড এডিটর



এম্পটি এলিমেন্টকে ক্লোজ করা বাধ্যতামূলক

XHTML এর সকল এম্পটি এলিমেন্টকে ব্যাকস্লাশ ব্যবহার করে ক্লোজ করা বাধ্যতামূলক। নিচে একটি উদাহরন দেখুন।

উদাহরণ


A break: <br />
A horizontal rule: <hr />
An image: <img src="happy.gif" alt="Happy face" />

কোড এডিটর



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

এক্সএইচটিএমএল এর এলিমেন্ট গুলো অবশ্যই ছোট হাতের অক্ষরে লিখতে হবে। নিচে এর একটি উদাহরণ দেখুন, যেখানে ভুল ভাবে কোড লিখা হয়েছে।

উদাহরণ


<BODY>
<P>This is a paragraph</P>
</BODY>

কোড এডিটর


নিচে সঠিক পদ্ধতি দেখুন।

উদাহরণ


<body>
<p>This is a paragraph</p>
</body>

কোড এডিটর



এট্রিবিউটের নাম অবশ্যই ছোট হাতের অক্ষরে হবে

এক্সএইচটিএমএল এর এট্রিবিউট গুলোর নাম অবশ্যই ছোট হাতের অক্ষরে লিখতে হয়। নিচে এর একটি উদাহরণ দেখুন, যেখানে ভুল ভাবে কোড লিখা হয়েছে।

উদাহরণ


<table WIDTH="80%">

কোড এডিটর


নিচে সঠিক পদ্ধতি দেখুন।

উদাহরণ


<table width="80%">

কোড এডিটর



এট্রিবিউটের মান কোটেশনের("") মধ্যে রাখা

XHTML এর এট্রিবিউটের মান গুলো অবশ্যই কোটেশনের("") মধ্যে রাখতে হবে। নিচে একটি উদাহরণ দেখুন, যেখানে ভুল ভাবে কোড লিখা হয়েছে।

উদাহরণ


<table width=100%>

কোড এডিটর


নিচে সঠিক পদ্ধতি দেখুন।

উদাহরণ


<table width="100%">

কোড এডিটর



এট্রিবিউট সংক্ষিপ্ত করা নিষিদ্ধ

XHTML এ এট্রিবিউট সংক্ষিপ্ত করা নিষিদ্ধ। নিচে একটি উদাহরণ দেখুন, যেখানে ভুল ভাবে কোড লিখা হয়েছে।

উদাহরণ


<input type="checkbox" name="vehicle" value="car" checked />

কোড এডিটর


নিচে সঠিক পদ্ধতি দেখুন।

উদাহরণ


<input type="checkbox" name="vehicle" value="car" checked="checked" />

কোড এডিটর



HTML থেকে XHTML এ রূপান্তর


1. প্রতিটি পেজের প্রথম লাইনের XHTML <! DOCTYPE> যুক্ত করতে হবে!
2. সকল ওয়েব পেজের HTML এলিমেন্টে একটি xmlns অ্যাট্রিবিউট যোগ করতে হবে,
3. সকল এলিমেন্টের নাম ছোট হাতের অক্ষরে পরিবর্তন করতে হবে,
4. সকল খালি বা empty এলিমেন্টে ক্লোজিং ট্যাগ বা ব্যাকস্লাশ ব্যবহার করে বন্ধ করতে হবে,
5. সকল অ্যাট্রিবিউটের নাম ছোট হাতের অক্ষরে পরিবর্তন করতে হবে,
6. সকল অ্যাট্রিবিউটের মান কোটেশনের("") মধ্যে রাখতে হবে।

এইচটিএমএল থেকে এক্সএইচটিএমএল এ রূপান্তর সম্পর্কে জানতে W3C এর HTML and XHTML Techniques for WCAG 2.0 ওয়েব পেজটি ব্রাউজ করুন।


W3C Validator ব্যবহার

কোন এইচটিএমএল ডকুমেন্ট পরীক্ষা করতে হলে W3C Validator ব্যবহার করা যায়। যে এইচটিএমএল ডকুমেন্ট পরীক্ষা করতে হবে সেই ওয়েব পেজের URL নিচের বক্স এ লিখে "Validate the page" বাটনে ক্লিক করতে হবে।