Doctype HTML - що це? Що потрібно знати про елемент

Що б не говорили скептики, прогрес і раніше залишається явищем, зупинити яке неможливо. Однак, у той час як одні обурюються тривалим переїздом на місячні дачі, інші буквально занурюються в паніку, бо встигнути за змінами стає все складніше і складніше. Прикладом подібні «наздоганяючих» є представники професій, пов'язаних з високими технологіями.

У той час як більшість веб-дизайнерів, програмістів і верстальників набагато краще відповідають духу часу, ніж яка-небудь «баба Нюра», яка отримує інформацію з тижневим запізненням, та ще й зі значними спотвореннями, реальний стан речей виявляється трохи іншим. Відповідати рівню прогресу в сфері нових технологій досить складно. Розглянемо простий приклад: ще якихось 5-10 років тому розробник онлайн-ігор на Adobe Flash міг би досягти відчутного успіху, численні «Веселі фермери» є тому підтвердженням. Проте вже сьогодні дана технологія поступово відмирає, поступаючись місцем більш сучасному, але менш вивченому основним більшістю HTML5. До слова, саме HTML5 і є одним з «персонажів» нашої сьогоднішньої історії, присвяченій буднях HTML-верстальників.

doctype html

Doctype HTML - що це таке?

Це високотехнологічний пам'ятник жертвам прогресу технологій. Лихі 90-ті, які відзначилися не тільки «бойовий» обстановкою в нашій країні, а й цілком собі справжньою війною браузерів, принесли в світ відразу декілька продуктів, які дозволяли користувачам комп'ютерів борознити простори всесвітньої мережі. От тільки є одна заковика - популярні тоді Netscape Navigator і Internet Explorer дивилися на одні й ті ж сторінки зовсім по-різному, відповідно, і творці сайтів створювали абсолютно різні сторінки для даних програм.

Стандарти? У ті роки про них говорити було безглуздо - W3C існувала в зародковому стані, а просувала свій IE Microsoft взагалі славилася тим, що воліла винаходити свої власні, не сумісні ні з чим велосипеди. Проте до кінця того моторошного (для веб-розробників) десятиліття ситуація все-таки нормалізувалася: з'явилася якась подоба стандартів, які хай і не повністю, але все-таки дотримувалися всіма популярними браузерами.

Однак стан справ виявилося таким, що стандарти консорціуму і виробників браузерів виявилися, м'яко кажучи, не в усьому схожими. Ви цілком могли створити абсолютно правильну з точки зору HTML, CSS і DOM сторінку, але бажаний вами браузер вперто показував не те, що ви очікували побачити.

Проте час минав, розробники все-таки нарешті вирішили задуматися не тільки про конкурентній боротьбі, а й про веб-майстрів, і з'явився він - Doctype HTML. Це спеціальний тег, що розповідає браузеру про те, як саме слід розглядати ту чи іншу сторінку.

Для чого потрібен Doctype в HTML-коді?

До появи адекватних стандартів, яким почали слідувати повсюдно, багато розробників браузерів намагалися перетягнути ковдру на себе, створюючи власні методи підходу до тієї чи іншої технології. В результаті одна і та ж сторінка виглядала в різних браузерах по-різному. Втім, про це ми вже розповідали, от тільки не згадали про те, що, коли виробники програм для веб-серфінгу схаменулися, виникла інша, не менш цікава проблема.

Уявіть ситуацію: ви - типовий веб-розробник кінця 90-х років. Так вже вийшло, що більшу частину часу ви проводите в браузері Internet Explorer 4. Раптово Microsoft вирішує одуматися і робить свій новий браузер більш «правильним», в результаті чого стає не зовсім ясно, як тепер писати сайти і що робити з тими, які вже створені. Природно, якщо у вас є достатня кількість часу, ви могли б переписати свій HTML-код таким чином, щоб він відповідав новим стандартам, але ж люди - ліниві істоти.

Саме в цей момент Doctype HTML виявляється найбільш доречним «винаходом». Залежно від того, який саме тип документа вказано на початку сторінки, браузер буде вибирати найбільш підходящий для даного випадку механізм отрисовки. Якщо ж Doctype в HTML-коді відсутня, браузер піде в режим сумісності (Як правило, але зовсім не обов'язково). В результаті той же Internet Explorer 6 (нехай архів йому буде пухом) при відсутності тега Doctype поводиться так, немов ви працюєте в його четвертої версії.

doctype html що це

Види Doctype

Тег Doctype налічує кілька різновидів, які можна розділити на певні категорії. По-перше, він описує основні типи мови розмітки: HTML 4.01, HTML 5, XHTML 1.0 або XHTML 1.1. По-друге, кожен з цих мов має свої підрозділи, що вказують на «коефіцієнт прискіпливості», т. Е. На те, як жорстко слід HTML-код встановленим W3C стандартам. Правда, у другому випадку є два винятки - HTML5 і XHTML 1.1 не мають яких-небудь підвидів і мають тільки одну форму Doctype HTML. Але про це трохи пізніше ...

Строгий підхід: Doctype Strict

Якщо ви віддаєте перевагу створювати HTML-код, відповідний кожній букві закону валідатора, то додатковим стимулом (крім власної зацікавленості) може стати використання Doctype Strict. Якщо ж ви плануєте використовувати більш просунутий XHTML 1.0, то рядок, з якою буде починатися кожен елемент, повинна виглядати так:

Вибір суворого шаблону Doctype HTML Public гарантує, що будь-яке відхилення від стандарту буде помічено браузером, після чого неправильно використаний тег буде проігноровано. Зокрема, в суворому режимі будь тег, будь то форма, зображення або інший елемент, зобов'язані розташовуватися усередині блокових тегів. Якщо ви вирішите обійтися без цього, то браузер попросту не відобразить даний елемент, а список помилок верстки поповниться парочкою записів.

Крім того, цілий ряд тегів, що дозволяють форматувати текст, також бажано виключити - суворий режим увазі використання CSS.

Людяний підхід: Doctype Transitional

Якщо суворий метод строгого шаблону вам не підходить або ж ви просто звикли йти проти правил, завжди є можливість вдатися до більш гуманного типу Doctype HTML Public. W3C подбали про тих, хто не хоче відмовлятися від звичок і бажає працювати в більш м'яких умовах, створивши шаблон Transitional, що представляє перехідну модель підходу до валідації. Даний шаблон дає вам можливість безперешкодно дозволяти собі деякі вільності, наприклад, заборонені Strict-шаблоном теги, а також багато інших підходи до верстки, які не втратили актуальності з кінця 90-х років.

«М'який» Doctype HTML 4 оголошується наступним чином:

Для XHTML рядок знову виглядає дещо інакше, однак загальна тенденція зберігається:

На сьогоднішній день, незважаючи на те, що кожен верстальник прагне відповідати Strict-шаблоном, саме перехідний Doctype є найбільш популярним. Проте у даного шаблону є одне умовне обмеження: валідатор буде «бракувати» будь-які сторінки, в яких є фрейми. Якщо ж вам необхідно вдатися до даного методу верстки, варто звернути увагу на наступний - останній шаблон.

Від загального до конкретного: Doctype Frameset

Підхід при перевірці сторінки на відповідність шаблону Frameset в цілому аналогічний такому у Transitional, однак, крім перерахованих вище «вольностей», даний шаблон дає вам можливість використовувати фрейми. Інших відмінностей Frameset не має, тому залишається лише перерахувати рядки для оголошень, для HTML 4.01 і для XHTML 1.0:

XHTML Frameset

На вістрі прогресу

Природно, згадавши на початку цієї статті все набирає популярність стандарт HTML5, ми ніяк не могли обійти увагою і цю мову розмітки. Забавно, що W3C вважає дану версію HTML основний, тому її Doctype HTML 5 виглядає досить скромно. Іншими словами, дане визначення типу означає, що браузеру необхідно працювати з «чистим» HTML, яким і вважається сьогодні HTML5, в той час як звична для багатьох четверта версія вважається потенційно застарілою.

Інші різновиди Doctype

На сьогоднішній день існує ще кілька різновидів шаблонів Doctype, більша частина яких стосується XHTML. У той час як друга версія цієї мови розмітки так і не вийшла в світ, ставши частиною вищезгаданого HTML5, варіації її першої версії, незважаючи на не найвищу поширеність, живі й здорові.

doctype html 4

Так чи важливий Doctype?

Можливо, деякі початківці «письменники» на HTML будуть намагатися ігнорувати оголошення типу сторінки. Що ж, якщо вони не винесли важливої інформації з вишенапісанного, наведемо один простий приклад. Ось приклад сторінки, що використовує Transitional-шаблон:

Все виглядає так, як і повинно було виглядати за задумом дизайнера, однак варто нам «переплутати» Doctype, і ми отримуємо наступне:

Як бачите, сторінка зазнала значних змін: зник фоновий малюнок, меню перетворилося на понівечений список, деякі класи CSS попросту проігноровано, крім того, у сторінки «отрос» другий скроллбар.

Сподіваємося, цей приклад досить доступно пояснює всю важливість вишенапісанного, тому нам залишається лише зберігати пильність або, в ідеальному випадку, вчитися писати код, що проходить strict-валідацію. Успіхів вам!