Doctype HTML - что это? Что нужно знать об элементе. Правильный DOCTYPE в HTML5 Значение тега doctype

С декларации должен начинаться любой HTML документ. Эта декларация должна располагаться перед .

В действительности декларация не является тегом HTML. Это специальная инструкция для браузера, информирующая его о том, какая версия HTML используется на данной странице.

В HTML 4.01 декларация ссылается на DTD (определение типа документа, которое задает синтаксис конструкций разметки), так как HTML 4.01 базируется на SGML (стандартный обобщённый язык разметки). DTD определяет правила для языка разметки, благодаря этому браузер корректно отображает контент страницы.

HTML5 не базируется на SGML и поэтому ему не нужно ссылаться на DTD.

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

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

Декларация должна быть в точности такая, как в примере (включая написание заглавными буквами слова "DOCTYPE"). В отличие от других тегов этот тег не закрывается.

Разница между HTML 4.01 и HTML5

В HTML 4.01 существует три разновидности декларации . В HTML5 есть только один вид декларации.

Виды декларации DOCTYPE

HTML 4.01 Strict

Эта DTD содержит все HTML элементы и атрибуты, ИСКЛЮЧАЯ запрещенные элементы и элементы представления (вроде элемента font). Использование фреймов не допускается.

HTML 4.01 Transitional

Эта DTD содержит все HTML элементы и атрибуты, ВКЛЮЧАЯ запрещенные элементы и элементы представления (вроде элемента font). Использование фреймов не допускается.

HTML 4.01 Frameset

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

XHTML 1.0 Strict

Эта DTD содержит все HTML элементы и атрибуты, ИСКЛЮЧАЯ запрещенные элементы и элементы представления (вроде элемента font). Использование фреймов не допускается. При этом разметка должна соответствовать правилам XML.

XHTML 1.0 Transitional

Эта DTD содержит все HTML элементы и атрибуты, ВКЛЮЧАЯ запрещенные элементы и элементы представления (вроде элемента font). Использование фреймов не допускается. При этом разметка должна соответствовать правилам XML.

XHTML 1.0 Frameset

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

XHTML 1.1

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

HTML пример

Декларация HTML документа по стандарту HTML5:

Содержимое документа......

В HTML-нотации HTML5 регистр DOCTYPE-объявления формально не имеет значения, поэтому встречаются разные варианты его написания, например:

Но в HTML5 предусмотрена XML-нотация, называемая XHTML5. В XML ключевые слова (в данном случае DOCTYPE) набираются заглавными буквами, а имена элементов чувствительны к регистру символов: например, и - не одно и то же. В XHTML имена элементов должны быть в нижнем регистре . Подстрока html в составе DOCTYPE - имя корневого элемента документа, значит для неё тоже следует использовать нижний регистр:

Следовательно, именно этот вариант является наиболее правильным и предпочтителен вне зависимости от используемой в HTML5-документе нотации.

Что такое DOCTYPE

DOCTYPE-объявление располагается в самом начале кода HTML-документа и необходимо для переключения браузера в режим соответствия стандартам. Только в этом режиме можно рассчитывать на единообразное отображение HTML-страницы в разных браузерах. (Браузер - это программа для просмотра сайтов.)

Без DOCTYPE (либо при неправильном DOCTYPE) браузеры отображают страницу в режиме совместимости со старыми браузерами - вплоть до имитации их ошибок (багов). Кроме того, современные возможности (например, поддержка CSS-свойства padding для элемента IMG) доступны только в режиме соответствия стандартам. Следует всегда снабжать HTML-документы DOCTYPE-объявлением.

Первой строкой в документе HTML, должно идти объявление DOCTYPE . Этим постом, я расскажу что это такое и с чем его едят.

Определение DOCTYPE - это не тег HTML, а инструкция веб-браузеру, указывающая, на какой версии языка HTML написан документ (веб страничка).

DOCTYPE ссылается на определение типа документа (DTD — Document Type Definition ). DTD задает правила для языка разметки, для того чтобы браузеры могли правильно отобразить содержание веб странички.

Рассмотрим все доступные варианты DOCTYPE по рекомендации W3C .

HTML 4.01 Strict

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

HTML 4.01 Transitional

Данный DTD содержит все HTML элементы и атрибуты, включая презентационные и устаревшие элементы (например: тег font ). Использование фреймов в документе объявленном с таким DOCTYPE также не допускается.

HTML 4.01 Frameset

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

Примечание: в целом, в современном веб дизайне, фреймы не используются вовсе. Так что, данный DOCTYPE, можно считать устаревшим.

XHTML 1.0 Strict

DTD, который содержит все HTML элементы и атрибуты, но не включает презентационные или устаревшие элементы (например, все тот же, тег font ). Использование фреймов не допускается. Разметка веб страницы должна быть оформлена по всем правилам документа XML. То есть, все теги должны быть обязательно закрыты. Все теги должны иметь общего родителя, которым в HTML документе является тег . Все атрибуты должны быть заключены в кавычки.

В настоящее время, как по мне, данный DOCTYPE является наиболее предпочтительным для наиболее валидной верстки.

XHTML 1.0 Transitional

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

XHTML 1.0 Frameset

И еще один DTD с фреймами, аналогичен XHTML 1.0 Transitional, но позволяет использование фреймов в содержании веб документа.

XHTML 1.1

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

В следующем посте можно будет посмотреть на , которые поддерживаются в той или иной DTD.

Для проверки валидности HTML документа можно воспользоваться

Здравствуйте, уважаемые читатели блога сайт. Я хочу продолжить рассказывать об основах работы с Html с самого начала, последовательно и ничего не опуская. Сегодня мы поговорим о специальном теге (декларации) Doctype, узнаем как правильно оформлять комментарии в ХТМЛ коде, как прописывать заголовок веб документа Title и постараемся разобраться в отличиях блочных и строчных элементах.

В предыдущей статье из рубрики (в которой в основном рассказывалось про то, ) мы закончили на том, что любой документ в интернете должен иметь определенную структуру.

Директива Doctype для Html, Xhtml и ХТМЛ 5

Первым элементом языка разметки, который вы встретите в любом правильном Web документе (странице сайта), будет специальная директива Doctype. Она начинается с угловой скобки и проставленного сразу же за ней восклицательного знака

Сам по себе элемент Doctype служит для объявления типа данного документа и помогает браузеру понять, на какую версию Html или XHTML (по классификации валидатора W3C) ему следует опираться при разборе кода загружаемой веб страницы.

Если тип документа не будет указан в этой директиве в соответствии с общепринятыми правилами, то браузер, скорее всего, все равно правильно отобразит ваш документ, но не факт, что тоже самое сделают и другие популярные тысяч ваших читателей. Поэтому Doctype должен присутствовать в исходном коде страницы обязательно и составлен он должен быть правильно.

Но давайте на этом остановимся чуть поподробнее. Сейчас мы с вами наблюдаем некий дуализм или же два типа документов в сети — как делали раньше до выделения CSS из лона языка ХТМЛ и как делают сейчас по принятым современным стандартам.

Естественно, что после принятия новых стандартов в сети интернет оставалось все равно огромное множество документов, созданных по старым принципам чистого ХТМЛ (без CSS) и браузеры должны были с ними как то работать. Корпорация Майкрософт в свое время предложила использовать эту самую директиву Doctype из нового языка разметки XML.

Выглядеть она может по разному (читайте об этом ниже), но проще всего использовать такой вариант (чуть ниже по тексту объясню почему):

Таким образом браузер будет понимать, по каким именно стандартам ему разбирать код документа. Если данная декларация имеет место быть, то браузер переходит в режим работы по стандартам (standarts mode). Если же ее браузер не найдет в самом начале документа (или она будет не соответствовать правильному варианту написания), то тогда браузер включит хитрый режим уловок (quirks mode).

Документ в этом случае будет отображаться таким образом, как будто бы этот браузер очень старый (старинный). Если в этот же документ добавить декларацию, то браузер будет осуществлять разбор кода с учетом всех имеющихся на текущий день стандартов.

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

Давайте начнем со стандарта языка гипертекстовой разметки 4.01 (ХТМЛ 5 пока что еще только разрабатывается). Для этого случая существует три варианта Doctype: строгий, переходный и с поддержкой фреймов:

Чаще всего используют второй вариант (Transitional), т.к. он допускает больше вольностей в написании кода документа, ну, а вариант с фреймами вам вряд ли пригодится, в силу неактуальности их использования на сегодняшний день.

Собственно, имеются такие же три варианта Doctype для XHTML — строгий, переходный и с поддержкой фреймов:

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

И отдельную таблицу возможных :

Как вы можете видеть, в обеих этих таблицах присутствует столбец «Depr», в котором буквой «D» помечены устаревшие и не рекомендуемые к применению теги и атрибуты языка ХТМЛ. Это мы с вами уже рассмотрели. Но обратите внимание, что напротив каждой буквы «D» в соседнем справа столбце «DTD» стоит либо буква «L» (Loose DTD), либо буква «F» (Frameset DTD).

Т.о. все теги и атрибуты, которые не помечены буквами «D» (не рекомендуемые) входят в строгую декорацию Doctype (только рекомендованные элементы и ничего более). Если же вы все-таки будете допускать использование не рекомендованных тегов и атрибутов языка Html (они помечены литерой «D»), то нужно будет объявлять для таких документов декларацию переходную.

Некоторые элементы и атрибуты, помеченные в столбце «DTD» буквой «F» (например, FRAME, FRAMESET), будут входить в декларацию Doctype для фреймовых структур. Она базируется на основе переходной, к которой добавляются теги и атрибуты для создания , о которых вы можете почитать по приведенной ссылке.

А теперь давайте попробуем разобраться, а из каких частей состоит декларация Doctype?

Сначала идет название — «Doctype». Тут, думаю, все понятно. Дальше идет «Html» — корневой элемент данного языка разметки. Затем идет указание — публичная данная декларация или же системная. Все варианты Doctype являются публичными, что обозначается словом «PUBLIC».

А дальше идут два идентификатора документа. Первый из них называется публичным идентификатором («-//W3C//DTD HTML 4.01//EN»). Минус означает то, что данная декларация не зарегистрирована в стандарте ИСО. Затем следует название консорциума, ее название и язык, на котором она написана. Во втором идентификаторе указывается путь до файла строгого варианта.

Ну, а теперь давайте раскрою вам всю правду про Doctype . Браузерам важно только формально правильное ее написание, но они ни в коем разе не полезут на сайт консорциума, чтобы скачать указанный в ней файл.

Даже если вы выберите вариант строгой декларации и при этом будете использовать не рекомендуемые в современной версии Html теги и атрибуты, то любой браузер все равно вас правильно поймет — это факт проверенный и подтвержденный.

Поэтому, чтобы не мудрствовать лукаво, в Html 5 написание Doctype будет выглядеть уже вот так:

И все. Оставили только «Html». И несмотря на то, что ХТМЛ 5 еще не полностью внедрен, данный вариант поддерживается всеми современными браузерами и вы можете смело им пользоваться. О как, а вы говорите...

Html комментарии в исходном коде страницы и тег Title

В служебной области Web документа (между тэгами Head) обязательно должен быть прописан заголовок этого самого документа (веб страницы), заключенный в элементы Title (см. на приведенном рисунке).

Переоценить значимость заключенной в нем информации очень трудно (я не преувеличиваю). Когда вы будет подбирать ключевые слова в Яндекс Wordstat (используя для этого ), то после составления семантического ядра вам обязательно нужно будет упомянуть выбранные ключевые слова в заголовке Title.

Про то, насколько важны слова заключенные в Тайтле для будущего успешного продвижения проекта, вы можете узнать из статьи , а про то, как прописать нужные вам слова в Title для Joomla и WordPress, вы узнаете из статьи .

Теперь давайте прежде, чем переходить к рассмотрению конкретных тегов, остановимся на таком понятии, как комментарии в Html коде . Они довольно часто проставляются для того, чтобы потом было проще найти нужные участки или же для того, чтобы другим было проще понять задумку автора. Само собой разумеется, что текст этих комментариев ни в коем случае не должен отображаться на веб странице, поэтому они специальным образом оформляются в коде.

Особенно актуальны комментарии в Html были во времена господства табличной верстки (читайте про ), ибо тогда, по сравнению с современной блочной версткой (тут описана на примере), очень просто было запутаться, что и в какой ячейке таблицы выводится:

Наверное, из приведенного выше примера вы уже поняли, что все комментарии в языке Html начинаются точно так же, как и любые другие элементы — с угловой скобки, но сразу же после нее, при формировании комментария, нужно будет поставить восклицательный знак (при описании Doctype я упоминал, что комментарии тоже являются декларациями , которые обязательно начинаются с

Весь текст комментария, который будет находиться между этими двойными дефисами, будет рассматриваться браузерами как служебная информация и никак обрабатываться не будет. Корректность его написания можно наглядно оценить при использовании описанного :

Но внутри комментария можно размещать не только текст, но и все что угодно. Например, довольно часто встречаются закомментированные фрагменты Html кода и этот участок браузерами обрабатываться не будет. Что примечательно, комментарий можно открыть на одной строке кода, а закрыть хоть через сотню строк, и заключенный таким образом кусок кода для браузера просто перестанет существовать.

Все довольно просто и думаю, что с ними у вас проблем не возникнет. Хотя есть одна тонкость в работе с многострочными комментариями в ХТМЛ. Внутрь одного комментария нельзя помещать другой , иначе часть закомментированной информации может быть отображена браузером на веб странице. Давайте для примера рассмотрим такую конструкцию:

продолжение внешнего коммента-->

Итак, браузер при разборе кода веб страницы обнаружит открывающие символы декларации комментария и начнет поиск закрывающих. Найдет его после слов «Вложенный коммент», а вот все остальное (в нашем случае это продолжение внешнего коммента-->) будет обработано браузером и выведено на веб странице.

В принципе, если вы пользуетесь при написании Html кода редактором с подсветкой, то сразу же заметите неладное по изменению цвета вашего комментария:

Понятие блочных и строчных элементов (тегов) в Html

Все теги, которые возможно использовать внутри элементов Body (то, что отображается на веб странице и список которых вы можете найти в валидаторе W3C), можно разделить на две группы: строчные и блочные теги.

Блочные элементы используются для построения структуры Web документа, а строчные используются для оформления кусков текста (строк). Причем, всегда нужно соблюдать одно незыблемое правило — не заключать внутрь строчных блочные теги .

Самыми яркими и показательными представителями строчных и блочных тэгов являются, соответственно, Div (блочный элемент — отсюда и пошло название блочной верстки) и Span (строчный). Эти теги языка гипертекстовой разметки являются парными, т.е. у них есть открывающий и закрывающий тэг.

Вообще, теги Div и Span не имеют абсолютно никакого предназначения и смысла в чистом Html без использования таблиц каскадных стилей CSS. Они являются контейнерами, позволяющими изменять свойства заключенных в нем элементов через CSS.

Если вы пропишите в исходном коде страницы подряд несколько элементов Div, то на веб странице каждый из них, скорее всего, попытается занять все доступное ему пространство по ширине, и поэтому расположены такие контейнеры будут друг под другом. Контейнеры Div при нормальных условиях рядом друг с другом стоять не будут, если принудительно не заставить их делать это.

Например, такой вот Html код будет отображаться в трех блоках расположенных друг под другом:

В браузере Firefox наряду с очень полезным я еще использую плагин , который очень помогает при . Среди всего прочего он может показывать блочные элементы, обводя их рамочкой. Именно этот плагин developer создал синие рамочки вокруг контейнеров Div на приведенном скриншоте.

В теги же Span можно заключать куски текста (строки) Html кода для придания им определенных свойств через CSS, и такие элементы могут размещаться в одной строке рядом друг с другом. Например, такой вот код в браузере будет иметь следующий вид:

Содержимое Span здесь тоже было подсвечено с помощью плагина Web developer. Т.к. элементы Span являются строчными, то не следует внутрь них заключать блочные теги, например, все те же Div контейнеры.

Удачи вам! До скорых встреч на страницах блога сайт

Вам может быть интересно

Что такое язык гипертекстовой разметки Html и как посмотреть список всех тэгов в валидаторе W3C
Теги и атрибуты заголовков H1-H6, горизонтальной линии Hr, переноса строки Br и абзаца P по стандарту Html 4.01
Теги Font (Face, Size и Color), Blockquote и Pre - устаревшее форматирование текста в чистом HTML (без использования CSS)
Списки в Html коде - теги UL, OL, LI и DL
Как вставить в HTML ссылку и картинку (фото) - теги IMG и A
Пробельные символы и форматирование ими кода в Html, а так же спецсимволы неразрывного пробела и другие мнемоники
Как задаются цвета в Html и CSS коде, подбор RGB оттенков в таблицах, выдаче Яндекса и других программах Select, Option, Textarea, Label, Fieldset, Legend - теги Html формы выпадающих списков и текстового поля
Как создать гиперссылку (А, Href, Target blank), как открывать ее в новом окне на сайте, а так же сделать картинку ссылкой в Html коде
Iframe и Frame - что это такое и как лучше использовать фреймы в Html

Ухитрился я таки перевернуть всё с ног наголову.. вообще то о заголовке нужно было говорить в самом начале данного учебника.. Ну до ничего ещё есть шанс всё исправить..

Но прежде чем продолжить обучение немного отвлечёмся.. ответе на вопрос:

Какие из этих слов, согласно правилам грамматики, написаны с ошибкой?: Шiопотъ, Шепотъ, Шёпот, Шепот, Шопот. Уверенны?

Но, подождите, я ведь не сказал, каких именно правил нужно придерживаться!

Так на старославянском было единственно верным писать "Шiопотъ" потом, следуя логики, что одному звуку - одна буква, сочетание "iо" решили заменить буквой "е" получился "Шепотъ". Потом родилась буква "ё" потому что народ не знал, как правильно написать слово "ёлка", далее с развитием телеграфа и типографии в целях экономии времени, бумаги, чернил и т.д., пропал твёрдый знак в окончаниях слов заканчивающихся на согласную букву. В настоящее время продвигают правило "Как слышим, так и пишем!" так что слово "Шопот" по нынешним меркам, уже, наверное, тоже правильно написано. Так же допускается писать букву "е" вместо "ё" если это не мешает верному пониманию слова, например "узнаем" вместо слова "узнаём".

Теперь представьте, что Вы пишите диктант и его будет проверять лингвист - старовер, учитель Марья Ивановна советской закалки, и тинэйджер, который привык общаться на сленге. Каким правилам грамматики Вы будите подчинятся чтобы всем угодить? Думаю единственно верным решением будет указать в начале диктанта, что то типа: "При написании диктанта придерживаюсь правил русского языка утверждённых приказом министра образования от такого то числа", тогда все проверяющие будут оценивать Ваш диктант не так как им больше нравится, а согласно правил, на которые Вы сослались.

К чему я это всё?

Язык разметки гипертекстовых документов, точно также как и русский язык живёт во времени и тоже меняется.. появляются новые слова - теги например