Doctype trong HTML: <!DOCTYPE html> là gì, đặt ở đâu

<!DOCTYPE html> là gì

<!DOCTYPE html> là khai báo doctype: dòng đầu tiên của một tệp HTML, nằm trước thẻ <html>. Dòng này báo trình duyệt "đây là một tài liệu HTML hiện đại", và trình duyệt đáp lại bằng cách hiển thị trang ở standards mode (chế độ chuẩn), theo đúng đặc tả HTML và CSS hiện hành.

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

Chỉ một dòng đó là toàn bộ doctype của HTML5. Nó không có thẻ đóng và không chứa gì khác bên trong.

Quy tắc cú pháp

• Doctype đứng đầu tiên. Trước nó chỉ được có khoảng trắng và chú thích. Bất kỳ chữ hay thẻ nào đứng trước doctype đều khiến trình duyệt bỏ qua nó.
• Không phân biệt chữ hoa chữ thường. <!DOCTYPE html> và <!doctype html> giống hệt nhau. Chọn một kiểu viết và giữ nguyên kiểu đó.
• Doctype không phải là phần tử. Không có </!DOCTYPE>, và bạn không thể thêm class hay thuộc tính nào khác vào nó.
• Từ đứng sau DOCTYPE phải là html. <!DOCTYPE html5> không phải một phiên bản mới hơn; trình duyệt coi trang đó như không có doctype hợp lệ.
• Mỗi tài liệu chỉ có một. Trang được ghép từ nhiều tệp (template, include) vẫn chỉ xuất ra một doctype duy nhất ở đầu tệp HTML cuối cùng.

Standards mode và quirks mode

Trình duyệt có ba chế độ hiển thị, và doctype quyết định chọn chế độ nào:

Quirks mode tồn tại để những trang viết trước khi có chuẩn web vẫn hiển thị đúng như tác giả của chúng từng thấy. Với trang mới, nó chỉ gây rắc rối: một height: 100% chạy được ở trang này mà không chạy ở trang kia, hay bảng bỏ qua cỡ chữ bạn đặt, là những dấu hiệu kinh điển của việc thiếu doctype.

Các bản xem trước trong trình soạn thảo trên trang này luôn hiển thị ở standards mode, nên xóa doctype ở đó sẽ không cho bạn thấy quirks mode. Công cụ kiểm tra bên dưới dùng DOMParser, áp dụng đúng các quy tắc mà trình duyệt dùng khi tải một tệp. Sửa doctype trong ô văn bản và chế độ sẽ cập nhật theo:

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

Thử xóa dòng đó, gõ <!DOCTYPE html5>, hoặc đặt một từ trước doctype: mỗi cách đều chuyển kết quả sang quirks.

Doctype cũ: HTML 4.01 và XHTML

Trước HTML5, doctype chỉ tới một tệp DTD kèm một định danh public dài. Bạn vẫn sẽ gặp chúng ở đầu những trang web cũ:

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

Trình duyệt chưa bao giờ tải các tệp DTD đó. Chúng chỉ đọc định danh để chọn chế độ: HTML 4.01 Strict và XHTML 1.0 Strict cho standards mode, các bản Transitional cho limited quirks mode, còn HTML 4.01 Transitional không có URL cho quirks mode đầy đủ. Dán một doctype vào công cụ kiểm tra ở trên để thử; lưu ý rằng compatMode báo limited quirks mode là CSS1Compat, cùng giá trị với standards mode, nên chỉ quirks mode đầy đủ mới hiện ra là BackCompat.

Thay doctype cũ bằng <!DOCTYPE html> là an toàn với những trang vốn đã ở standards mode. Một trang đang ở quirks mode có thể bị xê dịch đôi chút (thường là chiều cao và khoảng trống dưới ảnh), nên hãy xem lại trang sau khi đổi.

Doctype trong DOM

Doctype trở thành một node DocumentType, tách biệt với phần tử <html>. Script đọc nó qua document.doctype, còn document.compatMode cho biết chế độ cuối cùng mà trang đang dùng:

<!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 là cách nhanh nhất để kiểm tra một trang web bất kỳ đang chạy: mở console của trình duyệt và gõ nó vào. "CSS1Compat" nghĩa là standards mode (hoặc limited quirks mode), "BackCompat" nghĩa là quirks mode.

Khung HTML5 đầy đủ để bắt đầu

Doctype là một phần của tài liệu tối thiểu mà mọi trang nên bắt đầu từ đó. Mỗi dòng bên dưới đều có nhiệm vụ riêng:

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

Thuộc tính lang và thẻ meta viewport đều có trang riêng.

Lỗi thường gặp

• Có thứ gì đó trước doctype. Một ký tự thừa, một lệnh echo gỡ lỗi từ script phía máy chủ, hoặc một thẻ HTML nằm trên <!DOCTYPE html> sẽ đưa cả trang vào quirks mode. Chú thích và dòng trống thì không sao.
• Tự đặt ra phiên bản. <!DOCTYPE html5> hay <!DOCTYPE HTML 5> đều không hợp lệ và kích hoạt quirks mode. Doctype của HTML5 chỉ đơn giản là <!DOCTYPE html>.
• Đóng doctype. <!DOCTYPE html></!DOCTYPE> không phải HTML hợp lệ. Khai báo này không có thẻ đóng.
• Bỏ doctype trong các tệp thử nghiệm nhỏ. Lỗi bố cục bạn đang tìm trong một tệp nháp không có doctype có thể không tồn tại trên trang thật, và ngược lại.
• Giữ doctype Transitional cũ. Nó đưa trang vào limited quirks mode mà không mang lại lợi ích gì. Hãy chuyển sang <!DOCTYPE html>.