В этом уроке вы узнаете, что такое Doctype html и зачем он нужен на странице.
Разберем причину его появления, все примеры шаблонов, а также рекомендации консорциума W3C по использованию.
А в конце дам описание всех атрибутов этой декларации и покажу, какую версию сейчас лучше использовать.
Как вы знаете, документ html состоит из символов.
Некоторые из них составляют текстовое содержимое. А другие символы складываются в определенные конструкции (разметку).
Все это справедливо для всего документа, кроме самой верхней строки — объявления доктайп.
Элемент doctype html — что это такое и для чего нужен
DOCTYPE (Document Type Declaration или DTD) — это инструкция, которая говорит браузеру, какой тип текущего документа используется и на каком языке разметки он сверстан.
Само слово переводится на русский, как объявление типа документа.
За всю историю развития HTML было разработано большое количество стандартов. Они говорят браузеру, как обрабатывать код и выводить страницу на монитор.
Поэтому важно правильно задать стандарт сайта, а именно для HTML 5.
<!DOCTYPE html>Тут не имеет значения, в каком регистре вы написали объявление. Главное, чтобы оно шло самым первым на странице.
Правильный вариант записи Doctype для html 5 на странице
<!DOCTYPE html>
<html>
<head>
<title>Заголовок страницы</title>
<meta charset="utf-8" />
</head>
<body>
<p>Основной контент страницы</p>
</body>
</html>Несмотря на угловые скобки, данное объявление ни к тексту, ни к элементу разметки не относится.
Как только браузер открывает страницу и видит это объявление, он понимает, что страница разработана на HTML 5 и ее нужно обрабатывать в соответствии с этим стандартом.
Ниже мы еще рассмотрим другие стандарты.
Они имеют довольно длинные надписи, которые тяжело запомнить.
Вот этим и отличается HTML 5 от других версий.
В нем все оптимизированно. И вместо длинных надписей и ссылок на стандарты, мы просто вводим такую короткую запись.
Причины появления декларации Доктайп в HTML
В те времена, когда html был единственным языком, мы не прописывали никакие инструкции. Тогда просто в качестве объявления вставляли тег html, чтобы браузер определил, что это такое.
А дальше между этими элементами писали другие теги html для страницы.
История объявления doctype уходит в начало 90-х. Тогда к выходу готовилась новая версия браузера Internet Explorer 6 версии.
На то время со стандартами языка все было плохо.
Разработчики браузеров их не соблюдали. А создатели сайтов отвечали им взаимностью.
Каждый браузер работал по своим собственным, ни с чем не совместимыми стандартами.
Консорциум что-то выпускал, но к нему никто не прислушивался.
Разработчики IE поняли, что так дальше продолжаться не может. И имеет смысл сделать так, чтобы новая версия браузера по возможности соответствовала всем стандартам.
Однако выяснилось, что выпустить новую версию, соответствующую стандартам, так просто не получится.
Дело в том, что на многих сайтах того времени структура html документа не соответствовала стандартам. Такие страницы просто не стали бы правильно отображаться в новом браузере.
Перед разработчиками Internet Explorer стала такая проблема, как несовместимость нового браузера и старых веб-страниц.
Они долго бились над этой проблемой до тех пор, пока один специалист по имени Тантек Челик не предложил следующее.
Tantek Çelik Турецко-американский ученый-компьютерщик
А давайте наш браузер будет иметь два режима — соответствие и несоответствие стандартам. И отображать страницу либо в одном, либо в другом режиме.
Но как же браузер догадается, в каком режиме ему отображать страницу?
В таком случае, он будет смотреть на объявление <!Doctype>.
Если в начале документа он его находит, значит, что разработчик был грамотный, и документ отображается по стандартам.
И наоборот.
Если доктайпа нет, то документ будет отображаться, как и раньше.
Благодаря всему этому был создан так называемый переключатель режимов. На данный момент так ведут себя все современные браузеры.
Браузер переключается в режим стандартов если видит строку doctype. В другом же случае он переключается в режим обратной совместимости со старыми версиями языка.
Нам же нужно, чтобы документ отображался в режиме стандартов. Потому что в режиме обратной совместимости может слетать часть страницы в html и css.
Шаблоны Doctype — все виды с правильными примерами
За прошедшее время вышло несколько версий языка html. На данный момент консорциум рекомендует использовать HTML 5. Однако есть и другие типы. И ниже мы их все рассмотрим.
Направления
Некоторые версии языков HTML и XHTML имеют разные направления:
- Strict (строгое) — все нежелательные элементы и атрибуты запрещены. Здесь нельзя допускать ошибки. Например, незакрытый тег, пропущенный слэш и так далее. В итоге, если будут ошибки, то страница будет отображаться неправильно.
- Transitional (переходное) — многие ошибки разрешены. Оно предназначено для тех, кто не хочет заморачиваться со всей этой валидацией. Здесь можно допускать какие-то ошибки, потому что они никак не повлияют на страницу.
- Frameset (вставка фрэймов) — позволяет вставлять на страницу фрэймы. Сейчас это практически не используется. Однако раньше мы могли в одну страницу вложить дополнительно еще несколько страниц. Например, разделить экран на две части и показывать сразу две страницы.
Объявления типа документа (X)HTML
| Вид | Пример |
|---|---|
| HTML 5 и выше | <!DOCTYPE html> |
| HTML 4.01 Strict | <!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»> |
| HTML 4.01 Transitional | <!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»> |
| HTML 4.01 Frameset | <!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Frameset//EN» «http://www.w3.org/TR/html4/frameset.dtd»> |
| XHTML 1.0 Strict | <!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Strict//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd»> |
| XHTML 1.0 Transitional | <!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»> |
| XHTML 1.0 Frameset | <!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Frameset//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd»> |
| XHTML 1.1 — DTD | <!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.1//EN» «http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd»> |
| XHTML Basic 1.1 | <!DOCTYPE html PUBLIC «-//W3C//DTD XHTML Basic 1.1//EN» «http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd»> |
Инструкции типа документа MathML
| Вид | Примеры |
|---|---|
| MathML 2.0 — DTD | <!DOCTYPE math PUBLIC «-//W3C//DTD MathML 2.0//EN» «http://www.w3.org/Math/DTD/mathml2/mathml2.dtd»> |
| MathML 1.01 — DTD | <!DOCTYPE math SYSTEM «http://www.w3.org/Math/DTD/mathml1/mathml.dtd»> |
Для составных документов
| Вид | Примеры |
|---|---|
| XHTML + MathML + SVG — DTD | <!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN» «http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd»> |
| XHTML + MathML + SVG профиль (XHTML в качестве основного языка) — DTD | <!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN» «http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd»> |
| XHTML + MathML + SVG профиль (с использованием SVG в качестве хоста) — DTD | <!DOCTYPE svg:svg PUBLIC «-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN» «http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd»> |
Doctype SVG Public
Помимо специфики обработки (X)HTML, объявления доктайп в языках XML полезны только для инструкции именованных сущностей и облегчения проверки документов на основе DTD.
Поэтому во многих языках XML такие инструкции не обязательны.
Приведенный ниже список можно использовать только в том случае, если вам действительно нужно сделать объявление для таких типов документов.
| Тип | Пример |
|---|---|
| SVG 1.1 Full — DTD | <!DOCTYPE svg PUBLIC «-//W3C//DTD SVG 1.1//EN» «http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd»> |
| SVG 1.0 — DTD | <!DOCTYPE svg PUBLIC «-//W3C//DTD SVG 1.0//EN» «http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd»> |
| SVG 1.1 Basic — DTD | <!DOCTYPE svg PUBLIC «-//W3C//DTD SVG 1.1 Basic//EN» «http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-basic.dtd»> |
| SVG 1.1 Tiny — DTD | <!DOCTYPE svg PUBLIC «-//W3C//DTD SVG 1.1 Tiny//EN» «http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd»> |
Устаревшие объявления
Эти инструкции только для общего понимания. Вместо них лучше использовать более новые версии.
| Вид | Пример |
|---|---|
| HTML 2.0 — DTD | <!DOCTYPE html PUBLIC «-//IETF//DTD HTML 2.0//EN»> |
| HTML 3.2 — DTD | <!DOCTYPE html PUBLIC «-//W3C//DTD HTML 3.2 Final//EN»> |
| XHTML Basic 1.0 — DTD | <!DOCTYPE html PUBLIC «-//W3C//DTD XHTML Basic 1.0//EN» «http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd»> |
Структура Doctype html — все параметры с описанием
Ниже более подробно рассмотрим структуру самого объявления. Ведь как вы уже заметили, в более поздних версиях объявлений идут многочисленные атрибуты.
Синтаксис
<!DOCTYPE [Тип корневого элемента] [Публичность] "[Регистрация]//[Организация]//[Тип] [Имя]//[Язык]" "[URL]">Атрибуты с пояснениями
Объявление начинается с восклицательного знака и слова doctype. Далее идут следующие компоненты.
Тип корневого элемента — в языке HTML им является сам тег html.
Публичность — объект является открытым или закрытым.
Ставим PUBLIC если формальные правила являются общедоступными. Если объект является системным ресурсом (например, локальный файл), то ставим значение SYSTEM.
Для HTML/XHTML указывается значение PUBLIC.
Регистрация — сообщает, что разработчик DTD зарегистрирован в международной организации по стандартизации (International Organization for Standardization, ISO).
Принимает одно из двух значений: плюс (+) — разработчик зарегистрирован в ISO и — (минус) — разработчик не зарегистрирован.
Для W3C значение ставится «-».
Организация — уникальное название организации, разработавшей DTD.
Официально HTML/XHTML публикует W3C, это название и пишется в <!DOCTYPE>.
Тип — тип описываемого документа. Для HTML/XHTML значение указывается DTD.
Имя — уникальное имя документа для описания DTD.
Язык — язык, на котором написан текст для описания объекта.
Содержит две буквы, пишется в верхнем регистре. Для документа HTML/XHTML указывается английский язык (EN).
URL — адрес документа с DTD. Содержит формальное описание правил языка.
Например:
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
Кстати, давайте наберем его в браузере и посмотрим, что же он из себя представляет.
Как видим, в нем довольно сложно разобраться. Но нам это и не нужно.
Файл .dtd предназначен прежде всего для того, чтобы его читал и обрабатывал браузер.
Этот файл содержит в частности следующую информацию.
Объявление типов элементов — это перечень допустимых типов элементов, которые применяются в данной версии языка.
Также присутствует модель содержания каждого из элементов. То есть, перечисление элементов, которые могут быть вложены в другие элементы.
Например, в элемент html могут быть вложены элементы head и body.
Объявление атрибутов — это перечень допустимых атрибутов, их значений и типы элементов.
Какую версию Доктайп лучше использовать сейчас?
В общем, версий объявлений много. Однако многие страницы используют именно такую версию на HTML 5.
<!DOCTYPE html>Почему именно ее?
При запуске html документа, браузер в первую очередь считывает описание dtd с сайта консорциума W3C. Затем он отображает документ в соответствии с правилами указанного файла dtd.
Однако так думали только разработчики стандарта W3C.
Браузеры в свою очередь делать этого не стали и никогда не будут. Единственное, на что они смотрят, так это на наличие или отсутствие объявления doctype.
В html 5 такая форма инструкции введена, как стандарт. Вот ее рекомендуется использовать.
Частые вопросы
Что будет если не указать DOCTYPE?
На странице без такого объявления половина оформления просто исчезнет. Причем это произойдет во многих браузерах. Например, не будет отображаться меню или другие элементы. Поэтому всегда нужно прописывать такую инструкцию.
Для какого тега элемент DOCTYPE выступает родителем?
Ни для какого. У него нет дочерних элементов, поскольку это всего лишь инструкция для браузера, которая не является разметкой страницы.
У меня возникает синтаксическая ошибка в DOCTYPE html
Посмотрите, чтобы объявление стояло на самой первой строчке и перед ним ничего не было. Сверьте со стандартом правильное написание. Также возможно, что html страницу вы выводите на Python. Но напрямую ее нельзя вывести. Поэтому используйте библиотеку шаблонов.
Nov 8, 2021 [Updated on Oct 28, 2022]
When an HTML page is missing a Document Type Definition (DOCTYPE or DTD) declaration, the browser won’t be able to interpret it correctly. If you don’t want your website to be displayed as if it was made in the 90s, you need to understand the importance of the DOCTYPE and know how to get the right one.
What Does “Doctype Not Declared in HTML” Mean?
The error looks like a warning: “Doctype must be declared first.” The browser needs to understand which types of HTML and CSS you are using and render the page in standard mode. The absence of the DOCTYPE or its incorrect usage will force the browser to switch to quirks mode. It means that the browser will do its best to layout the page that is considered to be old or created against web standards.
This video by John Morris will give you a better idea of how the DOCTYPE declaration looks in practice.
Note that the DOCTYPE is optional for XML files, as these are handled in standard mode by default.
What Triggers This Issue?
The warning about the need to declare a DOCTYPE may be caused by several reasons:
- The DOCTYPE line was never added or was deleted by accident/after an update.
- You have declared the DOCTYPE but used the wrong type that does not correspond with the type of document.
- You made a mistake while writing the code.
How To Check the Issue
Declaring a DOCTYPE is the first thing you need to do when you start writing an HTML document. It comes in the first line before any tags. To check if there is this line, you may access your HTML document and look for a declaration at the top of the code. You can also check it by right-clicking on the webpage and choosing “View Page Source.”
Analyze not only if Pages don’t have doctype declared but the entire site!
Make a full audit to find out and fix your technical SEO in order to improve your SERP results.
Why Is This Important?
If you want your website to be displayed correctly in every browser, you need to specify which HTML and CSS you are using. Otherwise, the webpage’s content will take longer to process, and the result may not be successful. Each browser will show the page differently; the elements will be displayed incorrectly. It may hide some components while facing the errors that existed in older browsers.
How To Fix the Issue
If using WordPress, you need to go from your Dashboard to Appearance > Theme Editor. On the right side, you will see a header.php file. You should check the first line: if the DOCTYPE declaration is missing, insert it by typing <!DOCTYPE html>. Note that in Angular, the declaration needs to be done in the index or main HTML file.
The line containing <!DOCTYPE html> works for HTML5 documents. In older versions like HTML4 or XHTML, the declaration is more difficult and contains more information. This article may help you understand which DOCTYPE should be used according to the type of document.
Ivan Palii
Marketing expert
Ivan works as a product marketing specialist at Sitechecker. Obsessed with analytics and creating a business strategy for SaaS products.
Related Source Code Issues
VSCode жалуется на отсутствие DOCTYPE в html файлах. Система сборки Meteor автоматически добавляет типы файлов, и их наличие вызывает ошибки сборки. Как заставить vscode игнорировать отсутствующий тип документа в html файлах?
Ошибка я получаю за это.
Doctype must be declared first.
2 ответа
Лучший ответ
Вам нужно создать .htmlhintrc в корневой папке
Вы можете перейти на страницу http://htmlhint.com/ и установить удобные для вас правила и создать файл. htmlhintrc
Вот пример с "doctype-first": false,, который проигнорирует получаемую вами ошибку, если это ваша цель.
{
"tagname-lowercase": true,
"attr-lowercase": false,
"attr-value-double-quotes": true,
"doctype-first": false,
"tag-pair": true,
"spec-char-escape": true,
"id-unique": true,
"src-not-empty": true,
"attr-no-duplication": true,
"title-require": true
}
7
ruffin
7 Апр 2020 в 19:59
Перейдите в настройки VScode> Настройки> HTML-подсказка и добавьте это:
«htmlhint.options»: {«doctype-first»: false}
3
André Bueno
29 Май 2020 в 12:35
You’ve done all the right stuff, but your site doesn’t look or work as it should in the latest browsers.
Article Continues Below
You’ve written valid XHTML and CSS. You’ve used the W3C standard Document Object Model (DOM) to manipulate dynamic page elements. Yet, in browsers designed to support these very standards, your site is failing. A faulty DOCTYPE is likely to blame.
This little article will provide you with DOCTYPEs that work, and explain the practical, real–world effect of these seemingly abstract tags.
WHY A DOCTYPE?#section2
Per HTML and XHTML standards, a DOCTYPE (short for “document type declaration”) informs the validator which version of (X)HTML you’re using, and must appear at the very top of every web page. DOCTYPEs are a key component of compliant web pages: your markup and CSS won’t validate without them.
As mentioned in previous ALA articles (and in other interesting places), DOCTYPES are also essential to the proper rendering and functioning of web documents in compliant browsers like Mozilla, IE5/Mac, and IE6/Win.
A recent DOCTYPE that includes a full URI (a complete web address) tells these browsers to render your page in standards–compliant mode, treating your (X)HTML, CSS, and DOM as you expect them to be treated.
Using an incomplete or outdated DOCTYPE—or no DOCTYPE at all—throws these same browsers into “Quirks” mode, where the browser assumes you’ve written old-fashioned, invalid markup and code per the depressing industry norms of the late 1990s.
In this setting, the browser will attempt to parse your page in backward–compatible fashion, rendering your CSS as it might have looked in IE4, and reverting to a proprietary, browser–specific DOM. (IE reverts to the IE DOM; Mozilla and Netscape 6 revert to who knows what.)
Clearly, this is not what you want. But it is often what you’ll get, due to the preponderance of incorrect or incomplete DOCTYPE information this article hopes to correct.
(Note: The Opera browser does not play by these rules; it always attempts to render pages in standards–compliant mode. Go, Opera! On the other hand, Opera does not yet offer solid support for the W3C DOM. But they’re working on it.) {Ed: Since this article was first published, Opera has delivered the DOM-compliant Opera 7 browser.}
WHERE HAVE ALL THE DOCTYPES GONE?#section3
Since DOCTYPES are vital to the proper functioning of web standards in browsers, and since W3C is a leading creator of web standards, you might expect W3C’s website to provide a listing of proper DOCTYPEs, and you might also expect to be able to find this information quickly and easily in a single location. But as of this writing, you can’t. {Ed. Prompted in part by this article, the W3C now lists standard DOCTYPEs on its site. You will find the listing a few screens into the W3C tutorial, “My Web site is standard. And yours?”}
W3.org is not A List Apart, WebReference, or Webmonkey. It’s not intended to help web designers, developers, and content folks get up to speed on the latest technological recommendations and practices. That’s not its job.
W3C does publish a series of tutorials, though most web developers are unaware of it. Mainly, though, W3C’s site houses a collection of proposals, drafts, and Recommendations, written by geeks for geeks. And when I say geeks, I don’t mean ordinary web professionals like you and me. I mean geeks who make the rest of us look like Grandma on the first day She’s Got Mail.™
You can search for DOCTYPEs all day at w3.org without finding one page that lists them all. And when you do hunt down a DOCTYPE (generally in relation to a particular Recommendation or Working Draft), it’s often one that won’t work on your site.
Scattered throughout W3C’s site are DOCTYPEs with missing URIs, and DOCTYPEs with relative URIs that point to documents on W3C’s own site. Once removed from W3C’s site and used on your web pages, these URIs point to non–existent documents, thus fouling up your best efforts and the browser’s.
For instance, many sites sport this DOCTYPE, copied and pasted directly from w3.org:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
If you look at the last part of the DOCTYPE (“DTD/xhtml1-strict.dtd”), you’ll see that it is a relative link to a document on W3C’s site. Since that document is on W3C’s site but not yours, the URI is useless to the browser.
The DOCTYPE you’d actually want to use is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">Notice that the latter DOCTYPE includes a complete URI at the end of the tag. Since the tag provides a valid location on the web, the browser knows where to find it, and will render your document in standards–compliant mode.
DOCTYPES THAT WORK#section4
So what DOCTYPEs should we use? Glad you asked. The following complete DOCTYPEs are the ones we need:
HTML 4.01 Strict, Transitional, Frameset#section5
<!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 HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">XHTML 1.0 Strict, Transitional, Frameset#section6
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">XHTML 1.1 DTD#section7
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">NEXT STEPS#section8
How can you help improve support for standards on the web? Besides bookmarking this page (and copying and pasting these DOCTYPEs for your own use), if your web editor inserts DOCTYPEs, you might want to check them out and compare them to the list above.
Many well–intentioned software makers have cut and pasted incomplete DOCTYPEs from W3C into their software. Result: when you use these programs’ built–in functionality to insert DOCTYPEs in your pages, the browsers go into Quirks mode, undoing all your hard work.
It’s worth contacting the folks who make your favorite authoring package, showing them the proper DOCTYPEs, and politely requesting them to address this issue in an incremental upgrade. (In some cases, you may also be able to modify your editor yourself.)
COMING SOON#section9
We have every reason to believe that W3C’s site will soon sport a handy listing of accurate, usable DOCTYPES and other essential information in an easy–to–find location. In fact, Karl Dubost, Conformance Manager of W3C’s Quality Assurance team, contributed to the information in this little article.
Likewise, when The Web Standards Project relaunches (real soon), it will also provide this information. {Ed. note: The Web Standards Project relaunched in late 2002.}
But sites are being designed and built every day, and you need this information now—so there it is.
Happy authoring and rendering!