Skip to content

Commit 7f97f9f

Browse files
hardsoncorehardsoncore
committed
feat: upd answer for question N3
1 parent 46ee704 commit 7f97f9f

6 files changed

Lines changed: 404 additions & 99 deletions

File tree

‎src/assets/content/eng/answers/3-What-is-DOCTYPE-Why-is-it-needed.md‎

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
<h3>What is DOCTYPE?</h3>
2+
<p>
3+
<span class="accent">&lt;!DOCTYPE html></span> is a declaration (not an HTML tag) that must be
4+
the very first line of the document. It tells the browser which rules to use for parsing and rendering the page.
5+
</p>
6+
7+
<p class="info">
8+
<strong>Key idea:</strong> today DOCTYPE is a rendering-mode switch.
9+
With it, the browser works in <strong>standards mode</strong> (following modern specs);
10+
without it — in <strong>quirks mode</strong>, emulating the bugs of late-90s browsers.
11+
</p>
12+
13+
<code class="code">
14+
&lt;!DOCTYPE html>
15+
&lt;html>
16+
...
17+
&lt;/html>
18+
</code>
19+
20+
<h3>Why is DOCTYPE needed?</h3>
21+
<ul>
22+
<li>
23+
It enables <strong>standards mode</strong> — the page renders predictably
24+
and identically across all browsers.
25+
</li>
26+
<li>
27+
Without it, the browser falls into <strong>quirks mode</strong>: a different box model (like in old IE),
28+
different sizing of inline elements and tables — the layout "drifts".
29+
</li>
30+
<li>
31+
It is needed for validation: the validator checks the code against the declared HTML version.
32+
</li>
33+
</ul>
34+
35+
<p class="info info--orange">
36+
DOCTYPE does not "enable" HTML5 features: new tags and APIs work without it.
37+
It affects specifically the rendering mode (primarily CSS layout),
38+
so its absence breaks the layout, not JavaScript.
39+
</p>
40+
41+
<h3>Types of DOCTYPE</h3>
42+
<p>
43+
Before HTML5, the declaration referenced a <span class="accent">DTD</span> (Document Type Definition) —
44+
a formal grammar description of a specific language version. Hence the bulky variants:
45+
<strong>HTML 4.01</strong> and <strong>XHTML 1.0</strong> in Strict / Transitional / Frameset editions, plus XHTML 1.1.
46+
</p>
47+
48+
<p>
49+
HTML5 shortened the declaration to <code>&lt;!DOCTYPE html></code> — the minimal string
50+
guaranteed to trigger standards mode in all browsers. Today it is the only one in use.
51+
</p>
52+
53+
<h3>Can you do without DOCTYPE?</h3>
54+
<p>
55+
Technically — yes, the page will render, but in quirks mode, and every browser has
56+
its own "quirks": the layout will differ, and debugging those discrepancies is painful.
57+
</p>
58+
59+
<p class="info info--blue">
60+
In practice: always start the document with <code>&lt;!DOCTYPE html></code>.
61+
Case does not matter (<code>&lt;!doctype html></code> is also valid),
62+
but the declaration must come before any other page content.
63+
</p>
64+
65+
<p class="deep-dive">Deep Dive</p>
66+
67+
<h3>Rendering modes: there are actually three</h3>
68+
<p>
69+
The browser picks the mode by "sniffing" the DOCTYPE — by its exact text:
70+
</p>
71+
<ul>
72+
<li>
73+
<strong>No-quirks (standards) mode</strong> — triggered by the modern <code>&lt;!DOCTYPE html></code>
74+
and by old Strict DTDs. Full compliance with the specifications.
75+
</li>
76+
<li>
77+
<strong>Limited-quirks (almost standards) mode</strong> — triggered by Transitional/Frameset DTDs with a URI.
78+
It differs from standards mode only in how images are rendered in table cells:
79+
the image sits flush with the bottom of the cell, with no gap under the text baseline.
80+
</li>
81+
<li>
82+
<strong>Quirks mode</strong> — when the DOCTYPE is missing, or outdated/incomplete.
83+
</li>
84+
</ul>
85+
86+
<h4>What exactly breaks in quirks mode</h4>
87+
<ul>
88+
<li>
89+
The IE5-style box model: <code>width</code>/<code>height</code> include
90+
<code>padding</code> and <code>border</code> (like <code>box-sizing: border-box</code>,
91+
but forced, for all elements).
92+
</li>
93+
<li>
94+
Unitless dimensions are treated as pixels (<code>width: 100</code> will work).
95+
</li>
96+
<li>
97+
Font styles are not inherited into tables — text inside <code>&lt;table></code>
98+
ignores the parent's <code>font-family</code> and <code>font-size</code>.
99+
</li>
100+
<li>
101+
<code>line-height</code>, vertical alignment of inline content,
102+
and color values in non-standard formats all behave differently.
103+
</li>
104+
</ul>
105+
106+
<p>
107+
You can check the current mode from JavaScript via <code>document.compatMode</code>:
108+
<code>"CSS1Compat"</code> — standards/limited-quirks, <code>"BackCompat"</code> — quirks mode.
109+
</p>
110+
111+
<h3>Historical background: where all this came from</h3>
112+
<p>
113+
In the 90s, browsers rendered pages with deviations from the standards (the most famous example —
114+
the IE box model). When browsers started fixing their behavior to match the specs,
115+
a problem arose: millions of old sites were built around the bugs and would "break" under honest rendering.
116+
The solution was <strong>DOCTYPE switching</strong> (first in IE5/Mac): the new correct rendering
117+
is enabled only when a "modern" DOCTYPE is present, while old pages without one
118+
keep being processed the old way. Thus quirks mode became a museum of bugs that browsers
119+
are obliged to maintain to this day.
120+
</p>
121+
122+
<p>
123+
This is what the declaration looked like before HTML5:
124+
</p>
125+
126+
<code class="code">
127+
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
128+
"http://www.w3.org/TR/html4/strict.dtd">
129+
</code>
130+
131+
<p>
132+
DTD is a legacy of SGML, on which HTML was formally based up to and including version 4.01.
133+
HTML5 abandoned SGML: its parser is described algorithmically in the specification, the DTD is no longer needed,
134+
so the declaration degenerated into a short marker saying "render by the standards".
135+
</p>
136+
137+
<p class="info info--blue">
138+
An XHTML document served with the MIME type <code>application/xhtml+xml</code>
139+
always renders in standards mode — DOCTYPE sniffing applies only to <code>text/html</code>.
140+
</p>

‎src/assets/content/eng/questions.ts‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -73,25 +73,23 @@ export const questions = [
7373
answer: 'assets/content/eng/answers/3-What-is-DOCTYPE-Why-is-it-needed.md',
7474
tags: [
7575
'HTML',
76-
'markup'
76+
'markup',
77+
'browser'
7778
],
7879
category: 'Markup',
7980
level: QuestionLevels.junior,
8081
structure: [
8182
{
82-
name: 'What is this DOCTYPE tag',
83-
},
84-
{
85-
name: 'Why is DOCTYPE needed',
83+
name: 'What is DOCTYPE',
8684
},
8785
{
88-
name: 'Explain that there are different types of DOCTYPE',
86+
name: 'Why it is needed: standards mode vs quirks mode',
8987
},
9088
{
91-
name: 'Is it possible to do without DOCTYPE?',
89+
name: 'Types of DOCTYPE: legacy DTDs and the short HTML5 one',
9290
},
9391
{
94-
name: 'Nowadays, it is almost always recommended to use DOCTYPE HTML5',
92+
name: 'Can you do without DOCTYPE?',
9593
}
9694
]
9795
},

‎src/assets/content/rus/answers/3-Chto-takoe-DOCTYPE-Zachem-on-nuzhen.md‎

Lines changed: 106 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -1,109 +1,140 @@
1-
2-
<h3>
3-
Что такое DOCTYPE?
4-
</h3>
1+
<h3>Что такое DOCTYPE?</h3>
52
<p>
6-
<span class="accent">Тег &lt;!doctype></span>
7-
— DTD (document type definition, описание типа документа) указывает тип документа,
8-
который используется при написании html кода. Это непарный тег, который должен стоять самым первым в
9-
коде каждой страницы вашего сайта.
3+
<span class="accent">&lt;!DOCTYPE html></span> — это декларация (не HTML-тег), которая должна стоять
4+
самой первой строкой документа. Она сообщает браузеру, по каким правилам парсить и рендерить страницу.
105
</p>
116

12-
<p>
13-
Нужно понимать, что строчка, в которой прописывается <code>DOCTYPE</code> - это не просто очередной HTML тег.
14-
Это важная инструкция, с помощью которой мы говорим браузеру, какая версия HTML использовалась при написании страницы.
7+
<p class="info">
8+
<strong>Главная мысль:</strong> сегодня DOCTYPE — это переключатель режимов рендеринга.
9+
С ним браузер работает в <strong>standards mode</strong> (по современным стандартам),
10+
без него — в <strong>quirks mode</strong>, эмулируя баги браузеров конца 90-х.
1511
</p>
1612

17-
<p>
18-
Главным преимуществом использования <code>DOCTYPE</code> является то,
19-
что ваш сайт будет правильно работать и одинаково ровно и красиво смотреться во всех браузерах.
20-
</p>
13+
<code class="code">
14+
&lt;!DOCTYPE html>
15+
&lt;html>
16+
...
17+
&lt;/html>
18+
</code>
2119

22-
<h3>
23-
Зачем нужен DOCTYPE?
24-
</h3>
20+
<h3>Зачем нужен DOCTYPE?</h3>
21+
<ul>
22+
<li>
23+
Включает <strong>standards mode</strong> — страница рендерится предсказуемо
24+
и одинаково во всех браузерах.
25+
</li>
26+
<li>
27+
Без него браузер уходит в <strong>quirks mode</strong>: другая боксовая модель (как в старом IE),
28+
иначе считаются размеры inline-элементов и таблиц — вёрстка «плывёт».
29+
</li>
30+
<li>
31+
Нужен для валидации: валидатор проверяет код против объявленной версии HTML.
32+
</li>
33+
</ul>
2534

26-
<p>
27-
Тег <code>DOCTYPE</code> — ключевой компонент web-страниц, претендующих на соответствие стандартам:
28-
без него ваш код и CSS не пройдут проверку валидатором.
29-
Тег <code>DOCTYPE</code> также важен для правильного отображения и работы страницы в броузерах, соответствующих стандартам
30-
(Mozilla, IE5/Mac, и IE6/Win).
35+
<p class="info info--orange">
36+
DOCTYPE не «подключает» HTML5-фичи: новые теги и API работают и без него.
37+
Он влияет именно на режим рендеринга (в первую очередь на CSS-раскладку),
38+
поэтому его отсутствие ломает вёрстку, а не JavaScript.
3139
</p>
3240

33-
<h3>
34-
Какие существуют виды DOCTYPE?
35-
</h3>
36-
41+
<h3>Виды DOCTYPE</h3>
3742
<p>
38-
Cуществует несколько видов <code>DOCTYPE</code>. Есть строгие виды (<strong>strict</strong>),
39-
которые работают на основе только определенных тегов, есть переходные (<strong>transitional</strong>),
40-
которые допускают возможность включения дополнительных тегов, есть такие, которые работают с фреймами
41-
(<strong>frameset</strong>).
43+
До HTML5 декларация ссылалась на <span class="accent">DTD</span> (Document Type Definition) —
44+
формальное описание грамматики конкретной версии языка. Отсюда громоздкие варианты:
45+
<strong>HTML 4.01</strong> и <strong>XHTML 1.0</strong> в редакциях Strict / Transitional / Frameset, а также XHTML 1.1.
4246
</p>
4347

44-
<p>Подробно в этой статье я не буду рассматривать каждый из них, так как это не является моей целью, просто перечислю:</p>
45-
46-
<ol>
47-
<li><strong>HTML 5</strong></li>
48-
<li><strong>HTML 4.01 Strict</strong></li>
49-
<li><strong>HTML 4.01 Transitional</strong></li>
50-
<li><strong>HTML 4.01 Frameset</strong></li>
51-
<li><strong>XHTML 1.0 Strict</strong></li>
52-
<li><strong>XHTML 1.0 Transitional</strong></li>
53-
<li><strong>XHTML 1.0 Frameset</strong></li>
54-
<li><strong>XHTML 1.1</strong></li>
55-
</ol>
48+
<p>
49+
В HTML5 декларацию сократили до <code>&lt;!DOCTYPE html></code> — минимальной строки,
50+
гарантированно включающей standards mode во всех браузерах. Сегодня используется только она.
51+
</p>
5652

53+
<h3>Можно ли обойтись без DOCTYPE?</h3>
5754
<p>
58-
Что касается использования разных видов <code>DOCTYPE</code>, следует иметь ввиду, что если вы изначально писали свой
59-
сайт в одном <code>DOCTYPE</code>, то не рекомендуется его менять в будущем на какой-то другой, потому что могут
60-
возникнуть проблемы с правильным отображением сайта из-за того, что вместе со сменой <code>DOCTYPE</code> вы
61-
автоматически поменяете правила обработки тегов браузерами.
55+
Технически — да, страница отрендерится, но в quirks mode, причём у каждого браузера
56+
свои «причуды»: раскладка будет различаться, а отлаживать такие расхождения тяжело.
57+
</p>
58+
59+
<p class="info info--blue">
60+
На практике: всегда начинайте документ с <code>&lt;!DOCTYPE html></code>.
61+
Регистр не важен (<code>&lt;!doctype html></code> тоже валиден),
62+
но декларация должна идти до любого другого содержимого страницы.
6263
</p>
6364

64-
<h3>
65-
Можно ли вообще обойтись без DOCTYPE?
66-
</h3>
65+
<p class="deep-dive">Углубленный конспект</p>
6766

67+
<h3>Режимы рендеринга: их на самом деле три</h3>
6868
<p>
69-
Теоретически, <code>DOCTYPE</code> не является необходимым тегом, но если вы не используете <code>DOCTYPE</code>
70-
совсем, то рискуете лицезреть созданный вами сайт не в самом приглядном виде в браузере.
71-
Причем в каждом браузере будут возникать разные проблемы с правильностью отображения,
72-
а решить все их вам будет, мягко говоря, сложновато.
69+
Браузер выбирает режим «сниффингом» DOCTYPE — по его точному тексту:
7370
</p>
71+
<ul>
72+
<li>
73+
<strong>No-quirks (standards) mode</strong> — включается современным <code>&lt;!DOCTYPE html></code>
74+
и старыми Strict-DTD. Полное соответствие спецификациям.
75+
</li>
76+
<li>
77+
<strong>Limited-quirks (almost standards) mode</strong> — включается Transitional/Frameset DTD с URI.
78+
Отличается от standards только рендерингом изображений в ячейках таблиц:
79+
картинка прижимается к низу ячейки без зазора под базовой линией текста.
80+
</li>
81+
<li>
82+
<strong>Quirks mode</strong> — при отсутствии DOCTYPE или устаревшей/неполной декларации.
83+
</li>
84+
</ul>
7485

75-
<h3>
76-
Преимущества использования DOCTYPE HTML5
77-
</h3>
86+
<h4>Что конкретно ломается в quirks mode</h4>
87+
<ul>
88+
<li>
89+
Боксовая модель по образцу IE5: <code>width</code>/<code>height</code> включают
90+
<code>padding</code> и <code>border</code> (как <code>box-sizing: border-box</code>,
91+
но принудительно и для всех элементов).
92+
</li>
93+
<li>
94+
Размеры без единиц измерения трактуются как пиксели (<code>width: 100</code> сработает).
95+
</li>
96+
<li>
97+
Стили шрифта не наследуются внутрь таблиц — текст в <code>&lt;table></code>
98+
игнорирует <code>font-family</code> и <code>font-size</code> родителя.
99+
</li>
100+
<li>
101+
Иначе работают <code>line-height</code>, вертикальное выравнивание inline-контента
102+
и цветовые значения в нестандартных форматах.
103+
</li>
104+
</ul>
78105

79106
<p>
80-
Хорошая новость состоит в том, что с выходом последней версии HTML5 стало намного удобней выбирать DOCTYPE для своих сайтов.
107+
Проверить текущий режим из JavaScript можно через <code>document.compatMode</code>:
108+
<code>"CSS1Compat"</code> — standards/limited-quirks, <code>"BackCompat"</code> — quirks mode.
81109
</p>
82110

111+
<h3>Историческая справка: откуда это всё взялось</h3>
83112
<p>
84-
Дело в том, что правила <code>DOCTYPE</code> HTML5 являются универсальными, включают в себя правила предыдущей версии,
85-
а также возможность работы с HTML 4 тегами и, в какой-то степени, с XHTML.
86-
Насколько я понимаю, они объединяют в себе возможности всех своих предшественников, адаптируя их для работы в новых браузерах.
113+
В 90-е браузеры рендерили страницы с расхождениями от стандартов (самый известный пример —
114+
боксовая модель IE). Когда браузеры начали исправлять поведение под спецификации,
115+
возникла проблема: миллионы старых сайтов были свёрстаны под баги и «сломались бы» при честном рендеринге.
116+
Решение — <strong>DOCTYPE switching</strong> (впервые в IE5/Mac): новый корректный рендеринг
117+
включается только при наличии «современного» DOCTYPE, а старые страницы без него
118+
продолжают обрабатываться по-старому. Так quirks mode стал музеем багов, который браузеры
119+
обязаны поддерживать до сих пор.
87120
</p>
88121

89122
<p>
90-
Поэтому сейчас следует (практически) всегда использовать <code>DOCTYPE</code> HTML5,
91-
для чего просто следует добавить в начале страницы:
123+
Так выглядела декларация до HTML5:
92124
</p>
93125

94126
<code class="code">
95-
&lt;!DOCTYPE html>
127+
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
128+
"http://www.w3.org/TR/html4/strict.dtd">
96129
</code>
97130

98-
<h3>
99-
Источники:
100-
</h3>
131+
<p>
132+
DTD — наследие SGML, на котором формально был основан HTML до версии 4.01 включительно.
133+
HTML5 отказался от SGML: его парсер описан в спецификации алгоритмически, DTD больше не нужен,
134+
поэтому декларация выродилась в короткий маркер «рендери по стандартам».
135+
</p>
101136

102-
<ul>
103-
<li>
104-
<a href="https://mega-css.com/page/doctype">Источник 1</a>
105-
</li>
106-
<li>
107-
<a href="https://habr.com/ru/post/71364/">Источник 2</a>
108-
</li>
109-
</ul>
137+
<p class="info info--blue">
138+
XHTML-документ, отданный с MIME-типом <code>application/xhtml+xml</code>,
139+
всегда рендерится в standards mode — DOCTYPE-сниффинг применяется только к <code>text/html</code>.
140+
</p>

0 commit comments

Comments
 (0)