Стандарты HTML или что такое !DOCTYPE
Сегодня, уважаемый читатель, мы поговорим о такой загадочной вещи, как объявление стандарта, в соответствии с которым написан HTML-документ. Выполнять поставленную задачу призвана первая HTML-директива в коде веб-страницы, под названием !DOCTYPE.
Вот пример этой строки: <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>. Если вы не знаете, зачем нужна такая абракадабра и какой DOCTYPE выбрать в вашем случае, то в данной статье вы найдете ответы на эти вопросы, я, по крайней мере, постарался осветить проблему подробно 
Первое, что может сделать добросовестный начинающий веб-мастер, пытающийся разобраться в назначении директивы DOCTYPE, это сходить на сайт htmlbook.ru и прочитать соответствующую статью, из которой станет ясно, что доктайпов существует несколько (строгие и не очень, для HTML и XHTML). Ясно, что данная директива необходима для уведомления браузера о том, в соответствии каким стандартам сверстан HTML-документ, а вот какой стандарт выбрать и на что это влияет – большой вопрос.
Для того, чтобы большой вопрос превратился в подробный ответ, давайте познакомимся с интереснейшей историей появления всех этих стандартов (не пугайтесь, я кратенько).
История стандартов HTML
Давным-давно, когда интернет только зарождался, обозначилась проблема каким образом превращать набор букв, передаваемый по сети, в заголовки, абзацы, ссылки. Ответ нашел физик Тим Бернерс-Ли придумав язык гипертекстовой разметки HTML (обратите внимания, товарищи блондинки, HTML – это не язык программирования). Документацию к языку HTML опубликовали в 1991 году.
HTML прижился на столько, что стал стандартом разметки документов в интернете, и был одобрен международной организацией по стандартам W3C, которая была основана и возглавляется, как не странно, все тем же создателем HTML сером Тимом Бернерсом-Ли.
В своей первой редакции HTML представлял язык разметки содержимого web-страницы, сообщающий браузеру – где заголовок, где абзац, где ссылка при помощи наших добрых знакомых, HTML-тегов. Браузеры, при этом, самостоятельно должны были решать, каким образом им визуально представлять все элементы содержимого, структурированные тегами. Иными словами, первая редакция HTML не имела никакой власти над визуальным представлением гипертекста на стороне клиента, эта функция полностью ложилась на плечи браузера.
Прошло немного времени буйного развития интернет-технологий, как в интернет хлынул бизнес. Бизнес-сайтам совсем не хотелось быть похожим один на другой, им нужна была яркость, запоминаемость.
Популярные в то время браузеры (конечно IE и, тогда еще живой, Netscape) начали придумывать свои собственные теги, которые позволяли задавать индивидуальные свойства дизайна веб-документу. Да, уважаемый читатель, никакой кроссбраузерности в то время не было. Я еще помню те времена, когда по сайтам можно было лазить только с помощью IE, все остальные браузеры показывали страшные вещи. Но сейчас не об этом.
W3C принимает новый стандарт HTML, в который уже входят средства визуального представления.
Семимильными шагами начинает развиваться технология CSS, призванная восстановить порядок и отделить представление (выравнивание, цвета, шрифты, которые теперь будут задаваться CSS-стилями) от структуры (заголовки, абзацы, ссылки, которые идеологически задаются в HTML).
Начинающий веб-мастер спросит зачем отделять визуальную часть от структуры, и мы ему ответим:
- В простеньком сайте необходимость этого не очевидна, но если проект крупный, то разделением удастся избежать путаницы и каши в HTML-коде.
- Не нужно повторять один и тот же код на разных страницах, если визуальное представление блоков одинаково. Достаточно воспользоваться CSS-файлом, где один раз указать стиль отображения для данного семейства блоков.
- Отделив инструкции, касающиеся внешнего вида, в кешируемый файл, можно избежать бессмысленных нагрузок на мировую паутину (хе-хе, какое нам дело до мировой паутины, свой сервак не перегружать бы; CSS спасает сервера высоконагрузочных проектов).
- Теперь уже мощность CSS неоспоримо больше, в плане работы с логикой представления, чем у искусственно впертвых в HTML инструментов изменения внешнего вида страницы.
Так, о CSS достаточно, вернемся к HTML.
Актуальный, на данный момент, стандарт HTML 4.01 запрещает использовать HTML для манипуляций с отображением элементов. Попрощайтесь с HTML-директивами align, font; внешний вид нужно задавать при помощи CSS-стилей. Все возвращается на круги своя.
Но, интернет продолжает свое развитие и вместе с ним развиваются и перерождаются стандарты.
Организация W3C решила, что наиболее удовлетворяющим современным веяниям будет новый расширяемый стандарт XHTML. Данная штуковина – это некий симбиоз HTML с принципами XML.
XML – это способ хранения структурированных данных в текстовом файле. Придуманные теги, определенным образом, в соответствии стандартам XML, формируют структуру данных:
<kontakty>
<zapis nomer="1">
<familiya>Морковин</familiya>
<imya>Андрей</imya>
<site>sdelaysite.com</site>
</zapis>
<zapis nomer="2">
<familiya>Волож</familiya>
<imya>Аркадий</imya>
<site>yandex.ru</site>
</zapis>
</kontakty>
При помощи простенькой программы, легко можно разделить данные, структурированные средствами XML. При этом данные могут быть проанализированы в любой операционной системе, на любом устройстве (ведь это всего-на-всего текстовый файл, структурированный соответствующими разделителями-тегами, согласно известному стандарту).
Организация W3C посчитала вышеописанную особенность очень крутой и раздумья о тупике в развитии HTML, привели к рождению XHTML. Это будет такой язык разметки, который безболезненно должен расширяться новыми тегами и сможет обрабатываться любым устройством (мобильник, компьютер, телевизор), ведь в основе лежит XML, который это пропагандирует (думали наивные сотрудники организации W3C).
Сказано, сделано – в мае 2001 года появился новый стандарт расширяемой гипертекстовой разметки XHTML 1.0. Он впитал в себя строгости XML, теперь HTML-код должен соответствовать следующим требованиям:
- Все теги, должны быть закрыты. Если тег одиночный, например <img>, то он должен выглядеть вот таким образом: <img src=”…” />.
- Должна строго выполняться иерархия. Вот так нельзя: <div><span>…</div></span>. Можно только так: <div><span>…</span></div>. Нельзя забывать про теги <html>, <body> – все должно быть аккуратно.
- Атрибуты тегов нужно обязательно заключать в кавычки. Так нельзя: <a href=http://sdelaysite.com>. Можно только так: <a href=”http://sdelaysite.com”>.
- Теги и CSS-свойства можно писать только маленькими буквами.
- В случае присутствия ссылки, содержащей знак &, его нужно преобразовать в &.
- У изображений, формируемых тегом <img>, обязательно нужно указать свойство alt.
И, также как в HTML 4.01, никаких воспоминаний о внешнем виде в XHTML-коде быть не должно.
Конечно, это не полная спецификация языка XHTML, в нем есть ряд ограничения, связанный со скриптами и еще Бог знает с чем. С полной спецификацией можно ознакомится в соответствующем разделе сайта W3C (хоть там все и на английском, но с красочными примерами правильного и ошибочного синтаксиса, так что желающий понять – поймет).
Как я говорил ранее XHTML – это расширяемый язык гипертекстовой разметки. Однако, вся эта расширяемость плохо воспринимается поисковиками, некорректно работает в IE6 и IE7, возникает необходимость настраивать заголовки, передаваемые сервером и выполнять строгие правила формата XML, чтобы все достоинства XTML работали в полную силу.
Достоинства языка XHTML – это вовсе не строгость синтаксиса, а возможность использовать хитрые теги разметки, например, принадлежащие пространству имен MathML (пример, который нужно запускать только в нормальных браузерах; IE6, вместо интерпретации XHTML кода, поднимет диалог сохранения файла) или придумывать теги самостоятельно в своем собственном пространстве имен (этот процесс детально описан на сайте W3C, анг. язык).
Дальнейшее развитие революционной ветки XHTML – это выход стандарта XTML 2.0, значительно отличающегося от привычного HTML и несовместимого с XHTML 1.0. Окончание работ над XHTML 2.0 планировалось на 2009 год.
Однако, никакой революции не произошло. Еще в июне 2004 года группа разработчиков, именующих себя WHATWG (в которую входят разработчики известных браузеров), посчитав концепцию XHTML неверной, начала работу над стандартом HTML 5, который, благодаря наличию семантических тегов (section article footer audio video progress nav meter time aside ) и другим нововведениям, серьезно изменит современную веб-разработку в лучшую сторону. Подробнее о HTML 5 можно почитать на википедии (англ.).
Стандарт XHTML 2.0 был заброшен и организация W3C переключил на разработку HTML 5.
Утвердить стандарт HTML 5 планируется не ранее 2020 года.
Какой DOCTYPE выбрать
Теперь, вооружившись знаниями истории стандартов, снова вернемся к статье на htmlbook.ru про DOCTYPE.
Мы знаем, что такое HTML 4.01 и XHTML 1.0. Остаются открытыми три вопроса:
- Что такое строгий и переходный синтаксис?
- Какой стандарт выбрать?
- Как научится верстать в соответствии с выбранным стандартом?
Теперь я последовательно отвечу на все поставленные вопросы.
Что такое строгий и переходный синтаксис
Оказывается, чтобы ломка при переходе на новый стандарт не была такой уж болезненной, придуманы переходные синтаксисы.
Вы же помните, что в стандарте HTML 4.01 запрещены HTML-инструкции, касающиеся внешнего вида? Да, помните конечно, я просто хотел в этом убедиться.
Теперь поэкспериментируем.
Сначала я выберу строгий синтаксис формата HTML 4.01 и укажу соответствующую директиву DOCTYPE:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
Эта абракадабра означает, что HTML-код, идущий ниже, соответствует стандарту 4.01, принятому организацией W3C (вот этот кусок абракадабры “-//W3C//DTD HTML 4.01//EN”). Инструкции, написанные организацией W3C, касательно данного стандарта, находятся вот там: “http://www.w3.org/TR/html4/strict.dtd” и браузер может прогуляться по этому адресу для уточнения.
Экспериментировать будем с вот таким HTML-кодом:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Проверочка</title>
</head>
<body>
<p align="center"><font>Немного текста</font></p>
</body>
</html>
Основное внимание нужно обратить на присутствие в коде запрещенных элементов: align=”center” и тега <font>.
Теперь проверим этот код на соответствие стандартам. Как я неоднократно говорил ранее, есть замечательное расширение для FireFox под названием HTML Validator. Програмулина показывает две ошибки в HTML-коде:
Все оказалось предсказуемо. Валидатор ругается на атрибут align и тег <font>, такие вещи запрещены в стандарте HTML 4.01, который мы декларируем первой строчкой HTML-кода.
Заменим первую строчку на доктайп стандарта HTML 4.01 переходного синтаксиса:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
Теперь абракадабра сообщает браузеру, что HTML документ написан в соответствии с переходным синтаксисом стандрата HTML 4.01, потому что автору документа, периодически, непреодолимо хочется использовать запрещенные стандартом директивы. Поставив этот DOCTYPE в код, приведенный выше, повторим валидацию.
Вуаля, уважаемый читатель, тех двух ошибок как не бывало:
Я думаю, что теперь должны быть ясны все отличия строгого и переходного синтаксиса.
Переходный доктайп стандарта XHTML 1.0 позволит использовать HTML-директивы для задания внешнего вида, но за соответствием идеологии XML будет следить пристально и реагировать ошибкой валидации на каждый незакрытый одиночный тег или отсутствие alt-свойства у картинки.
Какой стандарт выбрать
Я считаю, что нужно верстать валидно в соответствии со строгим синтаксисом стандарта. Это заставит использовать HTML по его прямому назначению и не мешать котлеты с мухами в одной тарелке. Кроме того, если сайт сверстан валидно и неправильно отображается в каком-либо браузере – то это проблема браузера, новые версии которого все лучше и лучше соответствуют стандартам организации W3C и исправляют ошибки интерпретации валидного кода. А вот если вы реализовали какую-то сложную структуру извращенным, невалидным способом, то где гарантии того, что новые версии браузеров не порвут вашу верстку в клочки?
Так что, никаких переходных синтаксисов, только строгое соответствие стандартам.
За строгое соответствие стандартам выступает еще один довод. Ноги этого довода растут из нашего спора с Takobus, разгоревшегося в комментариях к статье о вертикальном выравнивании в div. Оказывается, 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
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
Как научится верстать в соответствии с выбранным стандартом
Оказывается, очень просто. Нужно установиться рекомендованное мной расширение для FireFox HTML Validator, которое популярным образом, с примерами, объяснит причину ошибки в HTML и покажет как ее устранить. Вот вам и валидный код.
Веселое видео в тему
P.S. Продолжается бессрочная акция по обмену постовыми. Я с радостью обменяюсь ссылками с тематическими блогами и сайтами. Если у вас есть желание, пишите в контакты.
В продолжении к вышесказанному размещаю постовой.
Интересуешься веб-дизайном? Создаешь сайты? Тогда на Web 2.0 Portal ты найдешь много интересного.
С уважением, Андрей Морковин.
Похожие материалы:
Отзывов: 27 на «Стандарты HTML или что такое !DOCTYPE»
Автор: Алексей, 23.11.2009 в 19:09
Как уже за правило… весьма интересно и познавательно,Андрей.
Спасибо за информацию.Так держать!
Автор: Андрей Морковин, 24.11.2009 в 09:52
Я рад, что статья полезна. Спасибо за отзыв.
Автор: Андрей, 23.11.2009 в 20:35
))))))))))))))клёвый ролик!
типа все кроме лисы дебилы))))
Автор: Андрей Морковин, 24.11.2009 в 09:53
Да, обожаю FireFox.
Автор: Максим Яковлев, 24.11.2009 в 13:50
Это всё конечно хорошо, но сапожник-то сам без сапог остался – http://validator.w3.org/check?uri=http%3A%2F%2Fwww.sdelaysite.com&charset=%28detect+automatically%29&doctype=Inline&group=0
Автор: Андрей Морковин, 24.11.2009 в 13:56
Да, я в курсе
Как обычно, никак не дойдут руки. Но, по моему, лучше уделить время написанию статей, чем правке ошибок валидации, когда это самое время ограничено.
Автор: Максим Яковлев, 26.11.2009 в 23:30
Статьи – хорошо, но хороший пример тоже кое-чего стоит. Не так уж много времени надо на выправление ошибок (если конечно они не критические и при их исправлении вёрстка не едет напрочь).
Автор: Андрей Морковин, 27.11.2009 в 13:26
Да, нужно будет заняться исправлением ошибок.
Автор: Человек_без_именИ, 25.11.2009 в 12:15
Так до этого и не знал что это за строчка самая первая, даже как то на работе решил поинтересоваться есть ли требования к ней В) меня пригрузили лекцией в которой я ничего не понял кроме необходимости закрывающих тегов В) а теперь голова моя чиста В) Еще раз Спасибо В)
Автор: Андрей Морковин, 25.11.2009 в 14:13
Рад был помочь
Автор: Артур, 26.11.2009 в 14:39
А про оперу промолчали)))
от нее и мозила б замолчала))))))
Автор: Дима, 26.11.2009 в 16:51
Хорошая статья =) я так понял нет необходимости уже верстать на XHTML – strict ,
а брать HTML 4.1 – strict и не мучатся)
верно?)
Автор: Максим Яковлев, 26.11.2009 в 23:34
Нет, не верно. XHTML приучает к более качественному и понятному коду, чем HTML, при этом оба варианта синтаксиса будут равноправны в HTML 5.
Автор: Андрей Морковин, 27.11.2009 в 13:31
Нет, верно. Не нужен XHTML, если не собираетесь использовать XML примочки. Да и вообще, все движется к HTML 5, так зачем тогда использовать синтаксис XHTML?
Каким образом XHTML заставляет более качественно и понятно писать код? Если хотите писать качественно и понятно, то пишите качественно и понятно в HTML 4.01
Автор: Максим Яковлев, 27.11.2009 в 15:07
У XHTML более жесткие правила, которые я привык выполнять: аккуратный нижний регистр, правильная вложенность, всегда закрытые теги и т.п. Это заставляет быть аккуратнее, к тому же, все неаккуратности ловятся валидатором. В HTML валидатор такие неаккуратности просто не замечает. Кроме того, чужой XHTML код намного проще читать,
Автор: Дима, 27.11.2009 в 00:07
значит буду продолжать использовать XHTML =))
Автор: Андрей Морковин, 27.11.2009 в 13:32
Дим, короче говоря, сколько людей, столько и мнений. Но факт в том, что XHTML придуман вовсе не для того, чтобы улучшить понятность и грамотность кода. Думайте сами, решайте сами. Сами!
Автор: Максим Яковлев, 27.11.2009 в 15:14
Вы лучше собственное мнение сформируйте, основываясь на личном опыте (если он есть, конечно).
Вот ещё интересное обсуждение проблемы выбора http://forum.codenet.ru/showthread.php?t=53679
Автор: Дима, 27.11.2009 в 22:58
Личный опыт в стадии разработки)) сверстал 6 шаблонов psd и всё)) и когда есть свободное время познаю новое в верстке)
СПАСИБО ОГРОМНОЕ ЭТОМУ САЙТУ КСТАТИ И ЕГО АВТОРУ)))
я так понимаю самое главное это личная практика и ещё раз практика?))
и мне как то не напряжно было верстать с !DOCTYPE XHTML)
думаю, я за будущее и просто HTML мне подойдёт)
Автор: Never Lex, 11.12.2009 в 19:12
Да. Сколько людей столько и мнений. Я например HTML 4.01 Transitional использую и не парюсь. Зачем себе же вставлять палки в колёса.
Автор: Never Lex, 11.12.2009 в 19:22
В качестве эксперимента на блоге поменял доктайп на Стрикт. Огрёб 6 ошибок. Только не особо врубаюсь, что мне хочет сказать валидатор
language для жаваскрипта уже писать не нужно?
не понимает тега s и атрибута target…
Автор: Never Lex, 11.12.2009 в 19:38
Поубирал атрибуты language, border и target. Заменил тег на . Теперь имею валидный строгий ХТМЛ
Только вот более громоздко, чем .
Автор: Never Lex, 11.12.2009 в 20:06
ВП злобно вырезает теги
Заменил s на span=class=”strike” (только это более громоздко).
Автор: Never Lex, 11.12.2009 в 20:22
Вот чёрт. Переубедили. Теперь я тоже приверженец Стрикта
Автор: Андрей Морковин, 11.12.2009 в 20:30
Забавно наблюдать за Вашей идеологической ломкой
Поздравляю с переходом к строгости, это, как мне кажется, правильно.
Автор: Виталий, 11.02.2010 в 21:36
Спасибо огромное за толковую статью. Я ещё только познаю хитрости сайтостроения и Ваша статья оказалась как нельзя кстати. Хотелось не просто, тупо, прописать что говорят, а разобраться что к чему самому. Теперь всё стало понятно.
Только, появилась одна загвоздка. Немного не по теме, но, тем не менее, надеюсь, что Вы поможете мне разобраться: в статье Вы упомянули HTML Validator для FireFox, видать, очень нужная штуковина. Я скачал валидатор (tidy_firefox_win_0861.xpi), но, никак не пойму как его установить. На официальном сайте никак подсказок по установке не нашел, одна надежда на Вас. Будьте добры, объясните как установить. Заранее спасибо!
Автор: Андрей Морковин, 12.02.2010 в 13:09
Запускаете FF, идете по ссылке: https://addons.mozilla.org/ru/firefox/addon/249
На загрузившейся странице находите кнопку “Добавить в Firefox”, нажимаете на нее и плагин сам устанавливается в браузер.