Интернетчик » XHTML | DOCTYPE

XHTML | DOCTYPE

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

Учим XHTML

  1. Что такое Doctype
  2. Зачем нужен Doctype
  3. Тип разметки
  4. Пример Doctype

Doctype

Doctype – строка заявки кода
Doctype – ключевой элемент верстки веб-документа.
Doctype – первая строка веб-страницы.
Doctype – первая строка текста или файла, созданного с использованием языка HTML (гипертекстовая разметка).
Наличие Doctype в начале документа HTML – обязательное условие.
Любая страница сайта или блога начинаются с элемента Doctype.

Зачем нужен Doctype

Элемент Doctype сообщает браузеру тип гипертекстовой разметки документа. После этого, браузер легко отрисовывает страницу на экране монитора.
При условии, конечно, что код страницы соответствует заявленному коду.

Тип разметки

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

Doctype – одна из самых важных и самых неприметных строк в файле html

Doctype это самый первый элемент любой верстки. Многие начинающие верстальщики, из за недостатка информации, недооценивают этот ключевой элемент. Главное назначение данного элемента – предоставление браузеру информацию о типе(html,xhtml) использованной гипертекстовой разметки. После этого, зная какая разметка используется, браузер может валидировать ее. Существует два самых популярных типов гипертекстовой разметки: переходная(Transitional) и строгая(Strict). Так же есть третий тип разметки – фреймовая(Frameset), но она используется реже. Кроме того верстка еще делится на два типа: html, xhtml. XHTML является наследником XML, по этому в ней используются многие правила оформления перенятые от XML. О правилах написания xhtml читай в статье «HTML vs XHTL«

Пример Doctype

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Ниже приведены основные различия между переходной и строгой разметкой:
Переходная совместимость (Transitional)
Составляющие:
•    Правильный XHTML-код. (Также допустимо использовать HTML 4.01.);
•    CSS для управления шрифтами, цветом, границами и другими элементами;
•    Легкое использование таблиц XHTML для разметки. Следует избегать вложенных таблиц, возлагая эту работу на CSS;
•    Дополнительно: можно применять структурные метки к значащим ячейкам таблицы (полезно для CSS и при создании скриптов, поможет в переходе к разметке CSS без таблиц);
•    jаvascript/ECMAScript на базе DOM, допустимо разветвление кода.
Преимущества:
•    Рациональная совместимость со старыми браузерами. Обратная совместимость с новыми продуктами – такие сайты будут отлично работать в новых браузерах и устройствах;
•    Начало пути к окончательному переходу сайта на XML-код и CSS-разметку;
•    Повышение доступности сайта, снижение риска потери части посетителей, соответствие нормам и требованиям по доступности;
•    Частичное разделение содержания и дизайна (код все же содержит некоторые элементы дизайна);
•    Элегантность, четкость и простота кода, снижение размера файлов,
уменьшение трафика и снижение расходов на производство, обслуживание и поддержку сайта.
Недостатки:
•    Структура и внешний вид по-прежнему связаны, что несколько осложняет обслуживание и обновление сайта;
•    По этой же причине в будущем поддерживать такие сайты будет все труднее, если учесть распространение основанных на XML систем управления
контентом (Content-management System – CMS). Вряд ли это станет проблемой для маленьких сайтов, но для крупномасштабных сайтов, содержащих сотни и тысячи динамических страниц, это может обернуться
большой головной болью.
Строгая совместимость(Strict)
Составляющие:
•    Полное отделение структуры от оформления и поведения;
•    
•    Для разметки используется CSS. Таблицы применяются лишь по прямому
назначению – для отображения табличных данных, например адресных
книг, списков событий, учетных записей, электронных таблиц;
•    Создание структуры страниц на XHTML 1.0 Strict или XHTML 1.0 Transitional;
•    Акцент на структуре. В коде не содержится уловок по оформлению сайта.
•    Структурные метки элементов дизайна;
•    Для придания динамики сайту используются скрипты, основанные на
объектной модели DOM. Разветвление кода только в случае крайней необходимости;
•    Атрибут повышения доступности и тестирование.
Преимущества:
•    Более высокая степень совместимости с существующими и будущими браузерами и беспроводными устройствами;
•    Легкий переход к более продвинутым формам основанного на XML кода;
•    Элегантный, простой,и логичный код;
•    Более легкое, быстрое и создание и обслуживание. Благодаря
снижению затрат на создание и поддержку сайта, маленькие бюджеты
можно уберечь от истощения, а большие использовать для наполнения
сайта контентом, дизайна, программирования, графики, фотографий,
редактирования и тестирования юзабилити;
•    Проще интегрировать сайт с системами управления контентом на базе
шаблонов и динамической публикации;
•    Благодаря CSS можно создавать дизайн, который невозможен при разметке с помощью таблиц HTML;
•    Cайты будут работать в еще не созданных браузерах и устройствах.
Недостатки:
•    Поддержка браузерами CSS еще не идеальна. Могут потребоваться некоторые доработки;
•    Некоторые приемы, легко выполняемые с помощью таблиц HTML, невозможно осуществить с помощью CSS. Поэтому, возможно, потребуется переосмыслить определенные дизайнерские идеи;
•    Динамические модели сайта на базе DOM не будут работать в браузерах
4.0 и более ранних версиях, а также в программах для чтения информации с экрана, текстовых браузерах и в большинстве беспроводных устройств. Для обеспечения функциональности в этих устройствах и браузерах потребуется использовать теги и возможности CGI.
Tags: doctype, HTML


Различия между строгой и переходной разметкой я понял. Спасибо. А вот различия между доктайпами до сих пор не понятны. Например во втором () в начале говориться о том что это HTML, а в конце, о том что это strict, хотя у тебя написано что стрикт это для XHTML. Было бы здорово узнать что означает каждый из составляющих доктайпа, что бы не только знать какие бывают правильные варианты, но и уметь составлять их самостоятельно. Заранее спасибо.

XHTML является наследником XML, по этому в ней используются многие правила оформления перенятые от XML.
«Наследник» — неудачное слово. Лучше «подмножество» или «приложение». XHTML обязан быть полностью веллформным XML, это четко прописано в его спецификации.
Строгая совместимость(Strict)
Создание структуры страниц на XHTML 1.0 Strict или XHTML 1.0 Transitional;

Переходная совместимость (Transitional): Легкое использование таблиц XHTML для разметки.
Строгая совместимость (Strict): Для разметки используется CSS. Таблицы применяются лишь по прямому назначению – для отображения табличных данных, например адресных книг, списков событий, учетных записей, электронных таблиц;
Transitional и Strict не разрешают и не запрещают использование таблиц для верстки.
Transitional, в отличае от Strict, позволяет использовать некоторые оформительские теги и атрибуты: b, i, u, strike, br, nobr.