Заменим первую строчку на доктайп стандарта HTML 4.01 переходного синтаксиса :

Теперь абракадабра сообщает браузеру, что HTML документ написан в соответствии с переходным синтаксисом стандрата HTML 4.01, потому что автору документа, периодически, непреодолимо хочется использовать запрещенные стандартом директивы. Поставив этот DOCTYPE в код, приведенный выше, повторим валидацию.

Вуаля, уважаемый читатель, тех двух ошибок как не бывало:

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

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

Какой стандарт выбрать

Я считаю, что нужно верстать валидно в соответствии со строгим синтаксисом стандарта. Это заставит использовать HTML по его прямому назначению и не мешать котлеты с мухами в одной тарелке. Кроме того, если сайт сверстан валидно и неправильно отображается в каком-либо браузере – то это проблема браузера, новые версии которого все лучше и лучше соответствуют стандартам организации W3C и исправляют ошибки интерпретации валидного кода. А вот если вы реализовали какую-то сложную структуру извращенным, невалидным способом, то где гарантии того, что новые версии браузеров не порвут вашу верстку в клочки?

Так что, никаких переходных синтаксисов, только строгое соответствие стандартам .

За строгое соответствие стандартам выступает еще один довод. Ноги этого довода растут из нашего спора с Takobus, разгоревшегося в комментариях к статье о . Оказывается, IE8, все-таки, прекрасно понимает назначение CSS-свойства display: table-cell , правда в случае, если объявлен строгий синтаксис стандарта HTML 4.01. В переходном синтаксисе IE8 отказывается работать с данным CSS-свойством.

Теперь определимся с выбором между актуальными стандартами: HTML 4.01 и XHTML 1.0.

Вы собираетесь расширять язык HTML? Если нет, то и не нужно использовать гнилую ветку XHTML, которая так и не переродилась в версию 2.0.

Если вы хотите защитить свой продукт на будущее, чтобы в дальнейшем не возникло проблем при расширении функционала, из-за несоответствия HTML-кода стандартам XML, то помучайте себя слешами в одиночных тегах и обязательными alt-параметрами картинок. Но не делайте это напрасно, просто так использовать XHTML-стандарт не вижу никакой необходимости.

Есть еще DOCTYPE директивы, предназначенные для HTML-документов, использующих фреймы. Что-то я сомневаюсь, чтобы вы использовали древнюю технологию фреймирования 🙂

Для тех, кто не в теме:

Фреймы – это независимые браузерные окна, отображаемые на одной Web-странице. Каждое окно связано с независимым файлом HTML.

Теперь ясно, какой!DOCTYPE оказывается максимально подходящим:

Строгий синтаксис формата HTML 4.01

Как научится верстать в соответствии с выбранным стандартом

Оказывается, очень просто. Нужно установиться рекомендованное мной расширение для FireFox , которое популярным образом, с примерами, объяснит причину ошибки в HTML и покажет как ее устранить. Вот вам и валидный код.

Веселое видео в тему

P.S. Продолжается бессрочная акция по обмену постовыми. Я с радостью обменяюсь ссылками с тематическими блогами и сайтами. Если у вас есть желание, пишите в .

В продолжении к вышесказанному размещаю постовой.

Интересуешься веб-дизайном? Создаешь сайты? Тогда на Web 2.0 Portal ты найдешь много интересного.

Все, кто знаком с более-менее серьёзным языком программирования, знают, что такой вольности в написании кода, как в HTML , нет. Я знаком (с некоторыми очень даже серьёзно) с целой кучей языков программирования, и смело заявляю: нигде такой свободы, как в HTML , не существует! Однако, из-за этой свободы возникает большое количество противоречий для браузеров. Ведь им же нужно как-то отображать этот "вольный" код, и желательно, чтобы каждый браузер отобразил этот код одинаково. И тут им на помощь приходит DOCTYPE .

DOCTYPE - это объявление типа документа, другими словами, DOCTYPE означает, какую версию HTML (либо XHTML ) Вы используете. Ведь не секрет, что HTML развивается уже давно, и много тегов было раньше, потом они устаревали, появлялись новые. И очень важно дать понять браузеру, какую версию HTML Вы используете или, другими словами, какой набор тегов у Вас имеется, и, главное, как его надо отображать.

Прежде чем переходить к различным вариантам DOCTYPE , я всё-таки отвечу на вопрос: "". А нужен он для того, чтобы браузеры правильно отображали разметку Вашего документа. Если Вы не укажите DOCTYPE , то браузер будет добавлять "отсебятину ", причём каждые браузеры будут добавлять свою "отсебятину ". В результате, ни о какой кроссбраузерности и речи идти не может.

Существует несколько вариантов DOCTYPE , однако, в реальности я Вам советую использовать один из двух вариантов:

Данный DOCTYPE означает, что документ соответствует стандарту HTML 4.01 . Это самый частоиспользуемый вариант.

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

Этот DOCTYPE сообщает браузеру о том, что документ соответствует стандарту XHTML 1.1 . Именно этот DOCTYPE стоит на этом сайте.

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

Пока я писал эту статью, у меня в голове возникла мысль, что многие из Вас не знают разницу между HTML и XHTML . И почему, на мой взгляд, XHTML лучше? На эти вопросы я отвечу в следующей статье, так что не переключайтесь.

Если Вы хотите узнать больше по HTML , то посмотрите мой бесплатный курс с примером создания сайта на HTML :

Дата добавления: 2009-01-25

Если вы хоть раз заглядывали в код других страниц, то наверняка, замечали, что многие из них начинаются со строчки . Это так называемое «объявление типа документа» или Document Type Declaration (не путать с DTD - Document Type Definition).

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

Что такое DOCTYPE?

Согласно спецификациям HTML и XHTML тег DOCTYPE (что означает "объявление типа документа") - это способ указать браузеру, как правильно отображать документ и по какой схеме. На сегодняшний день существует несколько типов HTML: HTML 4.01 Strict, HTML 4.01 Transitional, XHTML 1.0 Strict и другие. DOCTYPE указывает браузеру структуру, элементы и их атрибуты для каждого типа HTML. Существует список DOCTYPE, рекоммендованых к использованию W3C .

Этот тег должен всегда находиться в первой строке каждой страницы. Тег DOCTYPE - ключевой компонент web-страниц, претендующих на соответствие стандартам: без него ваш код и CSS не пройдут проверку валидатором.

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

Типы документов

Объявление типа документа (DOCTYPE) включает название (характерное для распознавания) корневого элемента и ссылку на DTD (document type definition - определение типа документа), которое в свою очередь, содержит информацию о синтаксических правилах для документа. В спецификации HTML объявление типа документа содержит информацию о версии HTML. Отсутствие объявления типа документа и информации о его версии не позволяет правильно обрабатывать этот документ.

Quirks Mode - Неопределенное состояние

При Quirks Mode в браузерах нарушаются рекомендации W3C для обеспечения нормального отображения страниц. Для разных браузеров существуют различные варианты совместимости с предыдущими версиями. Собственно цель Quirks mode - корректное отображение страниц, написанных для старых браузеров. При создании новых, современных страниц следует выполнять требования стандартов и рекомендаций и придерживаться Standards mode.

Standards Mode - Стандартный режим

При Standards Mode современные браузеры должны одинаково правильно представлять соответствующую стандартам страницу.

Almost Standards Mode - Почти соответствует стандартам

В браузерах Mozilla, Safari и Opera 7.5 еще существует третий вариант "the Almost Standards mode" (почти соответствующий стандартам), который не достаточно строго следует рекомендациям W3C. У Mac IE 5, Windows IE 6, Opera до 7.5 и Konqueror отсутствует Almost Standards mode, потому что они и так не могут работать в соответствии с CSS2, поэтому они будут находиться в этом случае в Standards modes. Фактически, их Standards modes это Almost Standards mode браузера Mozilla, а не полноценный Standards modes. Важно помнить: браузеры имеют одинаковые основные состояния, но даже при одинаковых состояния они все равно работают по-разному.

Как декларация DOCTYPE влияет на отображение браузерами?

В интернете и по сей день многие сайты вообще не указывают DOCTYPE. И может показаться, что ее наличие не так уж и важно. Один из авторитетных экспертов в этой области Джеффри Зельдман говорит, что если вы будете пользоваться неполным тегом DOCTYPE, устаревшим его видом, или вообще забудете про него, браузер перейдет в «загадочный» режим и будет исходить из предположения, что вы писали код страницы с ошибками и вольно отступали от стандартов. В этом режиме браузер попытается разобрать вашу страницу по правилам обратной совместимости и выведет на экран, например, CSS так, как его вывел бы Internet Explorer 4-ой версии, а DOM будет работать так, как он работал именно в этом броузере (IE переключается в свой старый DOM, а Mozilla и Netscape 6 переключается вообще непонятно во что.

Рассмотрим такой пример: на некоторых сайтах веб-мастера используют цветную вертикальную полосу прокрутки, чтобы она вписывалась в общий стиль сайта. Однако изменения цвета полосы прокрутки являются нарушением стандартов CSS2. В браузерах IE 6 и Opera 9 это работает, если в HTML указан неполный DOCTYPE стандарта HTML 4.01 Transitional (). В других случаях правила в таблице стилей перестают работать, и полоса прокрутки приобретает стандартный вид. В Mozilla Firefox цветные полосы прокрутки никогда не работали.

Особенно важно наличие полной декларации DOCTYPE в блочных сайтах с использованием