Що таке HTML5?

25

Від автора: привіт друзі! У даній статті я хочу розповісти вам трохи про html5. Розповісти, що таке html5, що в ньому нового. Які нові можливості він надає розробникам. HTML5 дуже широке поняття. І деякі технології, які називають в HTML5, взагалі кажучи, не є html5, але про все по порядку…

Що таке HTML5?

Перше — це стандарт HTML5, документ, що лежить на сайті W3C, в якому описані всі нові теги, атрибути, нові API, і ряд супутніх документів, які винесені деякі додаткові деталі, на зразок API для Canvas.

Що таке HTML5?

Друге — це «великий», маркетинговий, трендовий HTML5, парасолька для цілого покоління нових технологій, що включає як безпосередньо специфікацію HTML5, так і безліч модулів CSS3, різні API для JavaScript, та й сам новий стандарт для JavaScript — ECMAScript5.

Розглянемо деякі ключові особливості html5:

Він більш простий, більш проста структура елементів на сторінці, що спрощує створення і налагодження коду.

Він надає стандартні елементи для медіа об’єктів, які раніше вимагали встановлення окремих плагінів, які доводилося постійно оновлювати.

У ньому є своя інтеграція з інтерфейсами, які можуть знадобитися в сучасних додатках. Як приклад можна привести геолокацію, яка дозволяє браузеру визначити місцезнаходження користувача (його координати). Раніше це можна було зробити тільки через GPS.

Що дає HTML5?

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

Також html5 робить зручною роботу в мережі і для звичайних користувачів. Наприклад, збільшується швидкість роботи, використання браузера стає більш зручним. Для того, щоб дивитися ролики з youtube не потрібно встановлювати додаткові плагіни і постійно оновлювати їх.

Цілі HTML5

Коротко мети html5 можна назвати так:

Ліквідація плагінів, таких як Flash, для загальних функцій, які необхідні кожному. Побудувати власну підтримку для таких речей, як аудіо, відео і т. д.

Зниження потреби в JavaScript і додатковому коді, завдяки використанню нових html5 елементів.

Забезпечення узгодженості між браузерами і пристроями.

Зробити все це настільки прозорим, наскільки це можливо.

Нові можливості HTML5

Що таке HTML5?

Нових функціональних можливостей html5 дуже багато. Сьогодні навіть самі останні версії сучасних браузерів підтримують повністю всі функції html5. Тому в даній статті ми розглянемо лише основні можливості html5.

Нові елементи html5

Нові елементи html5 дозволяють швидше створювати розмітку сторінки, вона стає простіше, більш зрозуміла і спрощується процес налагодження. Ось деякі нові теги:

і

для будь-яких видів меню

для сайдбаров або зв’язкового вмісту

для статей

практично те ж, що й div

теги дозволяють програвати відео без плагінів

для малювання на сторінці використовую javascript

для вставки зовнішнього контенту на сторінку

Поряд з тим, що з’явилися нові теги частина існуючих тегів в HTML5 набуває нового значення. Так, якщо раніше вибір між i і em (аналогічно b і strong) був частіше на користь більш короткого написання, то сьогодні це теги з різним смисловим навантаженням, навіть якщо вони мають однакове уявлення курсивом або жирним шрифтом.

Що таке HTML5?

Інша частина нововведень стосується безпосередньо питань доступності: тут, насамперед, йдеться про aria — і role-атрибути, що дозволяють розмітити призначення і ролі контенту. Ця інформація згодом, приміром, може використовуватися програмами для читання з екрану (screen reader).

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

Ще однією перевагою html5 є наявність в ньому просунутих функцій, включаючи інтеграцію API. Це спрощує написання кроссбраузерного коду на javascript для складних додатків. Ось деякі з них:

Audio and video дозволяє програвати відео в браузері без плагінів.

Geolocation: визначає положення відвідувача.

Drag and drop: наприклад, для завантаження файлу, перетягнувши її в браузер.

Application cache: забезпечує підтримку відкриття сайтів offline.

Web workers: запускає JavaScript у фоновому режимі

Server-sent events: дозволяє серверам оновлювати веб-сторінки в браузері після того, як вони вже були завантажені, простіше і ефективніше, ніж AJAX і JavaScript.

Offline data storage: дозволяє зберігати дані локально в браузері, незалежно від cookies

Приклади використання html5

Давайте подивимося на html5 в дії! HTML5 дозволяє створювати нову, більш просту і чисту розмітку для сторінок. Код стає більш контентоориентированным і його простіше читати і розуміти. Ось приклад простий веб-сторінок на html5:

Page Title

  • Nav Link 1
  • Nav Link 2
  • Nav Link 3

Article Header

Etiam pretium odio eu mi convallis vitae varius neque pharetra. Nulla vestibulum nisi ut sem cursus sed mattis nisi egestas.

Article Subhead

Vestibulum lacus erat, volutpat vel dignissim at, fringilla ut felis.

Sidebar Content

© Copyright Your Name Here 2014. All Rights Reserved.

Далі розглянемо приклад використання відео:

Що таке HTML5?

Зліва на зображенні показаний код, а праворуч результат роботи цього коду — відеоплеєр

Дуже багато нових можливостей по роботі з формами з’явилося в html5. З’явилися нові типи тегів input. Нові типи покликані спростити введення даних у поля форми з мобільних пристроїв. Наприклад, якщо ми зробить input з типом email:

на десктопі ми різниці з типами text не побачимо, але коли будемо вводити дані в полі email зі смартфона, відкриється спеціальна клавіатура з символом «@».

Ось ще приклад нового типу input:

Що таке HTML5?

І наостанок ще один приклад — це йдуть годинник. Створені теж тільки на html5.

Що таке HTML5?

Висновок

HTML5 робить більш комфортним використання інтернету для звичайних користувачів. Також HTML5 — це об’ємна потужна технологія, яка робить розробку більш зручним і приємним заняттям. Він настільки величезний, що в одній статті навіть не перелічиш усіх його можливостей.

Сподіваюся стаття вам сподобалася і у вас за підсумками її прочитання склалося розуміння того, що ж таке html5.

P. S. Напишіть в коментарях, чи використовуєте ви html5 в своїх проектах. Якщо використовуєте, то що саме ви використовуєте. Якщо ні, то чи хотіли б ви почати використовувати html5?