Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#База знаний</a>

2 <ul><li>28 апр 2025</li>

3 <li>0</li>

4 </ul>Рассказываем, что такое < !DOCTYPE > и как правильно его использовать.

5 Иллюстрация: Оля Ежак для Skillbox Media

6 Онлайн-журнал для тех, кто влюблён в код и информационные технологии. Пишем для айтишников и об айтишниках.

7 При создании HTML-документов нужно учитывать, как браузер интерпретирует и отображает нашу страницу. Важно, чтобы сайт выглядел так, как он задумывался, работал предсказуемо и отображался корректно.

8 Первое, что видит браузер при разборе HTML, - это <!DOCTYPE>. От этого элемента зависит, как страница будет рендериться: в современном стандартном режиме или в режиме совместимости. Разбираемся, как работает <!DOCTYPE>, почему без него вёрстка может сломаться и как выбрать правильный вариант.

9 Содержание

10 <ul><li><a>Что такое <!DOCTYPE></a></li>

11 <li><a>Как пишется</a>директива</li>

12 <li><a>Обязательно ли её использовать</a></li>

13 <li><a>Где <!DOCTYPE> располагается на странице</a></li>

14 <li>Какие бывают<a>режимы отображения документа</a></li>

15 <li><a>Какие существуют версии</a>в разных стандартах HTML</li>

16 <li><a>Частые ошибки</a></li>

17 <li><a>Полезные советы и лайфхаки</a></li>

18 </ul><!DOCTYPE> (document type declaration) - дословно "Тип документа" - это инструкция для веб-браузеров, определяющая, какую версию HTML следует использовать при работе с документом.

19 Строго говоря, <!DOCTYPE> - это не тег, а директива, которая относится к метаинформации о документе. Она записана в угловых скобках, потому что HTML-страница обрабатывает только то, что внутри < >. А знак ! в начале подчёркивает: это не обычный тег, а специальная инструкция для браузера.

20 В современных спецификациях HTML5 <!DOCTYPE> записывается в краткой простой форме:

21 <!DOCTYPE html>При этом регистр букв внутри DOCTYPE не имеет значения. Можно прописать и так:

22 <ul><li><!DOCTYPE HTML>;</li>

23 <li><!doctype html>;</li>

24 <li><!doctype HTML>.</li>

25 </ul>Если вы воспользуетесь плагином создания разметки Emmet, то он предложит этот вариант:

26 <!DOCTYPE html>

27 А вот в предыдущих версиях HTML и XHTML использовались более сложные и длинные записи <!DOCTYPE>. Они указывали на конкретное определение типа документа - DTD (document type definition) - и режима работы. И выглядело это всё как инструкция для принтера:

28 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">Коротко: да. Если его не указать, браузер включит режим совместимости (quirks mode), и это может привести:

29 <ul><li>к различному поведению браузеров при рендеринге;</li>

30 <li>ошибкам в обработке CSS;</li>

31 <li>непредсказуемому расположению элементов на странице.</li>

32 </ul>При вёрстке <!DOCTYPE> всегда помещают в самое начало HTML-документа, первой строкой. В любом другом месте этот элемент не будет восприниматься браузером, и для страницы включится режим совместимости.

33 <!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Пример</title> </head> <body> <h1>Заголовок</h1> </body> </html>Стоит ошибиться в <!DOCTYPE>, и браузер решит, что вы застряли в 2001-м. Это и есть режим совместимости. Давайте разберёмся, какие ещё режимы отображения бывают и чем они различаются.

34 Итак, браузер знает три режима отображения документа.

35 Включается при корректном указании директивы и заставляет браузер следовать современным стандартам.

36 Как включить:

37 Используйте правильный <!DOCTYPE> в начале HTML-документа:

38 <!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Стандартный режим</title> </head> <body> <h1>Пример в стандартном режиме</h1> </body> </html>Так браузер поймёт, что эта страница создана по актуальному стандарту HTML5, и будет применять к коду именно эту спецификацию, корректно отображая HTML и CSS.

39 Этот режим имитирует поведение старых браузеров (IE5 и других), в которых не работают некоторые современные решения. Это может привести к неправильному рендерингу CSS, особенно у элементов с блочной моделью (box model).

40 Это не значит, что страница будет полностью сломана, но результат отображения некоторых элементов будет отличаться от ожидаемого.

41 Как включить:

42 <ul><li>Не писать.Если нет <!DOCTYPE>, браузер включит режим совместимости.</li>

43 </ul><html lang="ru"> <head> <meta charset="UTF-8"> <title>Quirks Mode</title> </head> <body> <h1>Пример в режиме совместимости, потому что нет DOCTYPE</h1> </body> </html><ul><li>Использовать старый или некорректный<!DOCTYPE> - например, старые DTD, не указанные полностью:</li>

44 </ul><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"><ul><li>Добавить что-то перед<!DOCTYPE>.Даже пробел или комментарий перед <!DOCTYPE> могут включить quirks mode:</li>

45 </ul> <!DOCTYPE html>Отличается от стандартного режима небольшими отклонениями в рендеринге, но поддерживает устаревшие элементы.

46 Как включить:

47 Некоторые варианты <!DOCTYPE> из HTML 4.01 Transitional и XHTML 1.0 Transitional могут активировать этот режим. Например:

48 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Почти стандартный режим</title> </head> <body> <h1>Пример в почти стандартном режиме</h1> </body> </html>В HTML 4.01 существует три варианта <!DOCTYPE>.

49 <ul><li>Strict (строгий режим) - без поддержки устаревших элементов предыдущих версий:</li>

50 </ul><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><ul><li>Transitional (промежуточный режим) - поддерживает устаревшие теги, такие как :</li>

51 </ul><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><ul><li>Frameset (режим фреймов) - поддерживает фреймы:</li>

52 </ul><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">XHTML требовал строгого соблюдения синтаксиса XML и имел три аналогичных варианта <!DOCTYPE>:

53 <ul><li>Strict (строгий режим);</li>

54 <li>Transitional (промежуточный режим);</li>

55 <li>Frameset (режим фреймов).</li>

56 </ul>Запись <!DOCTYPE> в XHTML 1.0 выглядела так:

57 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">HTML5 не поддерживает устаревшие теги из предыдущих версий и придерживается современной модели вёрстки. Вместо длинных <!DOCTYPE> используется один короткий универсальный вариант, который работает во всех браузерах:

58 <!DOCTYPE html>Когда веб-разработчики переходили от старых HTML-версий к более структурированным стандартам, но ещё нуждались в обратной совместимости, они включали почти стандартный режим, который позволял:

59 <ul><li>использовать как современные, так и устаревшие HTML-элементы при соблюдении корректной структуры;</li>

60 <li>стилизовать страницу с использованием встроенных в разметку стилей (style="").</li>

61 </ul>И сейчас можно поддерживать страницу, содержащую устаревший код, с помощью стандарта HTML 4.01.

62 Чтобы правильно указатьдирективу, надо разобраться, из чего она вообще состоит. Для этого давайте попробуем расшифровать <!DOCTYPE> почти стандартного режима отображения.

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

64 <ul><li>!DOCTYPE HTML PUBLIC - объявление типа документа, указывающее, что используется публичный DTD.</li>

65 <li>-//W3C//DTD HTML 4.01 Transitional//EN - описание стандарта:</li>

66 </ul><ul><li>-//W3C// - спецификация разработана W3C (World Wide Web Consortium).</li>

67 <li>DTD HTML 4.01 - версия стандарта (HTML 4.01).</li>

68 <li>Transitional - разрешает использование устаревших элементов (например, , <center>, <iframe>).</li>

69 <li>//EN - язык документа (английский).</li>

70 </ul><ul><li>"http://www.w3.org/TR/html4/loose.dtd" - ссылка на официальный документ DTD.</li>

71 </ul>Есть две основных ошибки при использовании <!DOCTYPE>:

72 1.Страница должна использовать только HTML5, но директива <!DOCTYPE> отсутствует или указана неправильно.

73 Проблема: на странице используется только современный код, но при этом:

74 <ul><li>директива <!DOCTYPE> не указана вовсе;</li>

75 <li>содержит синтаксические ошибки;</li>

76 <li>расположена не в самом начале документа.</li>

77 </ul>Из-за этого браузер может переключиться в режим совместимости и отобразить страницу некорректно, игнорируя особенности HTML5.

78 Решение:

79 <ul><li>Сделайте директиву самым первым элементом страницы.</li>

80 <li>Используйте правильную для HTML5 запись <!DOCTYPE html>.</li>

81 </ul><!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Страница для HTML5</title> </head> <body> <h1>На странице поддерживается только современный код HTML5</h1> </body> </html>2. Страница использует и современный, и устаревший код, но не задан подходящий режим совместимости.

82 Проблема:в коде страницы присутствуют как современные, так и устаревшие элементы (например, теги и атрибуты из HTML4), но директива <!DOCTYPE> не соответствует нужному стандарту (например, используется HTML5 вместо Transitional). В результате браузер может отрисовать страницу в режиме "почти-совместимости".

83 Решение:

84 <ul><li>Убедитесь, что <!DOCTYPE> стоит первой строкой.</li>

85 <li>Убедитесь, что параметры директивы прописаны полно и верно, выбрана корректная версия стандарта и присутствует параметр Transitional.</li>

86 </ul><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Страница для почти стандартного режима</title> </head> <body> <h1>На странице поддерживается устаревший и современный код</h1> </body> </html><ul><li>Используйте Emmet, чтобы быстро создать первоначальную структуру: это позволит не ошибиться в разметке. Emmet создаёт страницу HTML5 и прописывает <!DOCTYPE> актуального формата.В редакторах вроде VS Code можно набрать ! и нажатьTab - вы получите готовый шаблон HTML-документа. Он сразу включает <!DOCTYPE>, <html lang="...">, <meta charset="UTF-8"> и всё, что часто забывают ввести вручную. Это сэкономит время и позволит не ошибиться при выборе директивы.</li>

87 </ul><ul><li>Если вы работаете с современным сайтом, но в коде остались устаревшие элементы, разумно включить почти стандартный режим. Но если такого кода немного, то лучше переписать его по стандарту HTML5. А вот quirks mode тут не рекомендуется: что-то отобразится правильно, а что-то обязательно будет вести себя как попало.</li>

88 </ul><a>Бесплатный курс по Python ➞Мини-курс для новичков и для опытных кодеров. 4 крутых проекта в портфолио, живое общение со спикером. Кликните и узнайте, чему можно научиться на курсе. Смотреть программу</a>