HTML, HTML5 – в чому різниця?

37

Від автора: мова гіпертекстової розмітки або просто HTML – стандартна мова для створення сайтів. Як і все у світі технологій, HTML з моменту появи в кінці 1980-х дуже швидко розвивався. Новачкам в програмуванні слід вчити останню версію мови – HTML5. Однак глибоке розуміння еволюції мови допоможе новачкам і профі оцінити минуле, теперішнє і майбутнє веб-розробки.

HTML и HTML5 – в чем разница?

Основи HTML

HTML-код вказує браузеру, як рендери контент. Розмітка являє собою базову структуру сторінок. Протягом десятиліть HTML вважався наріжною технологією в інтернеті поряд з CSS і JS. Стандарти HTML і CSS регулюються консорціумом всесвітньої мережі.

З назви випливає, що HTML не є мовою програмування. Це мова розмітки, яка використовується для організації даних в інтернеті. HTML документи складаються з HTML елементів, представлених у вигляді тегів. Теги записують у кутових дужках і поділяють контент на категорії. Простий приклад HTML структури з повідомленням «Hello World» виглядає наступним чином:

Hello World

HTML документи завантажуються з сервера і кажуть браузеру, як відображати текст, посилання, зображення і інтерактивні форми.

Історія HTML

Нові версії HTML фокусувалися на підвищення доступності інтернет технологій, а не на рендерінгу старих версій. Наприклад, крім нових опцій щодо створення макетів в HTML4 покращився розміщення елементів для слабозорих користувачів.

Останнє велике оновлення з 1990-х було направлено на інтернаціоналізацію мови, а також на те, щоб спростити програмістів зі всього світу можливості для поліпшення HTML. Як частина цих зусиль, в якості офіційної кодування HTML була прийнята Універсальний Coded Character Set. Цей крок поліпшив відображення безлічі символів і акцентів, які є в людських мовах і діалектах.

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

HTML або HTML5: еволюція веб-розробки

Інтернет зараз сильно відрізняється від того, що був у 1999 році, коли вийшло останнє велике оновлення HTML 4.01. Зараз є такі технології, які ми не могли собі уявити на рубежі століть. Смартфони, планшети та інші мобільні пристрої – це нові виклики для інженерів і розробників ПО. Прискорюватися глобалізація зробила стандартизацію інтернет технологій пріоритетним завданням для всіх з часткою у світовій економіці. Світове споживання інтернету зростає рік за роком, і використовувані технології за прогнозами будуть розвиватися все швидше і швидше.

HTML и HTML5 – в чем разница?

Тому був реалізований HTML5, покликаний вирішити ці проблеми і надати більш плавний і послідовний досвід користувачам і розробникам.

HTML – плід спільних зусиль World Wide Web Consortium або W3C і Web Hypertext Application Technology Working Group або WHATWG. У 2006 організації об’єдналися, щоб знизити залежність від плагінів, поліпшити обробку помилок і замінити скрипти на розмітку. Як наслідок, HTML5 сильно спростив процес створення веб-додатків.

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

Поступове впровадження

HTML4 був стандартом протягом 15 років, тому багато розробники до цих пір їм користуються. Браузери ще довго будуть підтримувати цей стандарт. Старі браузери можуть «ігнорувати» новий код HTML5 при рендерінгу контенту. За фактом всі сучасні браузери добре підтримують HTML5 специфікацію: Chrome, Firefox, Opera і Safari. HTML5 постійно розвивається, тому браузери в нових версіях додають підтримку нових властивостей. На наше щастя, всі основні браузери одночасно додають підтримку нових властивостей, як тільки ті виходять.

Можете перевірити свій браузер на підтримку HTML5 з допомогою HTML5test.

HTML и HTML5 – в чем разница?

Здебільшого розробників не доведеться лагодити свої старі сайти. Однак якщо ви пов’язуєте своє майбутнє з створенням сайтів, вам слід дізнатися про переваги HTML5 перед HTML.

HTML або HTML5: що нового?

Якщо HTML влаштовував всіх більше десяти років, навіщо потрібно було оновлюватися в 2014? Найбільш значуща відмінність між старими версіями HTML, HTML5 полягає в інтеграції відео і аудіо в специфікації мови. Крім того, в HTML5 увійшли наступні оновлення:

були видалені застарілі елементи, такі як center, font й strike;

покращення правил парсинга зробило його більш гнучким і сумісним;

з’явилися нові елементи video, time, nav, section, progress, meter, aside і canvas;

нові атрибути для инпутов, у тому числі e-mail, URL, dates і times ;

нові атрибути, в тому числі charset, async і ping;

нові API з офлайн кешуванням і підтримкою drag-and-drop і т. д;

підтримка векторної графіки без сторонніх програм типу Silverlight або Flash;

підтримка MathML поліпшила відображення математичних позначень;

завдяки JS Web worker API, JS тепер може працювати у фоновому режимі;

глобальні атрибути типу tabindex, repeat та id тепер можна застосовувати до всіх елементів.

На зображенні нижче показані основні властивості HTML5, розбиті за категоріями.

HTML и HTML5 – в чем разница?

Які переваги для користувачів є в HTML5 порівняно з HTML?

Ми розібралися з технічною стороною питання, а які переваги несе HTML5 для звичайних користувачів? Нижче я склав список цих нововведень, які ви могли помітити або не помітити:

частина даних можна зберігати на пристрої користувача, тобто додатки можуть працювати без інтернет-з’єднання;

веб-сторінки можуть відображати більше шрифтів з більш широким діапазоном кольорів, тіней та інших ефектів;

об’єкти на сторінці можуть рухатися разом з курсором;

інтерактивні медіа типу ігор можна запускати прямо в браузерах без підключення додаткового або плагінів. Для аудіо та відео тепер не потрібні плагіни;

браузери можуть відображати інтерактивну 3D графіку з допомогою графічного процесора комп’ютера.

Відкинувши необхідність в інших плагінах, HTML5 прискорює доставку більш динамічного контенту.

Які переваги для веб-розробників є в HTML5 порівняно з HTML?

Основний упор в HTML5 робився на те, щоб дати розробникам більше гнучкості, що в свою чергу повинно було привести до більш захоплюючого користувача досвіду. HTML5 задумували заради кількох цілей:

1. Однакова обробка помилок

У всіх браузерах є парсери для обробки синтаксичних і структурних помилок в HTML коді. До недавнього часу стандарти цього процесу ніде не були прописані.

Тому розробникам браузерів довелося тестувати HTML документи з помилками в інших браузерах, щоб шляхом зворотного інжинірингу створити процес обробки помилок.

В житті HTML помилки неминучі. За даними Rebuildingtheweb в 90% сторінок присутні помилки в коді. Обробник помилок просто необхідний для правильного відображення сайтів. Як наслідок, закодована обробка помилок економить розробникам браузерів багато часу і грошей. Не можна занижувати переваги чітко заданого алгоритму парсингу.

2. Покращена підтримка властивостей для веб-додатків

Іншою метою HTML5 було змусити браузери працювати, як платформи додатків. Сайти стали набагато складніше, тому розробники навчилися обходити розширення браузерів і інші серверні технології. HTML5 дозволяє контролювати продуктивність сайту. Безліч хаків на Flash і JS, використовуваних в HTML4, увійшли в нову специфікацію мови. Ці зміни забезпечують більш плавний і швидкий користувальницький досвід.

3. Удосконалена семантика елементів

Семантичні ролі деяких існуючих елементів покращилися, що зробило код більш інтуїтивним. Нові елементи section, header, article і nav можуть замінити більшу частину тегів div, які ускладнюють процес пошуку помилок.

4. Максимальна підтримка мобільних пристроїв

Мобільні пристрої – суцільний головний біль для веб-розробників. Їх швидке поширення за останні десять років змусило поліпшити HTML стандарти. Користувачі хочуть відкривати веб-додатки звідки завгодно в будь-який час і на будь-якому пристрої. Розробники були змушені підкоритися вимогам ринку. HTML5 спрощує мобільний підтримку, так як він заточений під смартфони та планшети.

Інші помітні поліпшення

З запуску HTML5 минуло кілька років, і кілька великих компаній перевели свої сайти на новий стандарт. Безліч розробників діляться своїми думками про HTML і HTML5. Найбільш згадувані особливості:

1. Підтримка користувальницьких data-атрибутів

До виходу HTML5 додавати теги атрибути було ризиковано. В HTML4 атрибути не заважали повного рендерингу сторінок, але документи з ними не проходили валідацію, що призводило до рендерингу в режимі сумісності. Атрибут data-* вирішив цю проблему.

Атрибут data-* можна використовувати по-різному, але його основне завдання – зберігати додаткову інформацію про елементи. Дані зберігаються у вигляді простої рядка. Користувальницькі дані дозволили розробникам створювати більш захоплюючі сторінки без підключення Ajax і серверних технологій.

2. Більше ніяких кук

Про це вже говорилося, але підтримка локального зберігання даних по-справжньому перевернула розробку. До HTML5 надійно зберігати інформацію про стан можна було тільки за допомогою кук. Куки здатні зберігати обмежений обсяг даних, а деякі користувачі за замовчуванням відключають їх. HTML5 об’єкт localStorage дозволяє обдурити натуру HTTP протоколу, не підтримує стану.

Об’єкт localStorage належить до глобального простору імен window, тобто він доступний з будь-якої точки скрипта. В локальне сховище можна поміщати лише рядки, проте з допомогою методів JSON.stringify() і JSON.parse() можна з легкістю поміщати туди все нові дані. Є й інший об’єкт sessionStorage, що дозволяє зберігати дані до тих пір, поки користувач не закрив вікно браузера.

3. Автофокус на полях форми

Атрибут автофокуса дозволяє розробникам вказати поле, яке отримає фокус після завантаження сторінки. В одному документі можна вказати атрибут autofocus тільки для одного елемента, користувач може переписувати значення, вибираючи інше поле. Наприклад, якщо додати атрибут autofocus до поля Last Name, як показано на скріншоті нижче, то після завантаження сторінки поле Last Name автоматично підсвічує.

HTML и HTML5 – в чем разница?

4. У тегах script and link більше не потрібно вказати атрибут type

В HTML5 мається на увазі, що теги script і link посилаються на скрипти і стилі, то є необхідність у використанні атрибута type відпала.

Майбутнє HTML, HTML5

Нове покоління розробників без сумнівів знайде нові переваги в HTML5, а соціальні мережі допоможуть розвитку мови. W3C анонсували, що в майбутніх оновленнях HTML5 пріоритет буде відданий основ додатків, таким як інструменти конфіденційності. Основний упор в HTML5 робився на визначення надійних сумісних властивостей, тому ненадійні підуть вже в HTML 5.1. Одним з найбільш суперечливих пропозицій було включення інструментів управління цифровими правами.

На початок 2017 року веб-розробники можуть обійтися хорошим знанням старих HTML специфікацій. Однак якщо ви хочете продовжувати свою кар’єру і не хочете вивчати HTML5, ви зробите собі тільки гірше. Чого тільки коштує вбудована підтримка відео і аудіо порівняно з 4.1.