Doctype html - що це? Що потрібно знати про елемент
Відео: Doctype HTML 5 що це і навіщо треба?
Що б не говорили скептики, прогрес як і раніше залишається явищем, зупинити яке неможливо. Однак, в той час як одні обурюються тривалим переїздом на місячні дачі, інші буквально занурюються в паніку, бо встигнути за змінами стає все складніше і складніше. Прикладом подібні «наздоганяючих» є представники професій, пов`язаних з високими технологіями.
У той час як більшість веб-дизайнерів, програмістів і верстальників набагато краще відповідають духу часу, ніж яка-небудь «баба Нюра», яка отримує інформацію з тижневим запізненням, та ще й зі значними спотвореннями, реальний стан речей виявляється дещо іншим. Відповідати рівню прогресу в сфері нових технологій досить складно. Розглянемо простий приклад: ще якихось 5-10 років тому розробник онлайн-ігор на Adobe Flash міг би досягти відчутного успіху, численні «Веселі фермери» є тому підтвердженням. Однак уже сьогодні дана технологія поступово відмирає, поступаючись місцем більш сучасному, але менш вивченого основним більшістю HTML5. До слова, саме HTML5 і є одним з «персонажів» нашої сьогоднішньої історії, присвяченій буднях 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 поводиться так, немов ви працюєте в його четвертої версії.
Відео: 2 Що таке 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:
На вістрі прогресу
Природно, згадавши на початку даної статті все набирає популярність стандарт HTML5, ми ніяк не могли обійти увагою і цю мову розмітки. Забавно, що W3C вважає дану версію HTML основний, тому її Doctype HTML 5 виглядає досить скромно. Іншими словами, дане визначення типу означає, що браузеру необхідно працювати з «чистим» HTML, яким і вважається сьогодні HTML5, в той час як звична для багатьох четверта версія вважається потенційно застарілою.
Інші різновиди Doctype
На сьогоднішній день існує ще кілька різновидів шаблонів Doctype, велика частина яких стосується XHTML. У той час як друга версія цієї мови розмітки так і не вийшла в світ, ставши частиною вищезгаданого HTML5, варіації її першої версії, незважаючи на не найвищу поширеність, живі й здорові.
Так чи важливий Doctype?
Можливо, деякі початківці «письменники» на HTML намагатимуться ігнорувати оголошення типу сторінки. Що ж, якщо вони не винесли важливої інформації з вишенапісанного, наведемо один простий приклад. Ось приклад сторінки, що використовує Transitional-шаблон:
Все виглядає так, як і повинно було виглядати за задумом дизайнера, однак варто нам «переплутати» Doctype, і ми отримуємо наступне:
Як бачите, сторінка зазнала значних змін: зник фоновий малюнок, меню перетворилося в понівечений список, деякі класи CSS просто проігноровані, крім того, у сторінки «отрос» другий скроллбар.
Сподіваємося, даний приклад досить доступно пояснює всю важливість вишенапісанного, тому нам залишається лише зберігати пильність або, в ідеальному випадку, вчитися писати код, який проходить strict-валідацію. Успіхів вам!
