Що е то DOCTYPE?

Какво е Doctype? На този въпрос по-оптините от вас вероятно биха се изсмяли, но е факт, че повечето хора не знаят и съответно не го ползват, а оттам произлизат големи проблеми. Но дори и най-опитните хора имат пропуски в знанията си за Doctype, защото от гордост пренебрегват елементарните неща.

Не претендирам, че след прочитането на статията ще сте абсолютно запознати с материята, но смятам, че е една добра отправна точка и спокойно може да си избистрите главата с нея.

Doctype история и особености!

Какво е Doctype всъщност? За мнозина това е “онова най-отгоре на HTML документа”, а за други изобщо не съществува в персоналния речник, защото не го ползват. Вероятно не подозирате обаче, че Doctype-a кажи-речи определя поведението на браузъра. Има доста типове Doctype, като дори може да си създавате и собствен, но като цяло изглежда така:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Това разбира се е един от многото, но за това ще поговорим по-надолу.

<!DOCTYPE> реално не е таг, той е декларатор и води до така наречения Document Type Definition (DTD), а той се явява нещо като идентификатор за браузъра и му показва на коя версия на HTML или XHTML е написана страницата.

Но предполагам си задавате въпроса защо се е появила нуждата от Doctype на първо място?

Проблемът е възникнал при появата на CSS. Той е заварил браузърите неподготвени и поддръжката им за него е била ужасна. Уеб разработчиците по това време някак са успяли да закърпят положението, като цената била да се съобразяват с желанията на тези браузъри, а не със стандартите. Знаете какво става когато всеки си прави каквото иска… В един момент обаче W3C си става сила и всички лека полека започват да се съобразяват с правилата им. Възниква проблем – модернизираните браузъри имплементират по-добре CSS правилата, но по този начин остарелите страници започват да се “чупят”. Тук се появява нуждата от два режима на браузъра – един, в който липсва Doctype и който е насочен към старите страници и един, в който Doctype присъства. Така проблемът донякъде е решен, защото ако някой със стара страница поради някаква причина не иска да я обновява, просто не слага doctype и браузърът я разчита “правилно”. Режимът без Doctype се нарича Quirks Mode, а този със – Standards Mode. Между другото има и един трети режим, който обикновено не се споменава, заради супер дребната разлика в него. Нарича се Almost standards mode и единствената причина да съществува е защото <img /> елемента в Standards Mode e inline елемент и носи със себе си едно странно празно разстояние отдолу. Това беше проблем, когато едно време уеб страниците бяха изградени от таблици с картинки. Все пак решението е просто:

img { display: block; }

Въпреки това някой решава да направи цял режим за тази подробност.

И сега ако се пренесем в наши дни, ще видим, че използването на Doctype отдавна се води стандарт. Така, когато ние поставяме Doctype в началото на документа и той е валиден, браузърът разчита правилно страницата и работи в режим Standards, но когато има проблем с декларацията или тя изобщо не е въведена, то той преминава в Quirks режим. Това обаче не е единственото условие! Браузърът може да работи в Quirks Mode дори когато имаме наличен Doctype. Изводът е, че това в какъв режим ще работи браузърът зависи не само от съществуването на Doctype-a, но и от типа му. Един и същ Doctype може да вкара различните браузъри в различен режим. Таблица с повечето браузъри и в какъв режим работят при определен Doctype може да намерите тук или по-подробна версия тук. Може да направите и един бърз тест. Вземете за пример XHTML 1.0 Strict:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Направете си тестова страница с един <img /> елемент. Отворете я под Firefox и под IE7. Според таблицата FF би трябвало да работи в Standards Mode и съответно да има досадното празно място под картинката. IE7 обаче при този Doctype работи в Almost standards mode и там това празно място не съществува. Тъжното в случая е, че както сами виждате няма Doctype, който поставя под един и същ режим всички браузъри.

Валидация

Любимият ни валидатор също се интерсува каква версия е Doctype-ът ви, защото по това се ориентира как да чете страницата надолу и съответно определя валиден ли е документът или не. И все пак не забравяйте, че не винаги когато един документ е валиден, то той е написан правилно и логично.

Как да намерим подходящия Doctype?

Това е въпрос на практика и с времето ще се научите кой Doctype би бил най-подходящ за конкретната нужда. Различните Doctype-ове налагат различни ограничения. Някои например не поддържат определени HTML елементи, което води до объркване сред младите и неопитни кодъри. Таблица, в която може да видите кои елементи се поддържат от даден Doctype може да намерите тук. В момента голям процент от хората преминаха към използването на HTML 5 Doctype.

Надолу ще разгледаме някои от най-основните Doctype-ове и прилежащите им особености. Ако искате да прегледате пълния препоръчителен списък, може да го направите тук.

HTML 4.01 Strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Поддържа всички елементи, с изключение на някои от презентационните и отхвърлените (deprecated). Не поддържа и фреймове (Frames). С този Doctype ясно се разграничава структурната от презентационната част, която си е заделена за CSS.
Преди време писането на Strict означаваше, че си яко Pro, но всъщност малко хора осъзнаваха защо го правят.

HTML 4.01 Transitional

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Поддържат се абсолютно всички елементи (дори deprecated), но фреймовете отново са аут. Препоръката е да се използва за браузъри, които не поддържат CSS, но тъй като това време е отдавна отминало, сега точно това не бива да ви тормози.

HTML 4.01 Frameset

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

Поддържат се абсолютно всички елементи (дори deprecated), но този път в списъка добавяме и Frames.

С развитието си HTML еволюира в XHTML и през 2000 г. официално е сертифициран от W3C. Наложила се появата на още няколко актуални Doctype-a. Изброените надолу Doctype-ове всъщност не се различават кой знае колко от предшествениците им когато стане въпрос за поддръжка на елементи, но въпреки това съществуват значими разлики. Например вече е необходимо елементите без затварящи тагове, като <br> да се самозатварят – <br />. Освен това всички тагове вече се изписват с малки букви. Има още няколко особености, но ако тепърва започвате да пишете HTML едва ли ще ви се наложи да учите какво е било едно време. Това инфо си е по-скоро за обогатяване на знанията. Иначе ето въпросните Doctype-ове за XHTML:

XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Впоследствие доработките за XHTML са насочени към новоизгряващите платформи (например мобилните устройства). Някъде по това време се появяват XHTML 1.1 и XHTML 1.0 Basic. Първият обаче може да се нарече провал, защото идва със странен media type, който се поддържа от малко браузъри. Мисля, че имаше и секънд едишън, който уж оправяше някакви неща, но така и не се наложи. И все пак ето го:

XHTML 1.1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

XHTML 1.0 Basic обаче успява да пробие и бива доработен от Open Mobile Alliance, които го превръщат в ползваем мобилен Doctype – XHTML Mobile Profile (XHTML-MP). Актуалната му версия 1.2 изглежда така:

XHTML-MP 1.2

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN"
"http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">

Постепенно обаче този формат бива изместен от новата версия XHTML Basic 1.1, дело на W3C.

XHTML Basic 1.1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN"
"http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">

Следват няколко неуспешни опита с XHTML 1.2 и XHTML 2.0, за които няма да говорим, просто споменавам, за да знаете, че съществуват като проекти.
В крайна сметка, независимо от W3C, на бял свят се появява HTML 5, разработван от WHATWG. Той си идва и с нов Doctype, който реално може да бъде запомнен! Вижте колко е простичък:

HTML 5

<!DOCTYPE html>

Якото при него е, че когато актуалните браузъри видят този Doctype, те автоматично ще преминат в Standards Mode. Изключение правят IE6 и 7, които ще работят в almost standards mode, но това не може да се нарече проблем. Така че ползвайте си го смело, защото и сега и за в бъдеще сайтовете ви ще работят коректно и няма да се налага да го променяте. Аз го ползвам навсякъде в новите ми проекти.

Заключение

Всъщност Doctype е нещо адски сериозно и мащабно и ако се разровите из мрежата ще намерите тонове допълнителни материали, но тъй като тази статия е ограничена до практичното, няма нужда да споменавам всичко. Надявам се това, което съм синтезирал като информация да ви е било полезно.

P. S. Между другото ден след като завърших статията, на работата ми възникна странен проблем. Добавях идентичен код в две различни страници и под един и същ браузър едната се чупеше, а на другата не. Не бях писал страниците и очевидно трябваше да дебъгвам много внимателно, за да хвана проблема, но тъй като бях на вълна Doctype веднага се досетих какво може да го предизвиква и се оказах прав.

Коментари (3)

  1. Отговор April 19, 2012 / 17:57 Иван

    И аз днес имах такъв проблем. Някой като дебъгвал нещо си оставил един в началото на страницата над DOCTYPE-а и в резултат всичко се разбило по страницата 🙂

  2. Отговор April 21, 2012 / 10:12 Joro

    Мани, мани…
    Аз като гледам и как в едни от най-популярните серии от уроци пренебрегват поставянето на Doctype, направо ми прилошава.

  3. Отговор June 8, 2013 / 15:11 Боби

    Много полезна информация, благодаря!

Contact
captcha