Что означает doctype html. Что такое DOCTYPE и зачем он нужен? Только один Синтаксис со строгими правилами

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

Строчка с DOCTYPE (Document Type Definition) в начале HTML страницы указывает на тип документа, который вы будете использовать при написании HTML кода для вашего сайта. Это непарный тег, то есть у него нет закрывающего тега.

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

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

Какие существуют виды DOCTYPE?

Cуществует несколько видов DOCTYPE. Есть строгие виды (strict ), которые работают на основе только определенных тегов, есть переходные (transitional ), которые допускают возможность включения дополнительных тегов, есть такие, которые работают с фреймами (frameset ).

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

1. HTML 5
2. HTML 4.01 Strict
3. HTML 4.01 Transitional
4. HTML 4.01 Frameset
5. XHTML 1.0 Strict
6. XHTML 1.0 Transitional
7. XHTML 1.0 Frameset
8. XHTML 1.1

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

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

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

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

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

Можно ли вообще обойтись без DOCTYPE?

У тех, кто не любит заострять свое внимание на разных мелочах, может возникнуть вполне естественный вопрос: "А зачем мне все это нужно? Может, мне вообще не использовать DOCTYPE?"

Конечно, теоретически можно его и не указывать, но тогда вы сидите на пороховой бочке замедленного действия, не зная точно когда она рванет (а рванет она 100%).

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

Так что же делать, если не хочется во все это вникать в подробностях?

Преимущества использования DOCTYPE HTML5.

Хорошая новость состоит в том, что с выходом последней версии HTML5 (которая, кстати, все еще находится в процессе разработки, по некоторым данным окончательный стандартный вариант обещают предоставить в 2014 году) стало намного удобней выбирать DOCTYPE для своих сайтов.

Дело в том, что правила DOCTYPE HTML5 являются универсальными, включают в себя правила предыдущей версии, а также возможность работы с HTML 4 тегами и в какой-то степени с XHTML, и, насколько я понимаю, объединяют в себе возможности всех своих предшественников, адаптируя их для работы в новых браузерах.

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

.

Это все, что нужно написать, чтобы указать что это DOCTYPE HTML5. По сравнению с прежними своими собратьями, DOCTYPE HTML5 не основан на SGML (стандартном обобщённом языке разметки) , поэтому там нет тех данных, которые указывались до этого, а следовательно - в нем присутствует только короткая команда. И дальше уже идет сам документ:

Здесь содержится контент.

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

Что касается браузеров: как старые браузеры относятся к DOCTYPE HTML5? Не возникнут ли проблемы с этим?

По этому поводу хочу сказать, что:

1. Во-первых, мы должны равняться на прогресс и на будущее, а будущее - за новыми браузерами, и сейчас становится все-таки меньше и меньше людей, использующих старые браузеры.
2. А во-вторых, Doctype HTML5 так устроен, что даже браузеры, которые в принципе не были созданы для того, чтобы поддерживать его (IE (начиная с IE8), старые версии FireFox, Opera, Safari), увидев команду, сразу же переключают содержимое в стандартный режим.

Это значит, что если вы сегодня начнете создавать свои страницы на основе DOCTYPE HTML5, то можете быть уверены в том, что им обеспечена долгая жизнь.

Выводы.

Какой из всего вышесказанного мы можем сделать вывод?

Использовать DOCTYPE необходимо, если не хотите впоследствии решать всяческие проблемы, связанные с его отсутствием (нужны они вам? ).

И использовать лучше всего последнюю версию DOCTYPE HTML5.

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

А потому желаю вам успехов!

Все, кто знаком с более-менее серьёзным языком программирования, знают, что такой вольности в написании кода, как в 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 :

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

Вот пример этой строки:

Если вы не знаете, зачем нужна такая абракадабра и какой 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, формируют структуру данных:

Морковин Андрей сайт Волож Аркадий yandex.ru

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

Организация W3C посчитала вышеописанную особенность очень крутой и раздумья о тупике в развитии HTML, привели к рождению XHTML. Это будет такой язык разметки, который безболезненно должен расширяться новыми тегами и сможет обрабатываться любым устройством (мобильник, компьютер, телевизор), ведь в основе лежит XML, который это пропагандирует (думали наивные сотрудники организации W3C).

Сказано, сделано – в мае 2001 года появился новый стандарт расширяемой гипертекстовой разметки XHTML 1.0 . Он впитал в себя строгости XML, теперь HTML-код должен соответствовать следующим требованиям:

• Все теги, должны быть закрыты. Если тег одиночный, например , то он должен выглядеть вот таким образом: .
• Должна строго выполняться иерархия. Вот так нельзя:
  …
  . Можно только так:
  …
  . Нельзя забывать про теги , – все должно быть аккуратно.
• Атрибуты тегов нужно обязательно заключать в кавычки. Так нельзя: . Можно только так: .
• Теги и CSS-свойства можно писать только маленькими буквами.
• В случае присутствия ссылки, содержащей знак & , его нужно преобразовать в &.
• У изображений, формируемых тегом , обязательно нужно указать свойство alt .

И, также как в HTML 4.01, никаких воспоминаний о внешнем виде в XHTML-коде быть не должно.