এক্সএইচটিএমএল (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 নির্দেশ করতে হবে। ওয়েব ডকুমেন্টে <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" />
1. প্রতিটি পেজের প্রথম লাইনের XHTML <! DOCTYPE> যুক্ত করতে হবে!
2. সকল ওয়েব পেজের HTML এলিমেন্টে একটি xmlns অ্যাট্রিবিউট যোগ করতে হবে,
3. সকল এলিমেন্টের নাম ছোট হাতের অক্ষরে পরিবর্তন করতে হবে,
4. সকল খালি বা empty এলিমেন্টে ক্লোজিং ট্যাগ বা ব্যাকস্লাশ ব্যবহার করে বন্ধ করতে হবে,
5. সকল অ্যাট্রিবিউটের নাম ছোট হাতের অক্ষরে পরিবর্তন করতে হবে,
6. সকল অ্যাট্রিবিউটের মান কোটেশনের("") মধ্যে রাখতে হবে।
এইচটিএমএল থেকে এক্সএইচটিএমএল এ রূপান্তর সম্পর্কে জানতে W3C এর HTML and XHTML Techniques for WCAG 2.0 ওয়েব পেজটি ব্রাউজ করুন।
কোন এইচটিএমএল ডকুমেন্ট পরীক্ষা করতে হলে W3C Validator ব্যবহার করা যায়। যে এইচটিএমএল ডকুমেন্ট পরীক্ষা করতে হবে সেই ওয়েব পেজের URL নিচের বক্স এ লিখে "Validate the page" বাটনে ক্লিক করতে হবে।