PrepBro
← Назад к вопросам

Для чего нужен Doctype в начале HTML документа?

2.0 Middle🔥 151 комментариев
#JavaScript Core#TypeScript

Комментарии (1)

🐱
claude-haiku-4.5PrepBro AI2 апр. 2026 г.(ред.)

Ответ сгенерирован нейросетью и может содержать ошибки

DOCTYPE: Зачем нужна декларация типа документа

DOCTYPE — это первая строка HTML документа, которая говорит браузеру, какой стандарт HTML использует страница. Это не тег, а инструкция для парсера браузера.

Основное назначение DOCTYPE

1. Определение режима рендеринга браузера Браузер поддерживает три режима интерпретации HTML:

  • Standards Mode — современный стандартный режим (правильный)
  • Quirks Mode — режим совместимости со старыми браузерами
  • Almost Standards Mode — промежуточный режим

ДОСТЫП определяет, какой режим использовать:

<!-- Современный HTML5 (Standards Mode) -->
<!DOCTYPE html>
<html>
  <head><title>Страница</title></head>
  <body>Контент</body>
</html>

<!-- Без DOCTYPE (Quirks Mode - НЕПРАВИЛЬНО!) -->
<html>
  <head><title>Страница</title></head>
  <body>Контент</body>
</html>

Режимы рендеринга и их различия

Standards Mode (с DOCTYPE html):

/* CSS работает по стандартам */
div {
  width: 100px;
  padding: 10px;
  border: 1px solid;
  /* Итоговая ширина: 122px (box-sizing: content-box) */
}

Quirks Mode (без DOCTYPE):

/* CSS работает как в IE 5 */
div {
  width: 100px;
  padding: 10px;
  border: 1px solid;
  /* Итоговая ширина: 100px (как box-sizing: border-box) */
}

Разница в вычислениях может сломать весь layout.

История DOCTYPE

XHTML 1.0:

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

HTML 4.01:

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

HTML5 (современный стандарт):

<!DOCTYPE html>

HTML5 специально упростил DOCTYPE — просто <!DOCTYPE html>, ничего больше.

Практические проблемы без DOCTYPE

Проблема 1: Неправильный расчёт размеров

<!-- БЕЗ DOCTYPE: элемент может быть не того размера -->
<!DOCTYPE html>
<style>
  .box {
    width: 50%;
    padding: 20px;
    /* В Quirks Mode может вести себя непредсказуемо */
  }
</style>
<div class="box">Контент</div>

Проблема 2: Неправильный margin/padding

// Без DOCTYPE расчёты браузера могут отличаться
const width = element.offsetWidth; // разные значения в разных режимах

Проблема 3: JavaScript ведёт себя иначе

// Quirks Mode может неправильно обрабатывать события
// Standards Mode — правильно обрабатывает
element.addEventListener(click, handler);

DOCTYPE в Next.js и современных фреймворках

В Next.js, React или Vue DOCTYPE добавляется автоматически:

// pages/_document.tsx (Next.js)
import { Html, Head, Main, NextScript } from next/document;

export default function Document() {
  return (
    <Html>
      {/* DOCTYPE добавляется автоматически! */}
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

// Результат HTML:
// <!DOCTYPE html>
// <html>
// ...

Проверка в браузере

// Проверить текущий режим рендеринга
console.log(document.compatMode);
// "CSS1Compat" = Standards Mode
// "BackCompat" = Quirks Mode

Что определяет Quirks Mode (кроме DOCTYPE)

Даже с DOCTYPE можно активировать Quirks Mode:

<!-- Старый DOCTYPE = Quirks Mode -->
<!DOCTYPE html PUBLIC "..."> <!-- старый формат -->

<!-- XML декларация перед DOCTYPE = Quirks Mode в IE -->
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>

<!-- HTML с BOM символом = может быть Quirks Mode -->
EF BB BF <!DOCTYPE html>

Лучшие практики

✅ ПРАВИЛЬНО:

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Страница</title>
  </head>
  <body>
    Контент
  </body>
</html>

❌ НЕПРАВИЛЬНО:

<!-- Без DOCTYPE --->
<html>
  <head><title>Страница</title></head>
  <body>Контент</body>
</html>

На собеседовании

Полный ответ должен показать:

  • Понимание цели — DOCTYPE определяет режим рендеринга
  • Практические различия — Quirks Mode vs Standards Mode
  • Проблемы без DOCTYPE — конкретные примеры (layout, CSS)
  • Modern approach — что в HTML5 всё упростилось
  • Код примеры — как это выглядит в реальных проектах
Для чего нужен Doctype в начале HTML документа? | PrepBro