Чому важливий DOCTYPE і як його правильно використовувати

doctype-logo.jpgВирішив проводити регулярні лекції та практичні заняття зі своїмиспівробітниками з програмування на 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
“>www.w3.org/TR/html4/strict.dtd”> Строгий синтаксис HTML.
“>www.w3.org/TR/html4/loose.dtd”> Перехідний синтаксис HTML.
“>www.w3.org/TR/html4/frameset.dtd”> В HTML-документі використовуються фрейми.
XHTML 1.0
“>www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> Строгий синтаксис XHTML.
“>www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> Переходний синтаксис XHTML.
“>www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”> Документ написаний на XHTML и містить фрейми.
XHTML 1.1
“>www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>

Розробники 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 рр.), звичайно, але нової не знайшов.
http://www.qindex.info/Q_get.php?g_clss=forum&g_prcss=thrd&g_tmplt=&g_brd=5&g_thrd=128

Виходить що Більше 50% сайтів працюють в режимі quirk modeтобто в режимі IE4! 

Застарілі теги і атрибути

Застарілі теги в алфавітному порядку

<applet> Використовуйте тег <object>.
<basefont> використовуйте CSS.
<blockquote> використовуйте CSS.
<center> використовуйте CSS.
<dir> використовуйте <ul>.
<em> використовуйте CSS.
<font> використовуйте CSS.
<isindex>
<listing> використовуйте <pre> або CSS.
<menu> замініть тегом <ul> або CSS.
<nextid>
<plaintext> використовуйте <pre> або <a href='view-source:http://somesite.com'> Source code </ a>.
<s> використовуйте <del> або <ins>.
<strike> використовуйте <del> або <ins>.
<u> використовуйте CSS.
<xmp> використовуйте <pre> і CSS стиль.

 Застарілі HTML / XHTML атрибути тегів. Всі вони можуть бути замінені CSSстилями.  

  • align
  • alink
  • background
  • bgcolor
  • color
  • hspace
  • link
  • size
  • text
  • type
  • vlink
  • vspace

  Різниця між HTML і XHTML (вказані правила для XHTML)

  •  Теги повинні бути написані в нижньому регістрі, замість <IMG SRC=”resource/frankisboat.gif” WIDTH=”389″ HEIGHT=”227″ BORDER=”0″ ALT=”boat”>, як це було в HTML, потрібно писати <img src=”resource/frankisboat.gif” width=”389″ height=”227″ border=”0″ alt=”boat” />:
  • Всі теги повинні закриватися, або з використанням тега зі слешем в парі, як параграф (

    ) наприклад, або самозакриваються теги, як наприклад (
    ).

  • Всі теги повинні бути правильно вкладені одна в одну, без перекриттів
  • Не повинні використовуватися застарілі теги
  • Всі атрибути повинні бути набрані в нижньому регістрі
  • Всі значення атрибутів повинні бути укладені в одинарні або подвійні лапки
  • Всі атрибути повинні використовуватися в довгій формі, а не в короткій:disabled = “disabled” в XHTML проти DISABLED в HTML
  • Структура повинна бути відокремлена від контенту. Наприклад тег

    – це частина контенту (параграф) і ви не можете помістити в нього наприклад таблицю, тому що таблиця це частина структури (форматування).  

Сумісність і IE8

IE8 має чотири режими: IE 5.5 режим сумісності, IE 7 стандартний режим, IE в 8 стандартному режимі і IE 8 в режимі сумісності.
Вибір способу залежить від даних з різних джерел: DOCTYPE, meta елементів, заголовків HTTP, періодично завантажуються даних від Microsoft (!),Інтрамережі, налаштувань, зроблених користувачем, налаштувань зроблених адміністратором, наявності сайту в блеклісте microsoft та інше! 

 Схема визначення в якому режимі працювати браузеру IE8  

http://hsivonen.iki.fi/doctype/ie8-mode.pdf 

Джерело http://habrahabr.ru/blogs/webdev/71364/  

Напишіть відгук

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *