Строительство домов по канадской каркасной технологии, строительство домов в Киеве - Будинок у задоволення

Сага о doctype

09.3.2008  –  Рубрика: HTML&CSS

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

Вот примеры правильных доктайпов:


<!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 без таблиц);
  • JavaScript/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: ,

4 Отзывов to “Сага о doctype”

  1. Xero201:
    Ноябрь 15, 2008 в 18:49

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

  2. SelenIT:
    Декабрь 1, 2008 в 15:22

    XHTML является наследником XML, по этому в ней используются многие правила оформления перенятые от XML.

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

    Строгая совместимость(Strict)

    Создание структуры страниц на XHTML 1.0 Strict или XHTML 1.0 Transitional;

    Опечатка?

  3. Алик Кириллович:
    Апрель 18, 2009 в 0:55

    Переходная совместимость (Transitional): Легкое использование таблиц XHTML для разметки.

    Строгая совместимость (Strict): Для разметки используется CSS. Таблицы применяются лишь по прямому назначению – для отображения табличных данных, например адресных книг, списков событий, учетных записей, электронных таблиц;

    Transitional и Strict не разрешают и не запрещают использование таблиц для верстки.

    Transitional, в отличае от Strict, позволяет использовать некоторые оформительские теги и атрибуты: b, i, u, strike, br, nobr.

    Использование блочной (бестабличной) верстки — это вопрос семантики, а не Doctype (Transitional или Strict).

  4. yuma » Blog Archive » hurah:
    Ноябрь 23, 2010 в 2:16

    [...] о типах разметки можно прочитать в заметке «Сага о doctype») что приведет к не прохождению [...]

Оставить отзыв

Последние записи

Цифровая печать - Оперативная полиграфия T-Print, печать визиток, флаеров, бланков. Веб-дизайн сайтов Раскрутка веб ресурсов продвижение сайтов usability исследования.
Real Time Web Analytics