HTML و XHTML هما لغتان أساسيتان تستخدمان لبناء صفحات الويب، ولكنهما تختلفان في بعض الجوانب
ما هي XHTML؟
XHTML تعني لغة ترميز النص التشعبي القابلة للتمدد (EXtensible HyperText Markup Language)، وهي نسخة أكثر صرامة وتتمسك بمعايير XML من لغة HTML الشائعة.
يمكننا تلخيص ماهية XHTML في النقاط التالية:
- صرامة أكثر: تتبع XHTML قواعد صارمة لغة XML، مثل ضرورة إغلاق جميع العلامات بشكل صحيح واستخدام الأحرف الصغيرة إلزاميًا، مقارنةً بمرونة HTML التي تقبل الاختصارات أحيانًا.
- أساس XML: يتم تعريف XHTML كتطبيق XML، مما يجعلها قابلة للتفسير بشكل أفضل من قبل البرامج والأجهزة المختلفة.
- توافقية عالية: تدعم جميع المتصفحات الرئيسية XHTML إلى جانب HTML.
لماذا ظهرت لغة XHTML؟
1. صرامة أكبر ودقة أعلى:
- لغة XML تتطلب جميع وثائقها أن تكون مكتوبة بشكل صحيح تمامًا (“مشكّلة جيدًا”).
- تم تطوير XHTML لتكون نسخة أكثر صرامة ودقة من HTML، حيث تتبع قواعد XML الصارمة.
- هذا يضمن التوافقية العالية مع مختلف الأجهزة والبرامج، ويقلل من احتمالية حدوث الأخطاء والمشاكل.
2. معالجة صارمة للأخطاء:
- متصفحات الويب غالبًا تتجاهل الأخطاء الصغيرة في صفحات HTML وتحاول عرضها رغم ذلك.
- XHTML لديها معالجة صارمة للأخطاء، بحيث توقف العرض عند وجود خطأ فادح في الكود.
- هذا يساعد المطورين على اكتشاف الأخطاء وتصحيحها بسرعة ودقة أكبر.
3. تكامل أفضل مع لغة XML:
- XHTML محددة كتطبيق لغة XML، مما يجعلها أكثر تكاملًا معها.
- هذا يسهّل استخدام أدوات XML وتقنياتها لمعالجة وتفسير صفحات الويب.
4. مستقبل قديم نسبيا:
- مع تطور HTML5، أصبحت XHTML أقل استخدامًا بشكل تدريجي.
- HTML5 تجمع مزايا كلتا اللغتين مع توفير ميزات حديثة وتفاعلية لمواقع الويب.
أهم الفروقات بين XHTML و HTML
الفرق الرئيسي: XHTML تتبع قواعد صارمة لغة XML، بينما HTML أكثر مرونة وتقبل بعض الاختصارات.
أبرز الفروقات:
- !DOCTYPE: إلزامي في XHTML بينما اختياري في HTML.
- الصفة xmlns في <html>: إلزامية في XHTML وتحدد أن الصفحة تستخدم XHTML، غير موجودة في HTML.
- العناصر الإلزامية: <html>، <head>، <title>، و <body> إلزامية في XHTML بينما في HTML قد لا تكون موجودة كلها.
- تداخل العناصر: يجب أن تكون العناصر متداخلة بشكل صحيح ومغلقّة في XHTML، بينما قد يُتجاهل التداخل غير الصحيح في HTML.
- حروف الأحرف: يجب استخدام الأحرف الصغيرة للعناصر والصفات في XHTML، بينما قد تعمل الأحرف الكبيرة والصغيرة في HTML.
- قيم الصفات: يجب وضع قيم الصفات بين علامات اقتباس (“”) في XHTML، بينما قد تعمل بدونها في بعض الحالات في HTML.
- تصغير الصفات: ممنوع في XHTML، بينما مقبول في HTML لتقليل حجم الكود.
XHTML – أهمية إعلان <!DOCTYPE ….>
يجب أن تحتوي وثيقة XHTML على إعلان <!DOCTYPE ….> صحيح وفعّال. وهذا يفرق بشكل كبير عن HTML حيث إعلان <!DOCTYPE> اختياري ويمكن تجاهله في بعض الحالات.
إلى جانب إعلان <!DOCTYPE>، يجب أن تحتوي وثيقة XHTML على العناصر الأساسية التالية:
<html>: العنصر الجذري الذي يمثل الصفحة بأكملها.<head>: يحتوي على معلومات ميتا (فوق الصفحة) مثل العنوان والترميز والروابط الخارجية.<title>: يحدد عنوان الصفحة الذي يظهر في شريط العنوان بالمتصفح.<body>: يضم المحتوى الرئيسي الذي يراه المستخدم على الصفحة.
بالإضافة إلى عناصر هذه العناصر، يجب إلحاق الصفة xmlns على العنصر <html> لتحديد مساحة الأسماء XML للوثيقة.
مثال:
هذا مثال على وثيقة XHTML تحتوي على الحد الأدنى من العناصر المطلوبة:
<html xmlns="http://www.[Your Domain].com/xhtml">
<head>
<title>Title of document</title>
</head>
<body>
some content here...
</body>
</html>
XHTML – تداخل العناصر بشكل صحيح
في XHTML، يجب أن تتداخل العناصر داخل بعضها بشكل صحيح، تمامًا كما يظهر في المثال الصحيح التالي:
<b><i>Some text</i></b>خطأ
<b><i>Some text</b></i>
XHTML – غلق العناصر إلزاميًا
تتميز XHTML بضرورة إغلاق جميع العناصر بشكل صحيح، تمامًا كما يحدث في المثال الصحيح التالي:
<p>This is a paragraph</p>
<p>This is another paragraph</p>خظأ
<p>This is a paragraph
<p>This is another paragraphإغلاق العناصر الفارغة إلزاميًا في XHTML
يتميز XHTML بتصميم صارم يتطلب إغلاق جميع العناصر، بما في ذلك العناصر الفارغة التي لا تحتوي على محتوى داخلي. دعونا نرى كيف يتم الإغلاق الصحيح في المثال التالي:
A break: <br />
A horizontal rule: <hr />
An image: <img src="happy.gif" alt="Happy face" />
خطأ
A break: <br>
A horizontal rule: <hr>
An image: <img src="happy.gif" alt="Happy face">
يجب كتابة أسماء العناصر بأحرف صغيرة في XHTML
تتميز لغة XHTML بضرورة كتابة جميع أسماء العناصر بأحرف صغيرة، تمامًا كما يظهر في المثال الصحيح التالي:
<body>
<p>This is a paragraph</p>
</body>
خطأ
<BODY>
<P>This is a paragraph</P>
</BODY>
أسماء الصفات بأحرف صغيرة إلزامية في XHTML
تتميز لغة XHTML بضرورة كتابة جميع أسماء الصفات بأحرف صغيرة، تمامًا كما يظهر في المثال الصحيح التالي:
<a href="https://menoufy.me/">Visit our Home page</a>
خطأ
<a HREF="https://menoufy.me/">Visit our Home page</a>
ضرورة وضع قيم الصفات بين علامات اقتباس في XHTML
تتميز لغة XHTML بضرورة وضع قيم جميع الصفات داخل علامات اقتباس (مفردة '' أو مزدوجة "") لضمان تفسيرها ومعالجتها بشكل صحيح من قبل المتصفحات والأجهزة. دعونا نرى تطبيق هذه القاعدة في المثال الصحيح التالي:
<a href="https://menoufy.me/">Visit our Home page</a>
خطأ
<a href=https://menoufy.me/>Visit our Home page</a>
منع اختصار الصفات في XHTML
في XHTML، لا يُسمح باختصار الصفات، والمعروف أيضًا باسم “التقليل” (attribute minimization). يجب عليك دائمًا تحديد كل صفة بقيمتها كاملة، حتى لو كانت القيمة صحيحة أو متوقعة ضمنيًا. دعونا نرى كيف يتم تطبيق ذلك في المثال الصحيح التالي:
<input type="checkbox" name="vehicle" value="car" checked="checked" />
<input type="text" name="lastname" disabled="disabled" />
خطأ
<input type="checkbox" name="vehicle" value="car" checked />
<input type="text" name="lastname" disabled />
