Doctype html как правильно прописать

HTML элементы. Объявление <!DOCTYPE>

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

Объявление <!DOCTYPE> не является HTML тегом; это инструкция для веб-браузера, которая сообщает, в какой версии HTML написана страница.

В HTML 4.01 объявление <!DOCTYPE> относится к DTD, потому что HTML 4.01 базировался на SGML. DTD определяет правила для языка разметки так, чтобы браузеры визуализировали содержание правильно.

HTML5 не основан на SGML, и поэтому не требует ссылки на DTD.

Совет: Всегда добавляйте объявление <!DOCTYPE> к HTML-документам, чтобы браузер знал, какой тип документа следует ожидать.

Поддержка браузерами

Элемент
<!DOCTYPE>	Yes	Yes	Yes	Yes	Yes

Отличия между HTML 4.01 и HTML5

Существует три разных объявления <!DOCTYPE> в HTML 4.01. В HTML5 существует тольки один вид объявления:

HTML элементы и Doctypes

Советы и примечания

Совет: Объявление <!DOCTYPE> НЕ чуствительно к регистру.

Совет: Чтобы проверить, правильный ли HTML-код ваших веб-документов, перейдите на валидатор-сервис W3C.

Общие объявления DOCTYPE

HTML 5

HTML 4.01 Strict

Этот DTD содержит все элементы и атрибуты HTML, но НЕ ВКЛЮЧАЕТ презентационные или устаревшие элементы (например, шрифт). Фреймы не разрешены.

HTML 4.01 Transitional

Этот DTD содержит все HTML-элементы и атрибуты, включая презентационные и устаревшие элементы (например, шрифт). Фреймы не разрешены.

HTML 4.01 Frameset

Этот DTD соответствует HTML 4.01 Transitional, но позволяет использовать содержимое фреймов.

XHTML 1.0 Strict

Этот DTD содержит все элементы и атрибуты HTML, но НЕ ВКЛЮЧАЕТ презентационные или устаревшие элементы (например, шрифт). Фреймы не разрешены. Разметка также должна быть записана как хорошо сформированный XML.

XHTML 1.0 Transitional

Этот DTD содержит все HTML-элементы и атрибуты, включая презентационные и устаревшие элементы (например, шрифт). Фреймы не разрешены. Разметка также должна быть записана как хорошо сформированный XML.

XHTML 1.0 Frameset

Этот DTD соответсвует XHTML 1.0 Transitional, но позволяет использовать содержимое фреймов.

XHTML 1.1

Этот DTD соответсвует XHTML 1.0 Strict, но позволяет добавлять модули (например, для обеспечения поддержки Ruby для восточноазиатских языков).

Почему важен DOCTYPE и как его правильно использовать

Решил проводить регулярные лекции и практические занятия со своими сотрудниками по программированию на PHP, MySQL, Javascript. А также другим технологиям необходимым для выпуска качественных сайтов. Начать решил с самого «верха», с HTML тэгов. Буду рад, любым комментариям 🙂
Сразу оговорюсь, что бОльшая часть информации я нашел в интернете, внизу статьи будут приведены ссылки на источники. Часть информации была переведена совместно с google translate.
Итак:

Почему так важен DOCTYPE

Вроде бы вы сделали все правильно, но ваш сайт почему-то не выглядит или не работает, как ожидалось, в последних версиях броузеров.
Вы написали правильный стандартный XHTML код и стандартный CSS. Вы воспользовались стандартной спецификацией для работы с DOM (Document Object Model), чтобы управлять динамическими элементами на странице. И все-таки, в броузерах, которые казалось бы сделаны с соблюдением именно этих стандартов, ваш сайт не работает. Скорей всего, ошибка кроется в неправильном заголовке DOCTYPE.
Эта небольшая статья расскажет вам о заголовках DOCTYPE, которые работают, а также объяснит практическое и теоретическое значение этого, казалось бы отвлеченного от реальности, тега.

Что такое DOCTYPE?

Согласно спецификациям HTML и XHTML тег DOCTYPE (что означает «объявление типа документа») сообщает валидатору, какую именно версию (X)HTML вы используете в своей странице. Этот тег должен всегда находиться в первой строке каждой страницы. Тег DOCTYPE — ключевой компонент web-страниц, претендующих на соответствие стандартам: без него ваш код и CSS не пройдут проверку валидатором.
Тег DOCTYPE также важен для правильного отображения и работы страницы в броузерах, соответствующих стандартам (Mozilla, IE5/Mac, и IE6/Win).
Тег DOCTYPE, в атрибутах которого указывается полный URI (полный web-адрес), сообщает броузерам, что страницу нужно вывести с соблюдением определенного стандарта или подвида этого стандарта.
Если вы будете пользоваться неполным тегом DOCTYPE, устаревшим его видом, или вообще забудете про него, броузер перейдет в «загадочный» (quirk) режим и будет исходить из предположения, что вы писали код страницы с ошибками и вольно отступали от стандартов, т.е. так, как писали в конце 90-ых годов.
В этом режиме броузер попытается разобрать вашу страницу по правилам обратной совместимости и выведет на экран, например, CSS так, как его вывел бы Internet Explorer 4-ой версии, а DOM будет работать так, как он работал именно в этом броузере (IE переключается в свой старый DOM, а Mozilla и Netscape 6 переключается вообще в бог знает что).
Понятно, что для вас эти выкрутасы не желательны. Но именно это вы и получите, если будете пользоваться неполным или неправильным тегом DOCTYPE.

Проблема

Когда создавали NN4, IE4 выполняли правила CSS не совсем в соответствии со стандартом. Реализация Netscape была просто ужасной, IE4 подошел к реализации стандарта лучше, но тем не менее, реализовал его не до конца. Хотя IE 5 Windows исправил множество ошибок IE 4, но оставались другие сбои в CSS (в основном в модели окон (window model)).
Поэтому, когда соответствие стандартам стало важным, W3C поставил производителей браузеров перед жестким выбором.
Приблизится к спецификации W3C было одним из решений проблемы, но если бы производители браузеров просто изменили реализацию CSS, чтобы соответствовать стандартам полностью, многие веб-сайты, «поползли» бы в большей или меньшей степени или оказались полностью неработоспособными. Такое сближение с соблюдением стандарта повлекло бы за собой проблемы. С другой стороны, не приведение к соответствию стандартов могло бы внести вечную путаницу в эпоху войны браузеров.

Решение

позволить веб-разработчикам, которые знали о стандартах, выбирать какой режим использовать.
продолжать показывать старые страницы по старым (совместимым) правилам. (quirks mode)

Иными словами, всем браузерам необходимо было работать в двух режимах: режим совместимости для старых правил, и строгого режима для стандарта.
IE Mac был первым браузером использовавшим оба режима, а Windows IE 6, Mozilla, Safari, Opera и последовали его примеру.
IE 5 Windows, а также старые браузеры, как Netscape 4, постоянно заблокированы в режиме совместимости.

Решение о выборе, какой режим отображения требуется вызвать, было найдено в использовании «DOCTYPE» переключения. Согласно стандартам, любой (X) HTML документ должен иметь DOCTYPE который рассказывает всему миру, какой тип (X) HTML документа он использует.

Допустимые DTD

DOCTYPE	Описание
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "www.w3.org/TR/html4/strict.dtd">	Строгий синтаксис HTML.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "www.w3.org/TR/html4/loose.dtd">	Переходный синтаксис HTML.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "www.w3.org/TR/html4/frameset.dtd">	В HTML-документе применяются фреймы.
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">	Строгий синтаксис XHTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">	Переходный синтаксис XHTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">	Документ написан на XHTML и содержит фреймы.
XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">	Разработчики XHTML 1.1 предполагают, что он постепенно вытеснит HTML. Никакого деления на виды это определение не имеет, синтаксис один и подчиняется четким правилам.

HTML 4.01 DTDs

HTML 4.01 Strict — Не разрешает презентационной (оформительской) разметки, аргументируя тем, что этоим должен заниматься CSS.
Transitional DTD позволяет некоторые устаревшие аттрибуты и элементы
Если используются фреймы — должен быть использован frameset doctype

XHTML 1.0 DTDs

XHTML Strict DTD самый строгий существующий DTD: устаревшие (см ниже) теги не поддерживаются, и код должен быть написан правильно
XHTML Transitional DTD такой же как XHTML Strict DTD, но старые теги разрешены. Это НАИБОЛЕЕ ПОПУЛЯРНЫЙ в настоящий момент DTD.
XHTML Frameset DTD единственный XHTML DTD который поддерживает фреймы.

XHTML 1.1 DTD

Это новый DTD, который имеет строгость как у XHTML 1.0 Strict, и основан на фреймворке и модулях описанных в Modularization of XHTML (не стал искать что это такое :).

Статистика использования различных DTD

Получается что Более 50% сайтов работают в режиме quirk mode — то есть в режиме IE4!

Устаревшие тэги и аттрибуты

Устаревшие тэги в алфавитном порядке

<applet> Используйте тег<object>.
<basefont> используйте CSS.
~~<blockquote>используйте CSS.~~
<center>используйте CSS.
<dir>используйте <ul>.
~~используйте CSS.~~
используйте CSS.
<isindex>
<listing> используйте <pre> или CSS.
<menu>замените тегом<ul> или CSS.
<nextid>
<plaintext> используйте <pre> или <a href=’view-source:http://somesite.com’>Source code</a>.
<s>используйте<del> или <ins>.
<strike> используйте <del> или<ins>.
используйте CSS.
<xmp> используйте <pre> и CSS стиль.

Устаревшие HTML / XHTML аттрибуты тегов. Все они могут быть заменены CSS стилями.

align
alink
background
bgcolor
color
hspace
link
size
text
type
vlink
vspace

Разница между HTML и XHTML (указаны правила для XHTML)

Тэги должны быть написаны в нижнем регистре, вместо <IMG SRC="resource/frankisboat.gif" WIDTH="389" HEIGHT="227" BORDER="0" ALT="boat">, как это было в HTML, нужно писать: <img src="resource/frankisboat.gif" width="389" height="227" border="0" alt="boat" />
Все теги должны закрываться, или с использованием тэга со слешем в паре, как параграф ( ) например, или самозакрывающиеся тэги, как например ( ).
Все теги должны быть правильно вложены друг в друга, без перекрытий
Не должны использоваться устаревшие теги
Все аттрибуты должны быть набраны в нижем регистре
Все значение аттрибутов должны быть заключены в одинарные или двойные кавычки
Все аттрибуты должны использоваться в длинной форме, а не в короткой: disabled="disabled" в XHTML против DISABLED в HTML
Структура должна быть отделена от контента. Например тег — это часть контента (параграф) и вы не можете поместить в него например таблицу, потому что таблица это часть структуры (форматирования).

Совместимость и IE8

IE8 имеет четыре режима: IE 5.5 режим совместимости, IE 7 стандартный режим, IE в 8 стандартном режиме и IE 8 в режиме совместимости.
Выбор способа зависит от данных из различных источников: DOCTYPE, meta элементов, заголовков HTTP, периодически загружаемых данных от Microsoft (!), интрасети, настроек, сделанных пользователем, настроек сделанных администратором, наличия сайта в блеклисте microsoft и прочее!

HTML <!DOCTYPE> Declaration

The <!DOCTYPE> declaration is the first line of the code in HTML or XHTML document. It specifies the HTML version used in the document. Each HTML document should start with this declaration: so the browsers will render the page compliant with HTML standards. In HTML 4.01, this declaration refers to a Document Type Definition (DTD), which specifies the structure and the legal elements of an XML document.

The <!DOCTYPE> is declared before the <html> tag. The declaration is not case sensitive.

Syntax

<!DOCTYPE> Parameters

Root element — a parent element that contains all the other elements. For HTML it is the <html> tag.

Publicity — the document can be PUBLIC or SYSTEM (local files, for example). For HTML/XHTML the value is PUBLIC.

Registration — can have two values: plus (+) — the developer is registered in ISO (International Organization for Standardization) and — (minus) — the developer is not registered. For W3C, the value is set to «-«.

Organization — the name of DTD developer. The developer of HTML/XHTML is W3C, and its name is declared in <!DOCTYPE>.

Type — the type of the document. For HTML/XHTML the value is DTD.

Name — unique identifier describing DTD.

Language — the language of the document (two letters in uppercase). For HTML/XHTML the language is English (EN).

URL — the URL of the document type description (e.g. https://www.w3.org/TR/html4/loose.dtd).

Types of the <!DOCTYPE> Declaration for HTML

There are three types of the <!DOCTYPE> declaration for HTML:

Strict — contains all HTML elements and attributes. However, the presentational or deprecated elements are not included.

Transitional — contains all HTML elements and attributes, including presentational and deprecated elements. Frames are not allowed.

Frameset — is equal to Transitional, but allows the use of frames.

Html <!DOCTYPE> Описание

Определение <!DOCTYPE> должно быть самой первой вещью в вашем HTML документ, до <html> Тега.

Определение <!DOCTYPE> не является HTML-тегом; Это инструкция для веб-браузера о том, что версия HTML страница написана на.

В HTML 4,01, <!DOCTYPE> определение относится к DTD, потому что HTML 4,01 был основан на SGML. DTD определяет правила для языка разметки, так что браузеры отображают содержимое правильно.

HTML5 не основан на SGML и поэтому не требует ссылки на DTD.

Совет: Всегда добавляйте <!DOCTYPE> объявление в HTML-документы, чтобы Браузер знал, какого типа документ ожидать.

Поддержка браузера

Элемент
<!DOCTYPE>	Да	Да	Да	Да	Да

Различия между HTML 4,01 и HTML5

Существует три различных <!DOCTYPE> объявления в HTML 4,01. В HTML5 есть только один: