وثائق HTML قابلة للتشغيل: Doctype

Q: هل doctype حساس لحالة الأحرف؟

لا. و و كلها بالمعنى نفسه. الأسلوب الأشيع هو DOCTYPE بأحرف كبيرة مع html بأحرف صغيرة.

Q: كيف أعرف إن كانت الصفحة في وضع quirks؟

افتح وحدة التحكم في المتصفح ونفّذ document.compatMode. القيمة "CSS1Compat" تعني الوضع القياسي (أو وضع quirks المحدود)، و"BackCompat" تعني وضع quirks.

ما هو `<!DOCTYPE html>`

<!DOCTYPE html> هو تصريح نوع المستند: السطر الأول في ملف HTML، قبل الوسم <html>. يقول للمتصفح «هذا مستند HTML حديث»، فيستجيب المتصفح بعرض الصفحة في الوضع القياسي (standards mode) متّبعًا مواصفات HTML وCSS الحالية.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>My page</title>
</head>
<body>
  <h1>Hello</h1>
  <p>The doctype is the very first line of this file.</p>
</body>
</html>

هذا السطر وحده هو doctype الخاص بـ HTML5 كاملًا. ليس له وسم إغلاق ولا يوضع داخله شيء آخر.

قواعد الصيغة

يأتي أولًا. لا يسبقه إلا المسافات البيضاء والتعليقات. أي نص أو وسم قبل doctype يجعل المتصفح يتجاهله.
لا يتأثر بحالة الأحرف. <!DOCTYPE html> و<!doctype html> متطابقان. اختر أسلوبًا واحدًا والتزم به.
ليس عنصرًا. لا يوجد </!DOCTYPE>، ولا يمكنك إضافة class أو أي سمة أخرى إليه.
الكلمة بعد DOCTYPE يجب أن تكون html. <!DOCTYPE html5> ليس إصدارًا أحدث، بل يعامل المتصفح الصفحة كأنها بلا doctype صالح.
واحد لكل مستند. الصفحات المبنية من عدة ملفات (قوالب، ملفات مضمّنة) تُخرج مع ذلك doctype واحدًا في أعلى ملف HTML النهائي.

الوضع القياسي ووضع quirks

للمتصفحات ثلاثة أوضاع عرض، وdoctype هو الذي يختار أحدها:

الوضع	يُفعَّل بواسطة	ما الذي يتغير
الوضع القياسي	`<!DOCTYPE html>` وأنواع doctype الحديثة الأخرى	كل شيء يتبع المواصفات الحالية
وضع quirks المحدود	HTML 4.01 Transitional أو Frameset مع رابط، وXHTML 1.0 Transitional أو Frameset	قريب جدًا من القياسي: تختلف قاعدة واحدة لارتفاع السطر فقط، فالصورة الوحيدة في سطرها (غالبًا داخل خلية جدول) لا تظهر تحتها فجوة
وضع quirks	غياب doctype، أو خطأ إملائي فيه، أو بعض الأنواع القديمة مثل HTML 4.01 Transitional بلا رابط	يحاكي متصفحات التسعينيات: الارتفاعات بالنسبة المئوية وحجم نص الجداول وارتفاعات الأسطر تتصرف بشكل مختلف

وُجد وضع quirks كي تظهر الصفحات المكتوبة قبل معايير الويب كما رآها أصحابها. أما في الصفحات الجديدة فلا يجلب إلا المشاكل: height: 100% يعمل في صفحة ولا يعمل في أخرى، أو جداول تتجاهل حجم الخط الذي حددته، وهذه أعراض معروفة لغياب doctype.

معاينات المحرر في هذه الصفحة تعرض دائمًا في الوضع القياسي، لذلك حذف doctype هناك لن يُظهر لك وضع quirks. أداة الفحص التالية تستخدم DOMParser، وهو يطبّق القواعد نفسها التي تتبعها المتصفحات عند تحميل ملف. عدّل doctype في مربع النص وسيتحدّث الوضع:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Doctype checker</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    textarea { width: 100%; height: 70px; font: 14px monospace; }
    #mode { font-weight: bold; padding: 8px 12px; border-radius: 6px; background: #e5e7eb; }
  </style>
</head>
<body>
  <label for="src">First line of a document:</label>
  <textarea id="src"><!DOCTYPE html></textarea>
  <p>Rendering mode: <span id="mode"></span></p>
  <script>
    const src = document.getElementById('src');
    const mode = document.getElementById('mode');
    function check() {
      const doc = new DOMParser().parseFromString(src.value + '<p>x</p>', 'text/html');
      const standards = doc.compatMode === 'CSS1Compat';
      mode.textContent = standards ? 'standards (CSS1Compat)' : 'quirks (BackCompat)';
      mode.style.background = standards ? '#dcfce7' : '#fef3c7';
    }
    src.addEventListener('input', check);
    check();
  </script>
</body>
</html>

جرّب حذف السطر، أو كتابة <!DOCTYPE html5>، أو وضع كلمة قبل doctype: كل واحدة من هذه تحوّل النتيجة إلى وضع quirks.

أنواع doctype القديمة: HTML 4.01 وXHTML

قبل HTML5 كان doctype يشير إلى ملف DTD بمعرّف عام طويل. ما زلت ستجد هذه الأنواع في أعلى المواقع القديمة:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

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

لم تكن المتصفحات تنزّل ملفات DTD تلك أبدًا. كانت تقرأ المعرّف فقط لتختار الوضع: HTML 4.01 Strict وXHTML 1.0 Strict يعطيان الوضع القياسي، والإصدارات Transitional تعطي وضع quirks المحدود، وHTML 4.01 Transitional بلا رابط يعطي وضع quirks الكامل. الصق أحدها في أداة الفحص أعلاه لتختبره، ولاحظ أن compatMode يُرجع لوضع quirks المحدود القيمة CSS1Compat، وهي نفس قيمة الوضع القياسي، لذلك لا يظهر بالقيمة BackCompat إلا وضع quirks الكامل.

استبدال doctype قديم بـ <!DOCTYPE html> آمن للصفحات التي تعمل أصلًا في الوضع القياسي. أما الصفحة التي كانت في وضع quirks فقد تتغير قليلًا (غالبًا في الارتفاعات والفجوات تحت الصور)، فراجعها بعد التغيير.

doctype في DOM

يتحول doctype إلى عقدة DocumentType منفصلة عن العنصر <html>. تقرؤه السكربتات عبر document.doctype، ويُرجع document.compatMode الوضع الذي انتهت إليه الصفحة:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>document.doctype</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    code { background: #e5e7eb; padding: 2px 6px; border-radius: 4px; }
  </style>
</head>
<body>
  <p>doctype name: <code id="name"></code></p>
  <p>compatMode: <code id="compat"></code></p>
  <p>first child of document: <code id="first"></code></p>
  <script>
    const dt = document.doctype;
    document.getElementById('name').textContent = dt ? dt.name : 'none';
    document.getElementById('compat').textContent = document.compatMode;
    document.getElementById('first').textContent = document.firstChild.constructor.name;
  </script>
</body>
</html>

document.compatMode هو أسرع طريقة لفحص أي موقع حي: افتح وحدة التحكم في المتصفح واكتبه. "CSS1Compat" تعني الوضع القياسي (أو وضع quirks المحدود)، و"BackCompat" تعني وضع quirks.

قالب HTML5 كامل للبدء

doctype جزء من المستند الأدنى الذي يجب أن تبدأ منه كل صفحة. لكل سطر أدناه وظيفة:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Starter page</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; max-width: 40rem; margin: 2rem auto; padding: 0 1rem; }
    li code { background: #e5e7eb; padding: 1px 5px; border-radius: 4px; }
  </style>
</head>
<body>
  <h1>Starter page</h1>
  <ul>
    <li><code>&lt;!DOCTYPE html&gt;</code> turns on standards mode</li>
    <li><code>lang="en"</code> names the page language</li>
    <li><code>charset="utf-8"</code> makes accented letters and emoji display correctly</li>
    <li><code>viewport</code> makes the page fit phone screens</li>
    <li><code>&lt;title&gt;</code> is the text on the browser tab</li>
  </ul>
</body>
</html>

لكل من سمة lang ووسم meta viewport صفحته الخاصة.

أخطاء شائعة

وجود شيء قبل doctype. حرف شارد، أو أمر echo للتصحيح من سكربت الخادم، أو وسم HTML فوق <!DOCTYPE html> يضع الصفحة كلها في وضع quirks. التعليقات والأسطر الفارغة لا تسبب مشكلة.
اختراع إصدار. <!DOCTYPE html5> أو <!DOCTYPE HTML 5> غير صالحين ويفعّلان وضع quirks. doctype الخاص بـ HTML5 هو <!DOCTYPE html> فقط.
إغلاقه. <!DOCTYPE html></!DOCTYPE> ليس HTML صالحًا. التصريح ليس له وسم إغلاق.
حذفه من ملفات الاختبار الصغيرة. أخطاء التخطيط التي تطاردها في ملف تجريبي بلا doctype قد لا تكون موجودة في الصفحة الحقيقية، والعكس صحيح.
الإبقاء على doctype قديم من نوع Transitional. يضع الصفحة في وضع quirks المحدود بلا أي فائدة. انتقل إلى <!DOCTYPE html>.

الأسئلة الشائعة

ما وظيفة <!DOCTYPE html>؟

يخبر المتصفح بأن الصفحة مستند HTML حديث، فيعرضها في الوضع القياسي. من دونه يعود المتصفح إلى وضع quirks الذي يحاكي أخطاء متصفحات أواخر التسعينيات ويغيّر طريقة حساب بعض التخطيطات والارتفاعات.

هل <!DOCTYPE html> إلزامي؟

الصفحة تعمل من دونه، لكن معيار HTML يشترطه، والمتصفح يعرض الصفحة حينها في وضع quirks. ضع <!DOCTYPE html> دائمًا في السطر الأول.

هل doctype حساس لحالة الأحرف؟

لا. <!DOCTYPE html> و<!doctype html> و<!DocType HTML> كلها بالمعنى نفسه. الأسلوب الأشيع هو DOCTYPE بأحرف كبيرة مع html بأحرف صغيرة.

هل DOCTYPE وسم HTML؟

لا. هو تصريح وليس عنصرًا: ليس له وسم إغلاق، ولا يمكنك إضافة سمات إليه، ولا يظهر في document.body. في DOM هو عقدة مستقلة من النوع DocumentType متاحة عبر document.doctype.

ما هو doctype الخاص بـ HTML5؟

<!DOCTYPE html>. تخلّى HTML5 عن المعرّفات العامة الطويلة والروابط التي كانت في HTML 4.01 وXHTML، والصيغة القصيرة هي الوحيدة التي تحتاجها لأي صفحة جديدة.

كيف أعرف إن كانت الصفحة في وضع quirks؟

افتح وحدة التحكم في المتصفح ونفّذ document.compatMode. القيمة "CSS1Compat" تعني الوضع القياسي (أو وضع quirks المحدود)، و"BackCompat" تعني وضع quirks.

مفاهيم ذات صلة