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

19

Здрастуйте, з Вами Бернацький Андрій. Хочу Вам запропонувати до прочитання гарну статтю, яку я знайшов на сайті habrahabr. Стаття, на мій погляд, буде дуже корисна і цікава всім, хто тільки починає подорож у світ сайтобудування.

Не буду тягнути гуму, а пропоную відразу ж Вам приступити до прочитання статті!

Чому так важливий 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 єдиний DTD XHTML який підтримує фрейми.

XHTML 1.1 DTD

Це новий DTD, який має строгість як у XHTML 1.0 Strict, і базується на фреймворку і модулях описаних в Modularization of XHTML (не став шукати що це таке Чому важливий DOCTYPE і як його правильно використовувати .

Статистика використання різних 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.

      використовуйте або Source code.

      використовуйте або .

      використовуйте або.

      використовуйте CSS.

      використовуйте CSS стиль.

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

align

alink

background

color

color

hspace

link

size

text

type

vlink

vspace

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

Теги повинні бути написані в нижньому регістрі, замість Чому важливий DOCTYPE і як його правильно використовувати, як це було в HTML, треба писати: Чому важливий DOCTYPE і як його правильно використовувати

Всі теги повинні закриватися, або з використанням тега зі слешем в парі, як параграф (

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

Всі теги повинні бути правильно вкладені один в одного, без перекриттів

Не повинні використовуватися застарілі теги

Всі аттрібути повинні бути набрані в нижньому регістрі

Всі значення атрибутів повинні бути укладені в одинарні або подвійні лапки

Всі аттрібути повинні використовуватися у довгій формі, а не у короткій: disabled=»disabled» в XHTML проти DISABLED в HTML

Структура повинна бути відокремлена від контенту. Наприклад тег

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

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

IE8 має чотири режими: IE 5.5 режим сумісності, IE 7 стандартний режим, IE 8 стандартному режимі і IE 8 в режимі сумісності.

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

Джерела інформації

http://hsivonen.iki.fi/doctype/ — детальна таблиця вибору режиму роботи (всі браузери)

http://en.wikipedia.org/wiki/Doctype

http://www.htmlbook.ru/html/!doctype.html

http://www.webmascon.com/topics/coding/25a.asp

http://www.quirksmode.org/css/quirksmode.html — що таке Quirks mode

http://www.quirksmode.org/css/box.html — виправлення box моделі

Остання таблиця відповідностей http://hsivonen.iki.fi/doctype/

http://htmlfixit.com/tutes/tutorial_XHTML_and_HTML_-_The_differences.shtml різниця між HTML і XHTML

http://htmlfixit.com/tutes/tutorial_XHTML_and_HTML_Validation__Deprecated_tags_and_attributes.php застарілі теги і атрибут і чим їх замінити

http://www.w3.org/TR/html401/appendix/changes.html точна інформація про теги, застарілих у HTML 4.01

E-mail:[email protected]

Проект webformyself.com — Як створити свій сайт. Основи самостійного сайтобудування