Как вы заметили в исходный код любой страницы из интернета, в первой строчке написан элемент . Он нужен для того что бы указать браузеру тип текущего документа и как следует его интерпретировать. С английского языка сокращенно это будет DTD (расшифровывается как “ Document type definition “, что в переводе означает описание типа документа ). Как вам известно, существуют разные версии языка HTML : 3.2 , 4.01, 5.
Основная версия это HTML 4.01 , для нее существуют 2 элемента , но в последнее время становится актуальнее версия HTML5 , т.к. она более расширена, в ней добавлены новые теги и соответственно больше возможностей, для этой версий есть только один элемент Doctype. Также существует расширенный язык разметки гипертекста, с названием XHTML (EXtensible HyperText Markup Language), который различается от HTML только по синтаксису, у него более строгий. В остальном они похожи.
Ниже приведены основные элементы :
Для HTML 4.01
Используется для строгого синтаксиса HTML
В этой версий запрещается использовать старые теги. В случае если вы где то используйте подобные теги, то браузер не поймет как их отобразить.
Переходный синтаксис HTML
В этой версий разрешается использовать как старые так и новые теги, которые появились в HTML 4.01.
Указывает браузеру что в HTML документе используется фреймы
Это версия довольно старая и она уже практически не применяется, так как фреймы давно устарели.
Для HTML 5
Эту версию можно задать для всех типов документов. Основной плюс в ее синтаксисе в том что он очень короткий и легко запоминается.
Для XHTML 1.0
Строгий синтаксис XHTML.
Переходный синтаксис XHTML.
В документе написанный на XHTML содержится фреймы
Для XHTML 1.1
Только один Синтаксис со строгими правилами.
Адрес указанный в кавычках отправляет браузера на так называемую спецификацию , откуда он узнает как отобразить страницу и какие теги допустимы для этого. Соответственно у каждой версий есть своя спецификация.
Вот и все что я хотел вам рассказать о элементе
Сегодня приступим к изучению html и css. Данную тему я постараюсь раскрыть максимально понятно, для любого читателя. И не имеет значения: знакомы вы с этой темой или только имеете желание изучить код, который довольно широко используется в сайтостроении. И чтобы затронуть, как можно больше примеров применения и использования кода, я планирую написать весьма внушительный список статей, посвященных , без использования, каких либо cms, или же комбинируя html-странички с движками dle и wordpress. Разбирать вопросы мы будем по мере их поступления, а не в традиционном стиле, сначала теория, а потом практика. Я сразу покажу все на практике, подкрепляя все теорией.
Но начнем, конечно же, сначала. То есть с того, что такое html? И другого немаловажного вопроса: «Зачем нужен doctype и какой выбрать?» Собственно, это и тема, сегодняшнего поста.
Что такое html?
Html — это аббревиатура языка разметки гипертекста: «HyperText Markup Language», которая определяет расположение элементов на веб-странице и их оформление. Данный язык никак не ограничивает вебмастера, в его фантазии и позволяет создавать практически любую структуру и оформление страницы. Вообщем, если вы решили посвятить себя созданию сайтов, вы должны обязательно знать html-код. Сложного в нем ничего нет, и я надеюсь, что по итогам цикла статей, вы в этом убедитесь.
Любой код веб-сайта начинается с определения типа документа (DTD — document type definition(описание типа документа)) браузерами, для корректного отображения сайта на экранах наших мониторов. А чтобы помочь браузеру определиться, необходимо указать тип документа, который используется на сайте. Для этого, существует тег
| DOCTYPE | Описание |
| HTML 4.01 | |
| Строгий синтаксис HTML. | |
| Переходный синтаксис HTML. | |
| HTML-документ, с применением фреймов. | |
| HTML 5 | |
| Для всех документов. | |
| XHTML 1.0 | |
| Строгий синтаксис XHTML. | |
| Переходный синтаксис XHTML. | |
| XHTML-документ, с применением фреймов. | |
| XHTML 1.1 | |
| Такой же, как и строгий синтаксис XHTML, но допускается добавление модулей. | |
Теперь, попробуем разобрать по кусочками, что же содержит DOCTYPE.
html — указывает элемент верхнего уровня, то есть самую основу кода. Для HTML, это тег .
PUBLIC — определяет публичность документа. Данный тип документа является публичным.
«-» — указывает, зарегистрирован или нет разработчик типа документа в международной организации по стандартизации (International Organization for Standardization, ISO). Имеет два значения: минус или плюс. Минус — не зарегистрирован. Плюс — зарегистрирован. Но для W3C, указывается «-»
W3C — организация разработавшая DTD.
DTD — тип документа. Для HTML и XHTML указывается DTD.
HTML 4.01 Transitional (как пример) — имя документа, его версия и синтаксис, который он использует.
EN — язык на котором написан документ. И естественно, HTML и XHTML используют английский язык.
http://www.w3.org/TR/html4/loose.dtd — адрес документа с описанием документа (DTD).
Вот столько информации несет в себе самая первая строка HTML или XHTML кода. Но все же могут возникнуть проблемы с определением насколько соответствует наш документ выбранному синтаксису или нет. Для этого, существует валидатор разметки, который поможет нам определить на сколько валиден (правильный) наш код. Валидатор предоставляется той же организацией. которая является официальным разработчиком DTD. Находится он на сайте http://validator.w3.org/ .
Итак, нам остается только определиться с выбором. И выбрать
На этом у меня все. Надеюсь, данный пост будет полезен И поможет разобраться в вопросе, о DOCTYPE.
Дата добавления: 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 в блочных сайтах с использованием
Тип документа: объявлять или не объявлять?
Многие эксперты и автоматические валидаторы считают, что тип документа объявлять нужно всегда. Но сли учесть тот факт, что многие сайты прекрасно отображаются в браузерах и без него, возникает резонный вопрос: «А нужен ли на самом деле?». Последнее слово за вами, но лучше прислушаться к экспертам и следовать стандартам.
Ошибки при использовании DOCTYPE
На многих сайтах можно встретить в страницах следующий вариант тега DOCTYPE, который был без всяких изменений перенесен с сайта w3.org:
Посмотрите на последнюю часть тега DOCTYPE ("DTD/xhtml1-strict.dtd"). Обратите внимание, что это относительная ссылка на документ, расположенный на сайте W3C. Так как целевой документ находится на сайте W3C, а не на вашем, этот URI для броузера бесполезен.
А выглядеть DOCTYPE должен вот так:
Этот вариант DOCTYPE содержит в конце полный вариант URI, а значит браузер знает, где этот документ надо найти в сети, и следовательно выведет вашу страницу в том стандарте, который вы упомянули в DOCTYPE.
Использование DOCTYPE в Expression Web
Если для создания будущих веб-страниц вы используете стандартный Блокнот, то вам придется вручную вставлять объявления типа в начале каждого документа. Современные веб-редакторы типа Adobe DreamWeaver или Microsoft Exression Web делают это автоматически.
Кстати, Expression Web использует DOCTYPE для валидации и для завершения кода по технологии IntelliSense, контролируя процесс написания документа. В настройках программы вы можете установить, какой тип документа будет использоваться по умолчанию. Для этого в меню Tools выберите Page Editor Options, далее выберите вкладку Authoring и установите Document Type Declaration.
Вот как можно быстро вставить нужный тип документа на старой странице с отсутствующим объявлением:
- Нажмите клавиши CTRL+HOME – курсор переместится в начало страницы (Line 1, Column 1)
- Нажмите CTRL+ENTER – появится меню с выбором DOCTYPE
- Выберите необходимый DOCTYPE из выпадающего списка
При написании статьи использовались материалы с других сайтов.
указывает, в соответствии с каким стандартом HTML написана ваша Web-страница.
| DOCTYPE | Описание |
|---|---|
| HTML5 | |
| Для всех документов. | |
| HTML 4.01 | |
| "http://www.w3.org/TR/html4/strict.dtd"> | Строгий синтаксис HTML. |
| Переходный синтаксис HTML. | |
| В HTML-документе применяются фреймы. | |
| XHTML 1.0 | |
| Строгий синтаксис XHTML. | |
| Переходный синтаксис XHTML. | |
| Документ написан на XHTML и содержит фреймы. | |
| XHTML мобильного профиля, добавляет специфические элементы для мобильных телефонов. | |
| XHTML 1.1 | |
| "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> | Никакого деления на виды это определение не имеет, синтаксис один и подчиняется четким правилам. |
Итак, доктайпов существует несколько (строгие и переходные, для HTML и XHTML). Какой стандарт выбрать - вот в чем вопрос.
Стандарты HTML и XHTML
HTML - стандартный язык разметки Web-документов.
В HTML 4.01 и HTML5 внешний вид страницы отделен от ее содержания. Содержание и структура (заголовки, абзацы, ссылки) задаются в HTML. Оформление (выравнивание, шрифты, цвета) задаются CSS-стилями.
Например, тег и атрибут align объявлены устаревшими.
XHTML - расширяемый язык разметки Web-документов, созданный на базе XML . Стандарт XHTML представляет собой перечень различий между HTML 4.01 и XHTML.
Достоинства языка XHTML - не строгость синтаксиса, а возможность придумывать собственные теги.
Однако, 2 июля 2009 года Консорциум Всемирной паутины (W3C) сообщил о прекращении работ над XHTML 2.0, посчитав концепцию XHTML неверной. Группа программистов переключилась на работу над стандартом HTML5. И хотя стандарт HTML5 всё ещё не утверждён, на нём уже написано множество сайтов.
Кому интересно, когда же HTML5 будет закончен, могут ознакомиться с первоисточниками:
Официальная версия стандарта HTML5 находится по адресу: www.w3.org/TR/html5/
Определимся с выбором. Сделать его несложно: использовать XHTML-стандарт не стоит, если вы не собираетесь расширять язык HTML.
На!DOCTYPE, предназначенных для документов, использующих фреймы , останавливаться не будем: позавчерашний день.
Следующий вопрос: какой выбрать синтаксис - строгий или переходный?
Строгий и переходный синтаксис HTML 4.01
Переходные синтаксисы существуют для того, чтобы облегчить переход на новый стандарт. Они пропустят многое из того, что строгий синтаксис посчитает ошибками.
Понять, что тут к чему, проще на примере. Сначала зададим строгий синтаксис.
Строгий синтаксис
Проверка на валидность
красным цветом.
Соответствие HTML-кода объявленному стандарту называют валидностью , а проверку на это соответствие - валидацией .
Чтобы отслеживать ошибки верстки, установим дополнение к FireFox Html Validator .
Откроем нашу страницу в браузере FireFox, наведем мышку на знак валидатора:
Двойной щелчок на знаке валидатора даст развернутый список ошибок:
Поменяем!DOCTYPE на переходный синтаксис:
Переходный синтаксис
Проверка на валидность
Часть текста понадобилось выделить красным цветом.