Від автора: привіт друзі! У даній статті я хочу розповісти вам трохи про html5. Розповісти, що таке html5, що в ньому нового. Які нові можливості він надає розробникам. HTML5 дуже широке поняття. І деякі технології, які називають в HTML5, взагалі кажучи, не є html5, але про все по порядку…
Що таке HTML5?
Перше — це стандарт HTML5, документ, що лежить на сайті W3C, в якому описані всі нові теги, атрибути, нові API, і ряд супутніх документів, які винесені деякі додаткові деталі, на зразок API для Canvas.
Друге — це «великий», маркетинговий, трендовий 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 дозволяють швидше створювати розмітку сторінки, вона стає простіше, більш зрозуміла і спрощується процес налагодження. Ось деякі нові теги:
і
для будь-яких видів меню
для сайдбаров або зв’язкового вмісту
для статей
практично те ж, що й div
теги дозволяють програвати відео без плагінів
для малювання на сторінці використовую javascript
для вставки зовнішнього контенту на сторінку
Поряд з тим, що з’явилися нові теги частина існуючих тегів в HTML5 набуває нового значення. Так, якщо раніше вибір між i і em (аналогічно b і strong) був частіше на користь більш короткого написання, то сьогодні це теги з різним смисловим навантаженням, навіть якщо вони мають однакове уявлення курсивом або жирним шрифтом.
Інша частина нововведень стосується безпосередньо питань доступності: тут, насамперед, йдеться про 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
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.
