Главная - Браузеры
Элемент DOCTYPE. Что это такое и зачем он нужен

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

И, также как в 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 год.

Стандарт 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:

Эта абракадабра означает, что HTML-код, идущий ниже, соответствует стандарту 4.01, принятому организацией W3C (вот этот кусок абракадабры "-//W3C//DTD HTML 4.01//EN" ). Инструкции, написанные организацией W3C, касательно данного стандарта, находятся вот там: "http://www.w3.org/TR/html4/strict.dtd" и браузер может прогуляться по этому адресу для уточнения.

Экспериментировать будем с вот таким HTML-кодом:

Проверочка

Немного текста

Основное внимание нужно обратить на присутствие в коде запрещенных элементов: align="center" и тега .

Теперь проверим этот код на соответствие стандартам. Как я неоднократно говорил ранее, есть замечательное расширение для FireFox под названием . Програмулина показывает две ошибки в HTML-коде:

Все оказалось предсказуемо. Валидатор ругается на атрибут align и тег , такие вещи запрещены в стандарте HTML 4.01, который мы декларируем первой строчкой HTML-кода.

Заменим первую строчку на доктайп стандарта HTML 4.01 переходного синтаксиса :

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

Вуаля, уважаемый читатель, тех двух ошибок как не бывало:

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

Переходный доктайп стандарта XHTML 1.0 позволит использовать HTML-директивы для задания внешнего вида, но за соответствием идеологии XML будет следить пристально и реагировать ошибкой валидации на каждый незакрытый одиночный тег или отсутствие alt-свойства у картинки.

Какой стандарт выбрать

Я считаю, что нужно верстать валидно в соответствии со строгим синтаксисом стандарта. Это заставит использовать HTML по его прямому назначению и не мешать котлеты с мухами в одной тарелке. Кроме того, если сайт сверстан валидно и неправильно отображается в каком-либо браузере – то это проблема браузера, новые версии которого все лучше и лучше соответствуют стандартам организации W3C и исправляют ошибки интерпретации валидного кода. А вот если вы реализовали какую-то сложную структуру извращенным, невалидным способом, то где гарантии того, что новые версии браузеров не порвут вашу верстку в клочки?

Так что, никаких переходных синтаксисов, только строгое соответствие стандартам .

За строгое соответствие стандартам выступает еще один довод. Ноги этого довода растут из нашего спора с Takobus, разгоревшегося в комментариях к статье о . Оказывается, 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

Как научится верстать в соответствии с выбранным стандартом

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

Веселое видео в тему

P.S. Продолжается бессрочная акция по обмену постовыми. Я с радостью обменяюсь ссылками с тематическими блогами и сайтами. Если у вас есть желание, пишите в .

В продолжении к вышесказанному размещаю постовой.

Интересуешься веб-дизайном? Создаешь сайты? Тогда на Web 2.0 Portal ты найдешь много интересного.

-это элемент предназначенный, для типа будущего документа (в частности HTML и XHTML). Абвиотура DTD-что в переводе означает (document type definition) описание е типа документа. Этот элемент необходим для того, что бы браузеры могли понимать, как им следует видеть и отображать будущий документ, веб страницу.
На данном этапе веб разработок существует несколько видов элемента . Ниже в таблице №1, предоставлены несколько основных типов этого элемента и их краткое описание.

Таблица №1

Вид элемента Краткое описание
HTML 4.01
Тип строгий синтаксис HTML.
Тип переходный синтаксис HTML.
Указывает на то, что в HTML-документе применяются фреймы.
HTML 5
Для всех документов.
XHTML 1.0
Тип строгий синтаксис XHTML.
Тип переходный синтаксис XHTML.
Указывает на то, что документ написан на XHTML и содержит фреймы.
XHTML 1.1
Разработчики XHTML 1.1 предполагают, что он постепенно вытеснит HTML. Никакого деления на виды это определение не имеет, синтаксис один и подчиняется четким правилам.

Разберём по порядку устройство строки с элементом .

Элементверхнегоуровня ][Публичность ]"[Регистрация] //[Организация ]//[Тип ][Имя ]//[Язык ]" "">

- тип будущего документа.

Элемент верхнего уровня — указывает элемент верхнего уровня в документе, для HTML это тег .

Публичность — объект является публичным (значение PUBLIC) или системным ресурсом (значение SYSTEM), например, таким как локальный файл. Для HTML/XHTML указывается значение PUBLIC.

Регистрация — сообщает, что разработчик DTD зарегистрирован в международной организации по стандартизации (International Organization for Standardization, ISO). Принимает одно из двух значений: плюс (+) — разработчик зарегистрирован в ISO и - (минус) — разработчик не зарегистрирован. Для W3C значение ставится «-».

Организация — уникальное название организации, разработавшей DTD. Официально HTML/XHTML публикует W3C, это название и пишется в .

Тип — тип описываемого документа. Для HTML/XHTML значение указывается DTD.

Имя — уникальное имя документа для описания DTD.

Язык — язык, на котором написан текст для описания объекта. Содержит две буквы, пишется в верхнем регистре. Для документа HTML/XHTML указывается английский язык (EN).

URL — адрес документа с DTD.

Вот, пожалуй, основной принцип, устройства и действия данного элемента ..
Закрывающий тег для данного элемента не требуется.
В качестве примера приведён HTML 4.01:

DOCTYPE это декларация, которая определяет тип документа. Декларация не является тегом HTML это только инструкция для веб-браузера о том, какая версия HTML используется в документе. Декларация !DOCTYPE помогает браузеру отобразить веб-страницу правильно, для этого браузер должен знать, как тип, так и версию документа.

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

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

Хронология версий HTML:

Версия HTML HTML 2.0 HTML 3.2 HTML 4.01 XHTML HTML 5
Год 1991 1995 1997 1999 2000 2014

Поддержка браузерами

Декларация
Opera

IExplorer

Edge
!DOCTYPE Да Да Да Да Да Да

Пример использования

Пример использования декларации !DOCTYPE для HTML5 документа:

Пример использования декларации!DOCTYPE

Это заголовок

Это параграф.

Отличия HTML 4.01 от HTML 5

DOCTYPE для HTML 4.01

Используется три варианта !DOCTYPE :

1. Строгий (Strict) : не содержит элементов, помеченных как «устаревшие» и «не одобряемые» (deprecated). PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 2. Переходный (Transitional) : содержит устаревшие теги (для совместимости и перехода с более старых версий HTML). PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 3. С фреймами (Frameset) : аналогичен переходному, но также включены теги для создания фреймов. PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

Решил проводить регулярные лекции и практические занятия со своими сотрудниками по программированию на PHP, MySQL, Javascript. А также другим технологиям необходимым для выпуска качественных сайтов. Начать решил с самого «верха», с HTML тэгов. Буду рад, любым комментариям:)
Сразу оговорюсь, что бОльшая часть информации я нашел в интернете, внизу статьи будут приведены ссылки на источники. Часть информации была переведена совместно с google translate.
Итак:

Почему так важен DOCTYPE

Вроде бы вы сделали все правильно, но ваш сайт почему-то не выглядит или не работает, как ожидалось, в последних версиях броузеров.
Вы написали правильный стандартный XHTML код и стандартный CSS. Вы воспользовались стандартной спецификацией для работы с DOM (Document Object Model), чтобы управлять динамическими элементами на странице. И все-таки, в броузерах, которые казалось бы сделаны с соблюдением именно этих стандартов, ваш сайт не работает. Скорей всего, ошибка кроется в неправильном заголовке DOCTYPE.
Эта небольшая статья расскажет вам о заголовках DOCTYPE, которые работают, а также объяснит практическое и теоретическое значение этого, казалось бы отвлеченного от реальности, тега.

Что такое DOCTYPE?

Согласно спецификациям HTML и XHTML тег DOCTYPE (что означает «объявление типа документа») сообщает валидатору, какую именно версию (X)HTML вы используете в своей странице. Этот тег должен всегда находиться в первой строке каждой страницы. Тег DOCTYPE - ключевой компонент web-страниц, претендующих на соответствие стандартам: без него ваш код и CSS не пройдут проверку валидатором.
Тег DOCTYPE также важен для правильного отображения и работы страницы в броузерах, соответствующих стандартам (Mozilla, IE5/Mac, и IE6/Win).
Тег DOCTYPE, в атрибутах которого указывается полный URI (полный web-адрес), сообщает броузерам, что страницу нужно вывести с соблюдением определенного стандарта или подвида этого стандарта.
Если вы будете пользоваться неполным тегом DOCTYPE, устаревшим его видом, или вообще забудете про него, броузер перейдет в «загадочный» (quirk) режим и будет исходить из предположения, что вы писали код страницы с ошибками и вольно отступали от стандартов, т.е. так, как писали в конце 90-ых годов.
В этом режиме броузер попытается разобрать вашу страницу по правилам обратной совместимости и выведет на экран, например, CSS так, как его вывел бы Internet Explorer 4-ой версии, а DOM будет работать так, как он работал именно в этом броузере (IE переключается в свой старый DOM, а Mozilla и Netscape 6 переключается вообще в бог знает что).
Понятно, что для вас эти выкрутасы не желательны. Но именно это вы и получите, если будете пользоваться неполным или неправильным тегом DOCTYPE.

Проблема

Когда создавали NN4, IE4 выполняли правила CSS не совсем в соответствии со стандартом. Реализация Netscape была просто ужасной, IE4 подошел к реализации стандарта лучше, но тем не менее, реализовал его не до конца. Хотя IE 5 Windows исправил множество ошибок IE 4, но оставались другие сбои в CSS (в основном в модели окон (window model)).
Поэтому, когда соответствие стандартам стало важным, W3C поставил производителей браузеров перед жестким выбором.
Приблизится к спецификации W3C было одним из решений проблемы, но если бы производители браузеров просто изменили реализацию CSS, чтобы соответствовать стандартам полностью, многие веб-сайты, «поползли» бы в большей или меньшей степени или оказались полностью неработоспособными. Такое сближение с соблюдением стандарта повлекло бы за собой проблемы. С другой стороны, не приведение к соответствию стандартов могло бы внести вечную путаницу в эпоху войны браузеров.

Решение

Поэтому решением этой проблемы было
  • позволить веб-разработчикам, которые знали о стандартах, выбирать какой режим использовать.
  • продолжать показывать старые страницы по старым (совместимым) правилам. (quirks mode)

Иными словами, всем браузерам необходимо было работать в двух режимах: режим совместимости для старых правил, и строгого режима для стандарта.
IE Mac был первым браузером использовавшим оба режима, а Windows IE 6, Mozilla, Safari, Opera и последовали его примеру.
IE 5 Windows, а также старые браузеры, как Netscape 4, постоянно заблокированы в режиме совместимости.

Решение о выборе, какой режим отображения требуется вызвать, было найдено в использовании «DOCTYPE» переключения. Согласно стандартам, любой (X) HTML документ должен иметь DOCTYPE который рассказывает всему миру, какой тип (X) HTML документа он использует.

Допустимые DTD

DOCTYPE Описание
HTML 4.01
Строгий синтаксис HTML.
Переходный синтаксис HTML.
В HTML-документе применяются фреймы.
XHTML 1.0
Строгий синтаксис XHTML.
Переходный синтаксис XHTML.
Документ написан на XHTML и содержит фреймы.
XHTML 1.1
Разработчики XHTML 1.1 предполагают, что он постепенно вытеснит HTML. Никакого деления на виды это определение не имеет, синтаксис один и подчиняется четким правилам.

HTML 4.01 DTDs

  • HTML 4.01 Strict - Не разрешает презентационной (оформительской) разметки, аргументируя тем, что этоим должен заниматься CSS.
  • Transitional DTD позволяет некоторые устаревшие аттрибуты и элементы
  • Если используются фреймы - должен быть использован frameset doctype

XHTML 1.0 DTDs

  • XHTML Strict DTD самый строгий существующий DTD: устаревшие (см ниже) теги не поддерживаются, и код должен быть написан правильно
  • XHTML Transitional DTD такой же как XHTML Strict DTD, но старые теги разрешены. Это НАИБОЛЕЕ ПОПУЛЯРНЫЙ в настоящий момент DTD.
  • XHTML Frameset DTD единственный XHTML DTD который поддерживает фреймы.

XHTML 1.1 DTD

Это новый DTD, который имеет строгость как у XHTML 1.0 Strict, и основан на фреймворке и модулях описанных в Modularization of XHTML (не стал искать что это такое:).

Статистика использования различных DTD

Староватая (с 2004 по 2008 гг), конечно, но новой не нашел.
www.qindex.info/Q_get.php?g_clss=forum&g_prcss=thrd&g_tmplt=&g_brd=5&g_thrd=128

Получается что Более 50% сайтов работают в режиме quirk mode - то есть в режиме IE4!

Устаревшие тэги и аттрибуты

Устаревшие тэги в алфавитном порядке

  • Используйте тег.
  • используйте CSS.
  • используйте CSS.
  • используйте CSS.
  • используйте
      .
    • используйте CSS.
    • используйте CSS.
    • используйте
      Или CSS.
    • замените тегом
        или CSS.
      • Используйте <pre>Или Source code.</li> <li><s>используйте<del> или <ins>.</li> <li><strike> используйте <del> или<ins>.</li> <li><u>используйте CSS.</li> <li><xmp> используйте <pre>И CSS стиль.</li> </ul><h3>Устаревшие HTML / XHTML аттрибуты тегов. Все они могут быть заменены CSS стилями.</h3><ul><li>align</li> <li>alink</li> <li>background</li> <li>bgcolor</li> <li>color</li> <li>hspace</li> <li>vlink</li> <li>vspace</li> </ul><h2>Разница между HTML и XHTML (указаны правила для XHTML)</h2><ul><li>Тэги должны быть написаны в нижнем регистре, вместо <img src='/element-doctype-chto-eto-takoe-i-zachem-on-nuzhen-doctype-html---chto-eto-chto-nuzhno/' loading=lazy>, как это было в HTML, нужно писать: <img src='https://i1.wp.com/resource/frankisboat.gif' height="227" width="389" loading=lazy></li> <li>Все теги должны закрываться, или с использованием тэга со слешем в паре, как параграф () например, или самозакрывающиеся тэги, как например (<br />).</li> <li>Все теги должны быть правильно вложены друг в друга, без перекрытий</li> <li>Не должны использоваться устаревшие теги</li> <li>Все аттрибуты должны быть набраны в нижем регистре</li> <li>Все значение аттрибутов должны быть заключены в одинарные или двойные кавычки</li> <li>Все аттрибуты должны использоваться в длинной форме, а не в короткой: disabled="disabled" в XHTML против DISABLED в HTML</li> <li>Структура должна быть отделена от контента. Например тег <p>Это часть контента (параграф) и вы не можете поместить в него например таблицу, потому что таблица это часть структуры (форматирования).</li> </ul><h3>Совместимость и IE8</h3> IE8 имеет четыре режима: IE 5.5 режим совместимости, IE 7 стандартный режим, IE в 8 стандартном режиме и IE 8 в режиме совместимости. <br> Выбор способа зависит от данных из различных источников: DOCTYPE, meta элементов, заголовков HTTP, периодически загружаемых данных от Microsoft (!), интрасети, настроек, сделанных пользователем, настроек сделанных администратором, наличия сайта в блеклисте microsoft и прочее! <h4>Схема (черт ногу сломит) определения в каком режиме работать браузеру IE8</h4>http://hsivonen.iki.fi/doctype/ie8-mode.pdf <h3>Источники информации</h3>http://hsivonen.iki.fi/doctype/ - подробная таблица выбора режима работы (все браузеры) <p><b><!DOCTYPE> </b> указывает, в соответствии с каким стандартом HTML написана ваша Web-страница.</p><br><table class="tbl1"><tbody><tr><th style="width:65%;">DOCTYPE </th><th>Описание </th> </tr><tr><td colspan="2"><b>HTML5 </b> </td> </tr><tr><td><!DOCTYPE html> </td> <td>Для всех документов. </td> </tr><tr><td colspan="2"><b>HTML 4.01 </b> </td> </tr><tr><td><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"<br>"http://www.w3.org/TR/html4/strict.dtd"> </td> <td>Строгий синтаксис HTML. </td> </tr><tr><td><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> </td> <td>Переходный синтаксис HTML. </td> </tr><tr><td><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> </td> <td>В HTML-документе применяются фреймы. </td> </tr><tr><td colspan="2"><b>XHTML 1.0 </b> </td> </tr><tr><td><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> </td> <td>Строгий синтаксис XHTML. </td> </tr><tr><td><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> </td> <td>Переходный синтаксис XHTML. </td> </tr><tr><td><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> </td> <td>Документ написан на XHTML и содержит фреймы. </td> </tr><tr><td><!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"> </td> <td>XHTML мобильного профиля, добавляет специфические элементы для мобильных телефонов. </td> </tr><tr><td colspan="2"><b>XHTML 1.1 </b> </td> </tr><tr><td><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"<br>"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> </td> <td>Никакого деления на виды это определение не имеет, синтаксис один и подчиняется четким правилам. </td> </tr></tbody></table><p>Итак, доктайпов существует несколько (строгие и переходные, для HTML и XHTML). Какой стандарт выбрать - вот в чем вопрос.</p> <h2>Стандарты HTML и XHTML</h2> <p>HTML - стандартный язык разметки Web-документов.</p> <p>В HTML 4.01 и HTML5 внешний вид страницы отделен от ее содержания. Содержание и структура (заголовки, абзацы, ссылки) задаются в HTML. Оформление (выравнивание, шрифты, цвета) задаются CSS-стилями.</p> <p>Например, тег <font> и атрибут align объявлены устаревшими.</p> <p>XHTML - расширяемый язык разметки Web-документов, созданный на базе XML . Стандарт XHTML представляет собой перечень различий между HTML 4.01 и XHTML.</p> <table class="tbl1"><tr><th style="width:38%;">Требования XHTML </th><th style="width:31%;">Нельзя </th><th style="width:31%;">Нужно </th> </tr><tr><td>Все теги должны быть закрыты. </td><td style="text-align:center;"><br> </td><td style="text-align:center;"><br /> </td> </tr><tr><td>Все теги, атрибуты и CSS-свойства должны быть набраны в нижнем регистре. </td><td style="text-align:center;"><img src='/element-doctype-chto-eto-takoe-i-zachem-on-nuzhen-doctype-html---chto-eto-chto-nuzhno/' loading=lazy> </td><td style="text-align:center;"><img src='/element-doctype-chto-eto-takoe-i-zachem-on-nuzhen-doctype-html---chto-eto-chto-nuzhno/' loading=lazy> </td> </tr><tr><td>Все значения атрибутов тегов должны быть заключены в кавычки. </td><td style="text-align:center;"><a href=http://сайт> </td><td style="text-align:center;"><a href="http://сайт"> </td> </tr><tr><td>Должна строго выполняться иерархия: первый тег закрывается последним. </td><td style="text-align:center;"><em><u>...</em></u> </td><td style="text-align:center;"><em><u>...</u></em> </td> </tr><tr><td>Блочный тег не может быть вложен в строчный. (После блочного элемента дальнейший вывод на странице осуществляется с новой строки. Строчный элемент перевода строки не делает.) </td><td style="text-align:center;"><div>...</div> </td><td style="text-align:center;"><div>...</div> </td> </tr><tr><td>Булевы атрибуты записываются в развёрнутой форме. </td><td style="text-align:center;"><option selected> </td><td style="text-align:center;"><option selected="selected"> </td> </tr><tr><td>У изображений обязательно должно быть указано описание </td><td style="text-align:center;"><img src='https://i1.wp.com/Ba.gif' loading=lazy> </td><td style="text-align:center;"><img src='https://i0.wp.com/Ba.gif' loading=lazy> </td> </tr></table><p>Достоинства языка XHTML - не строгость синтаксиса, а возможность придумывать собственные теги.</p> <p>Однако, 2 июля 2009 года Консорциум Всемирной паутины (W3C) сообщил о прекращении работ над XHTML 2.0, посчитав концепцию XHTML неверной. Группа программистов переключилась на работу над стандартом HTML5. И хотя стандарт HTML5 всё ещё не утверждён, на нём уже написано множество сайтов.</p> <p>Кому интересно, когда же HTML5 будет закончен, могут ознакомиться с первоисточниками:</p> <p>Официальная версия стандарта HTML5 находится по адресу: www.w3.org/TR/html5/</p> <p>Определимся с выбором. Сделать его несложно: использовать XHTML-стандарт не стоит, если вы не собираетесь расширять язык HTML.</p> <p>На!DOCTYPE, предназначенных для документов, использующих фреймы , останавливаться не будем: позавчерашний день.</p> <p>Следующий вопрос: какой выбрать синтаксис - строгий или переходный?</p> <h2>Строгий и переходный синтаксис HTML 4.01</h2> <p>Переходные синтаксисы существуют для того, чтобы облегчить переход на новый стандарт. Они пропустят многое из того, что строгий синтаксис посчитает ошибками.</p> <p>Понять, что тут к чему, проще на примере. Сначала зададим строгий синтаксис.</p> <h4>Строгий синтаксис</h4> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Проверка на валидность</title> </head> <body bgcolor="green"> <H1 align="center">Проверка на валидность</H1> <p> <font color="red">красным</font> цветом.</p> </body> </html> <p>Соответствие HTML-кода объявленному стандарту называют <b>валидностью </b>, а проверку на это соответствие - <b>валидацией </b>.</p> <p>Чтобы отслеживать ошибки верстки, установим дополнение к FireFox Html Validator .</p> <p>Откроем нашу страницу в браузере FireFox, наведем мышку на знак валидатора:</p> <p>Двойной щелчок на знаке валидатора даст развернутый список ошибок:</p> <br><img src='https://i0.wp.com/htmlweb.ru/pic/validator2.gif' width="100%" loading=lazy><p>Поменяем!DOCTYPE на переходный синтаксис:</p> <h4>Переходный синтаксис</h4> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Проверка на валидность</title> </head> <body bgcolor="green"> <H1 align="center">Проверка на валидность</H1> <p>Часть текста понадобилось выделить <font color="red">красным</font> цветом.</p> </body> </html> <p>Запускаем FireFox. Ошибок нет:</p> <br><img src='https://i0.wp.com/htmlweb.ru/pic/validator3.gif' width="100%" loading=lazy><p>Вроде все прекрасно. Может, на этом и остановиться?</p> <p>Мой совет: делать валидную верстку или в соответствии со строгим синтаксисом HTML 4.01, или сразу на HTML5. HTML надо использовать по его прямому назначению, а оформление оставить CSS. Кроме того, если у сайта валидная верстка, а он неправильно отображается в каком-либо браузере, то это однозначно проблема браузера. Новые версии браузера будут лучше соответствовать стандарту и не ошибаться в интерпретации валидного кода. Если же сложная верстка реализована невалидным способом, то нет гарантий, что новые версии браузеров не рассыпят ее на кусочки.</p> <p>Не соблазняйтесь лояльностью переходного синтаксиса, только строгое соответствие стандартам!</p> <h2>Зачем нужна валидная верстка</h2> <p>Казалось бы, зачем мучиться? Ведь маленькие недочеты верстки браузеры часто исправляют автоматически, и сайт работает абсолютно нормально. Но эти мелкие, практические незаметные ошибки тем не менее замечают поисковые системы. Даже один отсутствующий тег </p> - это минус на оценке качества сайта.</p> <p>Именно из-за способности поисковых систем замечать любые недочеты HТML-кода и рекомендуется соблюдать валидность верстки. Кроме того, проверяя код на валидность, можно обнаружить наряду с мелкими недочетами еще и серьезные ошибки, которые были не замечаны ранее.</p> <br><br> <script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy>");</script> </td> </tr> </table> <span class="article_separator">&nbsp;</span> <br><hr width="90%"><br><table width="100%" cellpadding="1" cellspacing="0" border="0" align="center"> <tr> <th align="left" scope="col"><span class="contentheading">Читайте:</span></th> </tr> <tr> <td><br></td> </tr> <tr> <td align="left" scope="row"> <ul> <li><a href="/nikakaya-tranzakciya-ne-aktivna-problema-svyazannyh-sqlncli-serverov-nikakaya/">Проблема связанных SQLNCLI серверов</a> </li> <li><a href="/asus-igrovoi-noutbuk-vse-noutbuki-igrovye-chem-otlichaetsya-netbuk-ot/">Асус игровой ноутбук. Все ноутбуки игровые. Чем отличается нетбук от ноутбука</a> </li> <li><a href="/god-postupleniya-v-prodazhu-pervoi-integralnoi-shemy/">История отечественной электронной компонентной базы (ЭКБ) летию официальной даты посвящается</a> </li> <li><a href="/whatsapp-kak-perevoditsya-na-russkii-yazyk-whatsapp-perevod-na/">Whatsapp перевод на русский язык — Как переводится WhatsApp (перевод Ватсап с английского на русский) Что значит ватсап перевод</a> </li> <li><a href="/kak-otkatit-obnovlenie-na-xiaomi-ne-obnovlyaetsya-proshivka-na-xiaomi-miui-ne/">Не обновляется прошивка на Xiaomi Miui не обновляется</a> </li> </ul></td></tr></table><br /><span class="contentheading"></span> </div> <div id="right-column"> <div class="inner"> <div class="moduletable"> <h3>Популярное:</h3> <table class="gk_news_show_table" id="newsshow1"> <tr valign="top" class="gk_news_show_tablerow"> <td style="width: 100%;padding: 0;tex-align:center;" class="gk_news_show_center"> <h4 class="gk_news_show_news_header ta_left"><a href="/proverennyi-sposob-kak-razblokirovat-telefon-megafona/">Как разблокировать телефон "Мегафона" для других операторов?</a></h4><img class="gk_news_show_news_image_static i_right" src="/uploads/5eb7678f213440a2a7a8c61c2fe62cc5.jpg" alt="Как разблокировать телефон "Мегафона" для других операторов?" style="width:110px;height:110px;margin: 3px;" / loading=lazy> </td> <!-- /next_post --> </tr> <tr class="gk_news_show_tablerow"> <td colspan="1" class="gk_news_show_tablerow_bottom gk_news_show_tablerow"> <ul class="gk_news_show_list"> <li class="none"><a href="/java-update-scheduler-chto-eto-za-programma-i-nuzhna-li-ona-chto-takoe-java-java-tm-chto-za/">Java Update Scheduler что это за программа и нужна ли она?</a></li> <li class="none"><a href="/samsung-galaksi-not-7000-belyi-samsung-galaxy-note-n7000---tehnicheskie/">Samsung Galaxy Note N7000 - Технические характеристики</a></li> <li class="none"><a href="/obzor-telefonov-ot-tele2-smartfon-tele2-mini-podrobnyi-obzor-modeli-mobilnyi/">Смартфон Tele2 Mini: подробный обзор модели Мобильный телефон теле2 mini характеристики</a></li> <li class="none"><a href="/proshivka-lenovo-a319-raznymi-sposobami-servisnyi-centr-lenovo-bezopasnaya-proshivka-na/">Сервисный центр lenovo Безопасная прошивка на леново а319</a></li> <li class="none"><a href="/mdf-faily-cherez-chto-otkryvat-kak-otkryt-mdf-ili-mds-fail-programmy-dlya-zapuska-mdf-i/">Как открыть MDF или MDS файл?</a></li> </ul> </td> </tr> </table> </div> <div class="moduletable"> <h3>Новое</h3> <div style="text-align: left;"><span>Как востановить менструальный цикл после родов:</span></div> <ul> <li><a title="Как перенести папку Рабочий стол с диска С: на другой диск?" href="/kak-peremestit-rabochii-stol-i-moi-dokumenty-na-disk-d-kak-perenesti-papku/">Как перенести папку Рабочий стол с диска С: на другой диск?</a></li> <li><a title="Выборка и подсчет строк одним запросом - SQL_CALC_FOUND_ROWS" href="/mysql-skolko-zapisei-v-tablice-vyborka-i-podschet-strok-odnim-zaprosom--/">Выборка и подсчет строк одним запросом - SQL_CALC_FOUND_ROWS</a></li> <li><a title="Обзор бесплатной версии AdwCleaner Адв клинер последняя версия" href="/obzor-besplatnoi-versii-adwcleaner-obzor-besplatnoi-versii-adwcleaner-adv/">Обзор бесплатной версии AdwCleaner Адв клинер последняя версия</a></li> <li><a title="Как настроить игровой режим в программах «Лаборатории Касперского Антивирус с игровым режимом" href="/rezhim-igry-kak-nastroit-igrovoi-rezhim-v-programmah/">Как настроить игровой режим в программах «Лаборатории Касперского Антивирус с игровым режимом</a></li> <li><a title="Обзор функций и возможностей автосигнализации Starline E60 Slave Обзор основных функций" href="/obzor-funkcii-i-vozmozhnostei-avtosignalizacii-starline-e60-slave/">Обзор функций и возможностей автосигнализации Starline E60 Slave Обзор основных функций</a></li> <li><a title="Лимиты вебмани с формальным аттестатом и начальным и их увеличение" href="/limity-na-vnesenie-nalichnyh-v-webmoney-koshelek-limity-vebmani-s-formalnym/">Лимиты вебмани с формальным аттестатом и начальным и их увеличение</a></li> <li><a title="Тарасов назначил свидание костенко в прямом эфире" href="/pryamoi-efir-tarasov-i-kostenko-tarasov-naznachil-svidanie/">Тарасов назначил свидание костенко в прямом эфире</a></li> <li><a title="Все без ума от светланы лободы" href="/peredacha-pust-govoryat-so-svetlanoi-lobodoi-vse-bez-uma-ot/">Все без ума от светланы лободы</a></li> <li><a title="Как сделать автопостинг ВКонтакте: обзор лучших бесплатных и платных сервисов отложенного постинга Приложение для постинга вконтакте" href="/avtomaticheskii-posting-vkontakte-avtoposting-s-servisom-roboposting-kak/">Как сделать автопостинг ВКонтакте: обзор лучших бесплатных и платных сервисов отложенного постинга Приложение для постинга вконтакте</a></li> <li><a title="Проблема связанных SQLNCLI серверов" href="/nikakaya-tranzakciya-ne-aktivna-problema-svyazannyh-sqlncli-serverov-nikakaya/">Проблема связанных SQLNCLI серверов</a></li> </ul> </div> </div> </div> <div id="bottom2"> </div> <div class="clr"></div> </div> </div> </div> </div> </div> <div class="clr"></div> <div id="bottom"> <div class="wrapper"> <div id="footermodules" class="spacer w99"> <div class="block"> <div class="moduletable-nav"> <table width="100%" border="0" cellpadding="0" cellspacing="1"> <tr> </tr> </table> </div> <div class="moduletable"> <br> <table class="gk_news_show_table" id="newsshow1"> <tr valign="top" class="gk_news_show_tablerow"> <td style="width: 25%;padding: 0;" class="gk_news_show_left"> <h4 class="gk_news_show_news_header ta_left"><a href="/asus-igrovoi-noutbuk-vse-noutbuki-igrovye-chem-otlichaetsya-netbuk-ot/">Асус игровой ноутбук. Все ноутбуки игровые. Чем отличается нетбук от ноутбука</a></h4><a href="/asus-igrovoi-noutbuk-vse-noutbuki-igrovye-chem-otlichaetsya-netbuk-ot/"><img class="gk_news_show_news_image_static i_left" src="/uploads/64119ba7c209f8bb54af9cc2ed71d059.jpg" alt="Асус игровой ноутбук. Все ноутбуки игровые. Чем отличается нетбук от ноутбука" style="width:80px;height:80px;margin: 5px;" / loading=lazy></a> <p class="gk_news_show_news_text ta_left">Представляем подборку лучших ноутбуков: для работы, игр, фильмов и по соотношению цена и качество. Ноутбук есть практически у каждого: кто-то...</p> </td> <td style="width: 25%;padding: 0;" class="gk_news_show_left"> <h4 class="gk_news_show_news_header ta_left"><a href="/god-postupleniya-v-prodazhu-pervoi-integralnoi-shemy/">История отечественной электронной компонентной базы (ЭКБ) летию официальной даты посвящается</a></h4><a href="/god-postupleniya-v-prodazhu-pervoi-integralnoi-shemy/"><img class="gk_news_show_news_image_static i_left" src="/uploads/18abb6ef94216bd5cc3cbc2499e52a4c.jpg" alt="История отечественной электронной компонентной базы (ЭКБ) летию официальной даты посвящается" style="width:80px;height:80px;margin: 5px;" / loading=lazy></a> <p class="gk_news_show_news_text ta_left">Первые интегральные схемы 50-летию официальной даты посвящается Б. Малашевич 12 сентября 1958 года сотрудник фирмы Texas Instruments (TI) Джек...</p> </td> <td style="width: 25%;padding: 0;" class="gk_news_show_left"> <h4 class="gk_news_show_news_header ta_left"><a href="/whatsapp-kak-perevoditsya-na-russkii-yazyk-whatsapp-perevod-na/">Whatsapp перевод на русский язык — Как переводится WhatsApp (перевод Ватсап с английского на русский) Что значит ватсап перевод</a></h4><a href="/whatsapp-kak-perevoditsya-na-russkii-yazyk-whatsapp-perevod-na/"><img class="gk_news_show_news_image_static i_left" src="/uploads/20f3b313ac276460ac26cac6a4f64aab.jpg" alt="Whatsapp перевод на русский язык — Как переводится WhatsApp (перевод Ватсап с английского на русский) Что значит ватсап перевод" style="width:80px;height:80px;margin: 5px;" / loading=lazy></a> <p class="gk_news_show_news_text ta_left">Пришло к нам из самого сердца Кремниевой долины. Если вы еще не догадались, то в переводе с английского это значит простое и дружеское «как...</p> </td> <td style="width: 25%;padding: 0;" class="gk_news_show_left"> <h4 class="gk_news_show_news_header ta_left"><a href="/kak-otkatit-obnovlenie-na-xiaomi-ne-obnovlyaetsya-proshivka-na-xiaomi-miui-ne/">Не обновляется прошивка на Xiaomi Miui не обновляется</a></h4><a href="/kak-otkatit-obnovlenie-na-xiaomi-ne-obnovlyaetsya-proshivka-na-xiaomi-miui-ne/"><img class="gk_news_show_news_image_static i_left" src="/uploads/67984d2d26f949e32ef833664420cadc.jpg" alt="Не обновляется прошивка на Xiaomi Miui не обновляется" style="width:80px;height:80px;margin: 5px;" / loading=lazy></a> <p class="gk_news_show_news_text ta_left">Компания Ксиаоми для обеспечения бесперебойной работы своих смартфонов на регулярной основе выпускает обновления своей фирменной оболочки MIUI,...</p> </td> </tr> <tr class="gk_news_show_tablerow"> <td colspan="4" class="gk_news_show_tablerow_bottom gk_news_show_tablerow"> </td> </tr> </table> </div> <div class="moduletable"> <div style="text-align: left;"><a title="Настройки ПК, обновления, обслуживание, настройки" href="/">Настройки ПК, обновления, обслуживание, настройки<br /></div> </div> </div> </div> <div align="right"> <a href=""> <img src="/images/M_images/livemarks.png" alt="feed-image" / loading=lazy> <span>RSS</span></a> <div align="left"> </div> </div> </div> </body> </html>