XHTML چیست؟

آشنایی با XHTML

به زبان ساده، XHTML همان HTML است که به صورت XML نوشته شده باشد. XHTML مخفف EXtensible HyperText Markup Language و به معنی «زبان امتدادپذیر نشانه‌گذاری فرامتنی» است اما نگذارید این اسم های قلمبه و سلمبه شما را فریب دهد! XHTML دقیقا مانند HTML نوشته می شود اما قوانین سخت گیرانه تری دارد و همانطور که گفتیم انگار می خواهیم HTML را به صورت یک برنامه ی XML بنویسیم. همچنین قابل ذکر است که XHTML توسط تمام مرورگر های مطرح پشتیبانی می شود.

چرا XHTML ؟

بسیاری از صفحات وب دارای HTML بد و غیر معتبر هستند. به طور مثال کد HTML زیر در تمام مرورگر ها کار می کند اما از نظر فنی غیر صحیح است:

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

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

به نظر شما مشکل کد بالا چیست؟

کد بالا در وهله ی اول هیچ DOCTYPE ای ندارد و مشخص نکرده است که از چه ورژنی از HTML استفاده می کند. همچنین تگ <html> را در آخر سند بسته نشده است و هیچ تگ پایانی را مشاهده نمی کنیم. این اتفاق برای تگ های <head> و <h1> و <p> نیز اتفاق افتاده است.

این کد HTML کاملا غیر معتبر و غیر صحیح است اما در اکثر مرورگر های وب بدون مشکل به نمایش در می آید چرا که خود مرورگر ها متوجه اشکالات می شوند و آن ها را در هنگام نمایش تصحیح می کنند. اما این مسئله برای مرورگر های تلفن های همراه اتفاق نمی افتد. معمولا گوشی های هوشمند آنقدر پیشرفته نشده اند که هر نوع خطایی را متوجه شوند و تصحیحش کنند. بنابراین علاوه بر ضربه خوردن از جهت سئو، ممکن است کاربران تلفن های هوشمند نتوانند سایت شما را ببینند و کاربران زیادی را از دست بدهید.

از طرفی XML نوعی زبان نشانه گذاری است که در آن باید قوانین نشانه گذاری را به طور کامل رعایت کرد. همانطور که حدس می زنید ترکیب XML و HTML همان XHTML می باشد.

خصوصیات XHTML

برخی از مهم ترین خصوصیات زبان XHTML از این قرار اند:

تعریف DOCTYPE در این زبان اجباری است
تعریف attribute ای به نام xmlns در <html> اجباری است
وجود داشتن تگ های <html> و <head> و <title> و <body> در یک سند اجباری است
عناصر XHTML باید به صورت کاملا صحیح nest شوند (تو در تو قرار بگیرند)
تمام عناصر XHTML باید همیشه بسته شوند (تگ پایانی)
تمام عناصر XHTML باید با حروف کوچک نوشته شوند
اسناد XHTML باید حتما یک عنصر root (ریشه ای) داشته باشند
نام attribute ها باید همیشه با حروف کوچک نوشته شود
مقدار attribute ها باید در Quotation قرار بگیرد
خلاصه سازی attribute ها غیر مجاز است¹

1- خلاصه سازی attribute ها یعنی مواردی مثل مورد زیر:

اگر به جای نوشتن <"option selected="selected> بنویسید <option selected> می گوییم attribute (در اینجا selected) را خلاصه کرده اید.

می خواهیم این موارد را به صورت خلاصه بررسی کنیم.

اعلام DOCTYPE

یک سند XHTML باید علاوه بر DOCTYPE شامل تگ های <html> و <head> و <title> و <body> باشد.

یک نمونه سند صحیح به این شکل است:

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

DOCTYPE ای که در بالا می بینید، نحوه ی اعلام DOCTYPE به عنوان XHTML است.

تو در تو بودن (nesting)

در زبان HTML بعضا می توانیم اشتباها عناصر را nest کنیم:

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

در این کد تگ های پایانی جا به جا بسته شده اند.

اما در XHTML باید کاملا صحیح nest شوند:

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

تگ های پایانی

در HTML این کد غلط است:

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

و این حالت صحیح است:

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

حتی تگ هایی که در HTML تگ پایانی ندارند باید در XHTML بسته شوند. در HTML این تگ ها به این صورت هستند:

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

اما در 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>

Attribute ها

کوچک بودن حروف برای attribute ها نیز صدق می کند، بنابراین کد زیر غلط است:

<table WIDTH="100%">

و شکل صحیح آن بدین صورت است:

<table width="100%">

همچنین باید مقدار این attribute ها در quotation باشد. کد زیر غلط است:

<table width=100%>

و شکل صحیح آن بدین صورت است:

<table width="100%">

خلاصه سازی attribute ها نیز غیر مجاز است. به نمونه های صحیح و غلط زیر نگاه کنید.

کد غلط:

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

حالت صحیح آن:

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

کد غلط:

<input type="text" name="lastname" disabled />

حالت صحیح آن:

<input type="text" name="lastname" disabled="disabled" />

سوال: چطور می توانیم از HTML به XHTML مهاجرت کنیم؟

پاسخ: ابتدا باید یک DOCTYPE برای XHTML بنویسید و DOCTYPE قبلی را حذف کنید. سپس attribute ای به نام xmlns را به خودِ عنصر html اضافه کنید. سپس نام تمامی عناصر را با حروف کوچک بنویسید و این کار را با attribute ها نیز انجام دهید. در آخر تگ های خالی (تگ هایی که تگ پایانی ندارند) را ببندید و برای مقادیر attribute ها Quotation قرار دهید.

یک مثال از یک سند XHTML برای شما آورده ام:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title> Strict DTD XHTML Example </title>
</head>
<body>
<p>
Please Choose a Day:
<br /><br />
<select name="day">
<option selected="selected">Monday</option>
<option>Tuesday</option>
<option>Wednesday</option>
</select>
</p>
</body>
</html>

مشاهده ی خروجی در JSBin

با نگاهی به این سند کوتاه متوجه می شوید که تمام موارد بالا در آن رعایت شده است.

امیدوارم از این قسمت نیز لذت برده باشید.