Як працює HTML5

# Чому HTML5 змінив все для веб-розробниківТім Бернерс-Лі не ставив собі за мету створити сучасний веб. У 1989 році він створив мову гіпертекстової розмітки (HTML) як простий спосіб кодування електронних документів. Перші браузери були лише читачами для таких файлів. Минуло двадцять років, і цей браузер перетворився на портал у цілий всесвіт медіа. Саме це зрушення означає, що HTML5 – це не просто чергове оновлення версії. Це всеосяжний стандарт, який визначає, як працюють веб-сторінки.Щоб зрозуміти, чому це важливо, потрібно повернутись до хаосу 1994 року. HTML все ще перебував на стадії першої редакції. Mosaic та Netscape боролися за домінування. Більшість людей навіть не чули про Всесвітнє павутиння. У тому ж році Бернерс-Лі допоміг створити Консорціум Всесвітньої мережі (W3C) для встановлення стандартів.Сьогодні це шановний авторитет? Безперечно. У 90-ті? Ігнорувався значною мірою.Комерційні гравці прокладали свої шляхи. До 1995 W3C опублікував другу редакцію HTML. Microsoft вийшла на ринок із Internet Explorer. IE мало дбав про дотримання стандартів. Netscape виборювала збереження своєї частки ринку, тоді як браузер Microsoft поглинав її.Веб-розробники жили в пеклі під час ранніх «браузерних воєн». Їм доводилося підтримувати сумісність сайтів із кожним новим випуском основних браузерів, а також з нішевими гравцями, такими як Opera та Apple Safari. W3C випустила HTML 3.2 у 1997 році та HTML 4 у 1998 році. Дотримання стандартів здавалося менш важливим, ніж гонитва за специфічними функціями браузерів. Ця фрагментація тривала до 2003 року.Потім з’явилася Mozilla.Спільнота, рухома Mozilla Foundation, випустила оригінальний браузер Mozilla, за яким у 2004 році пішов Firefox. Firefox зменшив домінування IE. Що важливо, Mozilla дійсно дотримувалася стандартів W3C, роблячи це. Але поки що Firefox розвивався на застарілому стандарті HTML 4, Mozilla знала, що щось зламано.У 2004 році Mozilla об’єднала зусилля з Apple та Opera. Вони утворили Робочу групу з технологій веб-гіпертекстових додатків (WHATWG). Їхня мета була простою: зберегти життя розробці HTML. W3C спочатку вагалася. Вони приєдналися до відродження у 2006 році. Разом вони об’єднали існуючі специфікації HTML та XHTML. Вони розробили їх у нову специфікацію HTML5. В даний час W3C підтримує та публікує її.## Що таке HTML5 насправдіДавайте прояснимо поширену точку зору, перш ніж заглиблюватися. Існує нова версія мови розмітки під назвою HTML5. Але ця мова — лише частина ширшого стандарту, який має те саме ім’я. Коли ми говоримо про HTML5, ми говоримо про всю упаковку загалом.Сам собою HTML фокусується на статичних документах. Подумайте про текст та посилання. У рамках HTML 4 стандарт був просто синтаксисом для цього. У HTML5 набагато амбітніша мета. Він описує контент, стилізацію та інтерфейси додатків за веб-сторінкою під час її завантаження у браузері. Більш конкретно, він встановлює єдиний синтаксис для взаємодії з кожним елементом, завантаженим на згадку про ваш комп’ютер.То як браузер розуміє, який стандарт використовувати? Просто. Доки браузер підтримує HTML5, він обробляє все. Йому не потрібно розрізняти редакцію. Якщо браузер поновлено, він читає сторінку.Магія відбувається тому, що HTML5 інтегрує нові версії кількох технологій, що працюють разом. Цілі конкретні:- Зробити мову простою та інтуїтивно зрозумілою
– Забезпечити, щоб код було легко читати та підтримувати
– Розглядати сторінки як інтерактивні програми, а не статичні документи
– Покладатися на каскадні таблиці стилів (CSS) для стилізації
– Визнавати JavaScript центральним компонентом скриптів
– Прийняти динамічний контент від серверних технологій, таких як PHP та ASPЦе не просто розмітка. Це екосистема.### Двигун за екраномHTML немає у вакуумі. Він спирається на модель, яка вказує браузеру, що означають ці теги. Ця модель – Об’єктна модель документа (DOM). Вона вбудована безпосередньо у програму веб-браузера. Це означає, що мова розмітки по суті є набором інструкцій, заснованих на структурі, яку браузер вже вміє читати.Представте DOM як коробку з штампами. Кожен штамп є окремим елементом. Коли ви пишете HTML-сторінку, ви просто притискаєте ці штампи до сторінки, заповнюючи відбитки власним контентом. Браузер відображає все, що ви створили за допомогою штампів із цієї коробки.Технічно DOM є інтерфейс прикладного програмування (API). Він забезпечує платформно-незалежний спосіб обробки HTML чи XML-документів. XML виглядає як HTML, але дозволяє програмістам визначати власні елементи користувача. Стандарт HTML5 вимагає конкретної версії: HTML DOM5. Сучасні версії Chrome, Firefox, Internet Explorer, Safari та Opera підтримують сторінки, оброблені відповідно до DOM5 HTML.### Типи MIME мають значенняЩе одним стовпом HTML5 є його типи MIME (Multipurpose Internet Mail Extensions). Інженерна група з інтернет-протоколів (IETF) стандартизувала MIME для оповіщення програмного забезпечення про тип контенту, що обробляється. Зазвичай це відповідає певному типу файлу, наприклад HTML-документу або аудіофайлу MP3.Веб-розробники вказують ці типи MIME під час кодування сторінки. Це змушує браузер правильно завантажувати файли залежно від їхнього типу. Два типи MIME разом з DOM5 HTML складають основу стандарту HTML5: тип MIME для HTML (text/html) і тип MIME для XML (application/xhtml+xml). HTML5 оновлює синтаксис обох.Коротше кажучи, фундаментальними технологіями стандарту HTML5 є DOM5 HTML та сумісні з HTML5 типи MIME для HTML та XML. Далі давайте перейдемо до того, як зібрати веб-сторінку за допомогою HTML5.# HTML5: Глибоке занурення. Семантична структура, форми та медіаМожна розглядати HTML5 як базову версію HTML 5. Приклад коду на бічній панелі ілюструє базову структуру сторінки. Якщо ви хочете побачити вихідний код будь-якого сайту, просто скористайтеся функцією “Перегляд коду сторінки” (View Source) у вашому браузері. Весь цей зразковий код також сумісний із стандартами HTML 4, що означає, що він насправді не використовує жодних нових функцій HTML5.Початок файлу з **оголошення типу документа** (document type declaration) є стандартною практикою, навіть якщо не всі сайти це роблять. Воно повідомляє браузеру, що слід очікувати стандартного HTML. Деякі розробники використовують файли **DTD** (Document Type Definition) для вказівки розширень. Якщо це роблять, розташування DTD вбудовується в рядок doctype. Решта коду є стандартним синтаксисом. Якщо це здається вам незнайомим, ознайомтесь із нашим посібником про те, як працюють веб-сторінки.## Що нового в HTML5?Тут ми розглядаємо чотири великі зміни. Це не просто дрібні коригування; вони змінюють те, як ви створюєте контент та взаємодієте з ним.* **Нові елементи форм** для кращої структури та обробки введення.
* **Семантичні елементи**, що визначають контент щодо його ролі на сторінці.
* **Медіа-елементи** для аудіо та відео без необхідності використання плагінів браузера.
* **Елементи Ruby** для підтримки інтернаціоналізації азіатських мов.### Модернізація веб-формФорми існують з ранніх днів HTML. Це поля, де користувачі вводять імена, адреси та паролі. Але довгий час вони були незручними. Розробникам доводилося покладатися на інше програмне забезпечення, щоб зробити їх зручними. Здавалося, що HTML-форми вже застаріли.HTML5 змінив це. Він повернув життя у форми за допомогою нових типів введення та атрибутів. Вам не потрібно розрізняти старий та новий синтаксис під час їх створення. Просто дотримуйтесь робочого процесу.Почніть з тегів
, щоб створити блок. Всередині них використовуйте теги ‘
‘ для угруповання пов’язаних полів. Кожне поле повинне мати тег “. Використовуйте атрибут `for`, щоб зв’язати позначку з ідентифікатором введення. Це так: “.Всередині цієї мітки помістіть текст, який бачить користувач, за яким слідує тег “ для фактичного введення даних.Магія відбувається з атрибутом `type`. Коли ви вказуєте тип, браузер автоматично перевіряє дані. Вам не потрібні додаткові скрипти для перевірки правильності даних. HTML5 підтримує такі типи, як:* date (дата)
* time (час)
* datetime (дата та час)
* datetime-local (локальна дата та час)
* month (місяць)
* week (тиждень)
* number (число)
* e-mail (електронна пошта)
* tel (телефон)
* url (URL-адреса)
* range (діапазон)
* color (колір)
* search (пошук)Ви також можете використовувати атрибут `pattern` з регулярним виразом для створення правил перевірки.Потрібно змусити користувача заповнити поле? Додати атрибут `required`. Хочете, щоб курсор одразу переходив до певного поля? Використовуйте `autofocus`. Якщо ви хочете підказати користувачеві, що саме потрібно ввести, використовуйте `placeholder`.Порада професіонала: Стилізуйте псевдокласи CSS `: required` і `: invalid`. Це дає користувачам візуальну підказку, коли вони пропустили поле або ввели дані у неправильному форматі.### Підтримка браузерами та тестуванняПеревірте актуальний довідковий посібник з HTML5, щоб отримати повний список. Але не припускайте просто так, що все працює скрізь. Підтримка деяких полів форм різниться у різних браузерах. Вам необхідно тестувати свої форми у всіх типах браузерів, які ви маєте намір підтримувати.Форми HTML5 більш функціональні, ніж раніше, але наступний набір елементів є новим для стандарту.# Семантичні теги HTML5: Посібник розробника з осмисленої структуриЗвичайні ‘div’-елементи пішли у минуле. Принаймні таке враження складається при погляді на сучасний код HTML5. Протягом багатьох років розробники збирали макети за допомогою тегів