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

Незважаючи на те, що ця платформа зробила свій набіг на сферу веб-розробки досить давно, не бракує веб-майстрів, які не мають її в своєму списку «3 найпопулярніших інструментів», коли справа доходить до створення веб-сайту. І велика частина із цих веб-майстрів уже використовують інші платформи для своїх веб-сайтів, таким чином йдучи на компроміс щодо низки функцій, які HTML5 міг би інтегрувати на їхні веб-сайти.

1 Воно дає волю творчим душам

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

2 Значно вдосконалена підтримка відео доступна для взяття

Підтримку відео було значно покращено за допомогою нового вбудованого відео HTML5 для браузерів. Оскільки не всі браузери підтримують різноманітні формати, як-от H.264, якщо ви бажаєте відобразити відео HTML5, ви повинні використовувати наступне:

<video controls preload>
    <source src="cohagenPhoneCall.ogv" type="video/ogg; codecs='vorbis, theora'" />
    <source src="cohagenPhoneCall.mp4" type="video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'" />
    <p>Your browser does not support the format. <a href="cohagenPhoneCall.mp4">Download this format.</a></p>
</video>

3 Це дозволяє вам створювати веб-сайти «для мобільних пристроїв», замість того, щоб змушувати вас створювати кілька версій

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

4 заплутаний тип документа XHTML відкриває шлях до простішої та менш громіздкої версії

Якщо говорити без сумнівів, спільнота розробників не сприйняла doctype XHTML. І причина цього більш ніж очевидна з того, як це написано:

<!DOCTYPE html PUBLIC "-//KKK//DTD XHTML 1.0 Transitional//EN"
    "http://www.xyz.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML5 зробив оголошення набагато коротшим і зрозумілішим для розробників:

<!DOCTYPE html>

5 атрибутів, які можна визначити більш інтуїтивно

Перш за все, атрибути, які ви використовуєте у своїй програмі, повинні мати можливість безперешкодно визначати, чи правильно вони виявляються браузерами. HTML5 дає цим атрибутам необхідні засоби для виконання саме цього. Бібліотека Modernizr виявилася винахідливим інструментом, але є й інші способи, як-от створення елементів перед їх розчленуванням. Таким чином, буде легко оцінити можливості браузера.

6 У нього є набір виправлень для IE

Що ж, Інтернет-спільнота в усьому світі сприймає Internet Explorer досить безпристрасно, і це з дуже виправдовуваних причин. Як і очікувалося, у IE є власні проблеми з новими елементами, які додає HTML 5. Тому, щоб надати відчуття структури елементам HTML5, важливо оформити ці елементи таким чином, щоб вони стали більш зрозумілими для цього браузера. вирівнюються як елементи рівня блоку:

header, footer, article, section, nav, menu {
   display: block;
}

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

document.createElement("article");
document.createElement("footer");
document.createElement("header");
document.createElement("nav");
document.createElement("menu");

7 Геолокація

Геолокація, безсумнівно, є головною особливістю HTML5. Він кидає вам математичні значення, які представляють координати розташування вашого користувача. Ці координати розташування обчислюються за допомогою браузера, який відвідувач використовує для доступу до веб-сайту.

8 Код, який вільний від безладу та набагато зрозуміліший

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

<div id="header">
 <h1>Header Text</h1>
 <div id="nav">
  <ul>
   <li><a href="x">Link</a></li>
   <li><a href="x">Link</a></li>
   <li><a href="x">Link</a></li>
  </ul>
 </div>
</div>

Хоча ви можете сперечатися, що код досить простий, але давайте подивимося, що з ним може зробити HTML5:

<header>
 <h1>Header Text</h1>
 <nav>
  <ul>
   <li><a href="x">Link</a></li>
   <li><a href="x">Link</a></li>
   <li><a href="x">Link</a></li>
  </ul>
 </nav>
</header>

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

9 Вам не потрібно мати справу з «Типом» для сценаріїв і посилань

Не бракує веб-розробників, які сильно схиляються до атрибута Type, особливо коли їм потрібно використовувати теги сценаріїв. За допомогою HTML 5 ви можете вилікувати свої типи, скоріше видалити їх взагалі. Код в результаті стає описовим.

<link rel="stylesheet" href="path/to/stylesheet.css" />
<script src="path/to/script.js"></script>

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

Чудові приклади потужних веб-сайтів HTML5

Наступні приклади ще більше підтверджують той факт, що HTML5 тут, щоб зробити потужні хвилі змін:

1 Мистецька студія Ghost Writer

Ghost Writer Art Studio може не вразити вас, але вона точно зробить сильну заяву завдяки розумним дизайнам, які, м’яко кажучи, привабливі. Інструменти HTML5 надали йому привабливості, з якою важко порівняти.

2 Виноробня Valpolicella Negrar

Веб-сайт Cantina Valpolicella Negrar створює атмосферу, від якої важко відмахнутися, радше атмосферу, яку хочеться зберегти. Функції HTML5 використовуються найбільш розумно для веб-сайтів із мінімальним дизайном, що забезпечує максимальний вплив.

3 Ватерлоо: фільм

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

4 Зізі

Якщо ви все ще не вірите в старовинне прислів’я «картинка говорить більше, ніж тисяча слів», ця приказка точно вас переконає. Веб-сайт Zizzi, який працює на основі HTML5, є чудовим доказом того, як креативність у поєднанні з потужною платформою може створювати магію. Створений відомим агентством Propeller Communications, він забезпечує широке використання функції Geolocation API HTML5.

5 Водне полотно

І тоді є що! Water Canvas неймовірно красивий, але ми також звернули увагу на оперативність веб-сайту. Текстури та загальний макет досить добре поєднуються, щоб виділити цей твір.

6 Лардіні

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

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