תיעוד HTML עם דוגמאות להרצה: Doctype

Q: האם doctype תלוי רישיות?

לא. , ו- אומרים כולם אותו דבר. DOCTYPE באותיות גדולות עם html באותיות קטנות הוא הסגנון הנפוץ ביותר.

Q: איך בודקים אם עמוד נמצא במצב quirks?

פתחו את הקונסול של הדפדפן והריצו document.compatMode. "CSS1Compat" פירושו מצב תקני (או מצב quirks מוגבל), ו-"BackCompat" פירושו מצב quirks.

מה זה `<!DOCTYPE html>`

<!DOCTYPE html> היא הצהרת ה-doctype: השורה הראשונה בקובץ 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 תקין.
אחת לכל מסמך. עמודים שנבנים מכמה קבצים (תבניות, includes) עדיין מוציאים doctype אחד בראש ה-HTML הסופי.

מצב תקני ומצב quirks

לדפדפנים יש שלושה מצבי תצוגה, וה-doctype בוחר אחד מהם:

מצב	מה מפעיל אותו	מה משתנה
מצב תקני (standards)	`<!DOCTYPE html>` ו-doctypes מודרניים אחרים	הכל עוקב אחרי המפרטים הנוכחיים
מצב quirks מוגבל (limited quirks)	HTML 4.01 Transitional או Frameset עם URL, XHTML 1.0 Transitional או Frameset	כמעט תקני: רק כלל אחד של גובה שורה שונה, כך שלתמונה לבדה בשורה (בדרך כלל בתא טבלה) אין רווח מתחתיה
מצב quirks	בלי doctype, doctype עם שגיאת כתיב, או כמה ישנים כמו HTML 4.01 Transitional בלי URL	מחקה דפדפנים משנות ה-90: גבהים באחוזים, גודל טקסט בטבלאות וגובה שורות מתנהגים אחרת

מצב 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.

doctypes ישנים: 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 בלי ה-URL נותן מצב quirks מלא. הדביקו אחד מהם בבודק שלמעלה כדי לבדוק אותו; שימו לב ש-compatMode מדווח על מצב quirks מוגבל כ-CSS1Compat, אותו ערך כמו מצב תקני, כך שרק מצב quirks מלא מופיע כ-BackCompat.

החלפת 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, שמחקה באגים מדפדפנים של סוף שנות ה-90 ומשנה את האופן שבו מחושבים חלק מהפריסות והגבהים.

האם <!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 ויתר על המזהים הציבוריים הארוכים וכתובות ה-URL של HTML 4.01 ו-XHTML, והצורה הקצרה היא ה-doctype היחיד שצריך בכל עמוד חדש.

איך בודקים אם עמוד נמצא במצב quirks?

פתחו את הקונסול של הדפדפן והריצו document.compatMode. "CSS1Compat" פירושו מצב תקני (או מצב quirks מוגבל), ו-"BackCompat" פירושו מצב quirks.

מושגים קשורים