Що таке HTML5 – Відмінності Між HTML та HTML5
Люди, погано знайомі зі сферою веб-дизайну, часто чують слово «розмітка» і запитують, що воно означає і як відрізняється від більш широко відомого терміну «код». В основному мова розмітки призначена для обробки, визначення та подання інформації про текст; Теги стилів та текстові анотації записуються у файлах стилів, щоб спростити роботу з текстом для комп'ютера.
Історично склалося, що термін «розмітка» походить від англійської marking-up , а сам процес від manuscript marking-up — процесу розмітки рукопису перед віддачею його до друку. Тут мова піде про мову розмітки, що найчастіше використовується — HTML. Декілька років тому для цієї мови було випущено оновлення під назвою HTML5. У цій статті ми розповімо, що таке HTML5 і розповімо про відмінності між HTML та HTML5.
Що таке HTML?
HTML можна назвати основною мовою Всесвітньої павутини. Більшість веб-сторінок, розміщених в Інтернеті, написано в будь-якій варіації HTML. За допомогою нього розробники визначають те, як мультимедіа, текст чи гіперпосилання відображатимуться серед іншого контенту у браузері. Починаючи від елементів, які встановлюють зв'язки з вашим документом (гіпертекстом), до елементів, які роблять ці документи інтерактивними (наприклад форми), все це є складовими частинами HTML.
Стандарт HTML був розроблений W3C або Консорціумом Всесвітньої Павутини у 1997 році. У HTML визначення структури тексту використовуються теги; теги та елементи виділяються за допомогою символів < і >. Ось лише деякі з прикладів для згаданих раніше тегів — це заголовки, таблиці, абзаци і т. д. У свою чергу, браузери відповідають за візуалізацію вмісту сторінки за допомогою цих тегів. HTML не був єдиним стандартом веб-розробки. У перші дні розвитку Інтернету всі теги контенту та стилі були присутніми однією гігантською, громіздкою (і досить складною) мовою. З часом W3C дійшла рішення про необхідність поділу контенту та стилю сторінки; Це спричинило створення таблиць стилів або CSS. В даний час теги, які використовуються для визначення стилю тексту (наприклад, FONT), небажані і майже не використовуються,
З часом HTML було багато оновлень, і в даний час його новітньою версією є HTML5. HTML5, звичайно, перш за все є мовою розмітки, але він придбав безліч функцій на відміну від HTML і усунув деякі з строгостей, що були присутні в XHTML. Хоча HTML5 оновлюється практично щодня, проте нових випущених пронумерованих випусків немає. Основною відмінністю між HTML і HTML5 може стати те, що ні аудіо, ні відео не є складовою HTML, тоді як вони обидва можуть розглядатися як невід'ємні частини HTML5.
Які основні відмінності між HTML і HTML5
Єдиною постійною річчю в галузі інформаційних технологій є те, що періодичні оновлення та зміни неминучі. Жодна мова не може уникнути оновлень або нових випусків. HTML не є винятком. HTML5 був випущений з метою покращення роботи Всесвітньої павутини як для розробників, так і для звичайних користувачів. Як уже згадувалося, найбільшою перевагою, яка має HTML5 над своїм ненумерованим попередником, є те, що він має підтримку аудіо та відео високого рівня, яка не була частиною специфікації в попередніх HTML. Інші відмінності між HTML та HTML5:
- SVG, canvas та інша віртуальна векторна графіка підтримуються в HTML5, тоді як HTML використання векторної графіки стало можливим тільки при використанні його в поєднанні з різними технологіями, такими як Flash, VML, Silver-light і т.д.
- HTML5 використовує бази даних SQL і кеш додатків для тимчасового зберігання даних, тоді як HTML для цього використовується тільки кеш браузера.
- Ще одна відмінність між HTML і HTML5, про яку варто згадати: перший не дозволяє запуск JavaScript у коді (замість цього він працює в потоці інтерфейсу браузера), тоді як останній забезпечує повну підтримку JavaScript для запуску у фоновому режимі.
- HTML5 не заснований на SGML, і це дозволяє йому мати покращені правила синтаксичного аналізу, які забезпечують покращену сумісність.
- У HTML5, у тексті можуть використовуватися вбудовані MathML і SVG, тоді як це неможливо в HTML.
- Деякі з застарілих елементів були повністю видалені: єindex, noframes, acronym, applet, basefont, dir, font, frame, frameset, big, center, strike, tt.
- HTML5 підтримує нові види елементів управління, наприклад, dates and times, email, number, range, tel, url, search і т.д.
- У HTML з'явилося багато нових елементів. Ось деякі з найважливіших: summary, time, aside, audio, command, data, datalist, details, embed, wbr, figcaption, figure, footer, header, article, hgroup, bdi, canvas, keygen, mark, meter, nav, output, прогрес, rp, rt, ruby, section, source, track, video.
Основні переваги HTML5 для розробників
HTML5 надає для розробників більше гнучкості при розробці дизайну сайтів, і в цій сфері є значні покращення, про які варто згадати:
1. Постійна обробка помилок:
Більшість браузерів підтримують парсинг структурно або синтаксично неправильного HTML-коду, але донедавна для цього не було стандартного процесу. Це означає, що розробникам нових браузерів необхідно проводити тести неправильних HTML документів для створення покращеного процесу обробки помилок. Постійна обробка помилок у HTML5 зіграла у процесі великого значення.
Покращені алгоритми парсингу, які використовуються в HTML5, мають неоціненні переваги. Дослідження показують, що близько 90% сайтів можуть містити некоректно написаний код, тому дуже важливо опрацьовувати ці помилки. Крім того, властива HTML5 обробка помилок зберігає розробникам багато грошей і багато часу.
2. Поліпшена семантика для елементів:
Для спрощення та поліпшення розуміння коду було внесено покращення в семантичні ролі різних існуючих елементів. Section, article, nav і header - це нові елементи, які замінили більшість із нині застарілих div елементів. Це зробило процес обробки помилок менш складним.
3. Розширена підтримка функцій веб-застосунків:
Однією з головних цілей HTML5 було створення можливості функціонування браузерів як платформа для додатків. Веб-сайти в минулому були набагато менш складними, але згодом громіздкість зростала. HTML5 надає розробникам розширений контроль за продуктивністю своїх сайтів. Раніше розробникам доводилося використовувати обхідні шляхи, оскільки багато серверних технологій і браузерних розширень були відсутні. Тепер, при використанні HTML5 немає сенсу використовувати будь-які JS або Flash розширення (як це було в HTML4), оскільки HTML5 присутні елементи, які забезпечують всі ці функції.
4. Створення мобільних сайтів стало простіше:
Навіть сьогодні створення мобільної версії сайту, це головний біль для розробника. Збільшення популярності смартфонів в останні десятиліття створило необхідність покращення стандартів HTML. Сьогодні користувачі хочуть мати доступ до веб-ресурсів у будь-який час та за допомогою будь-якого пристрою, що накладає певні зобов'язання на розробників. HTML5 зробив у цьому плані значні поліпшення завдяки тому, що код HTML5 тепер краще підтримується малопотужними електронними пристроями, такими як смартфони та планшети.
Однією з особливостей, що обговорюються HTML5 є елемент <canvas>. Використання цього унікального тега справило величезний вплив на Adobe Flash. Незважаючи на те, що багато сайтів досі використовують Flash, все більше людей схиляються до використання HTML5, тому є підстави вважати, що Flash в найближчому майбутньому повністю застаріє.
Використовуючи елемент canvas, розробники можуть малювати за допомогою скриптів (наприклад JavaScript) графічні зображення із застосуванням різних кольорів. Варто згадати, що canvas це звичайний графічний контейнер і для показу зображення необхідне виконання скрипту. Ось приклад використання JavaScript у поєднанні з canvas:
<canvas id="TestCanvas" width="200" height="100"></canvas>
var c = document.getElementById("TestCanvas");
var context = c.getContext(“2d”);
context.fillStyle = "#FF0000";
context.fillRect(0,0,140,75);Нещодавно додані елементи <menu> та <menuitem> є складовими частинами інтерактивних елементів, однак вони не дуже популярні у спільноті розробників. Незважаючи на це, ці два елементи можуть бути використані для кращої інтерактивності на сторінці.
Тег <menu> використовується для простоти надання команд меню на мобільних додатках та додатках робочого столу. Тут показано можливе застосування тега <menu>:
<body contextmenu=”new-menu”> <menu id="new-menu" type="context"> <menuitem>Hello!</menuitem> </menu> </body
Додавання атрибутів користувача було можливе і до появи HTML5, але воно було пов'язане з певним ризиком, наприклад, в HTML4 атрибути користувача могли призводити до зупинки рендеру сторінки або що ще гірше, могли стати причиною неправильної роботи документа. Атрибут data-* в HTML5 поставив крапку у вирішенні цієї часто зустрічається проблеми. Цей атрибут має кілька призначень, але основною метою його введення було збереження додаткової інформації різних елементів. Тепер, завдяки цьому атрибуту можуть бути включені дані користувача, що дає розробникам більше можливостей зробити привабливі та ефективні сторінки, без зайвих запитів на сервер або викликів Ajax.
8. (Можливе) прощання з Cookies:
Підтримка локального сховища стала важливим доповненням до HTML5. До появи HTML5, якщо розробники хотіли що-небудь зберігати на стороні користувача, їм доводилося використовувати файли cookie. Однак файли cookie можуть містити лише невеликий обсяг даних (не кажучи вже про те, що їх ненавидять), це додало додавання об'єкта localStorage в HTML5 ще більше переваг. Об'єкт localStorage є частиною глобального простору імен і під час використання скриптів може бути доступний будь-якого місця.
Переваги HTML5 для звичайного користувача
HTML5 призвів до зрушення усталеної моделі програмування як розробників, так звичайних користувачів. Наведемо приклади кількох переваг для звичайних користувачів:
- Мобільні браузери тепер працюють стабільніше, ніж стандартні програми. До появи HTML5 ситуація була іншою.
- Сьогодні ставка на адаптивні сайти (дружні до мобільних пристроїв) дуже висока, оскільки майже 30 відсотків користувачів мобільних пристроїв не хочуть завантажувати спеціальні програми. Це стало ще однією перевагою HTML5, наприклад, якщо користувач хоче використовувати послуги компанії, але не хоче завантажувати спеціальну програму, він може просто зайти на сайт компанії, щоб зробити це.
- Викорінення необхідності використання Adobe Flash дозволяє розробникам забезпечити більш естетичний інтерфейс користувача. Використання JavaScript та MPEG4 у поєднанні з HTML5 зробило життя користувачів набагато кращим.
- Можливість підтримки власних аудіо та відео елементів означає, що користувачам не доведеться завантажувати додаткові плагіни для перегляду мультимедіа на вашому сайті. Підтримка мультимедіа, що надається HTML5, є однією з найважливіших причин, з якої він використовується набагато частіше, ніж HTML.
Висновок
Навряд чи нова версія будь-якої мови може бути гіршою за попередника і HTML5 не є винятком. З кожним роком розробники дізнаються про нові способи використання HTML5. Крім того, очікується, що найближчим часом зміна торкнеться і соціальних мереж.
Незважаючи на те, що хвиля змін вже наздогнала багатьох розробників по всьому світу, очікується, що найближчими роками HTML5 ще більше розширить свій вплив. Дуже важливо адаптуватися і дізнатися, що таке HTML5 зараз, щоб максимально використовувати можливості сучасних браузерів.