ТОП 10 Причин, чтобы начать использовать HTML5 прямо сейчас

Опубликовано: 06.09.2018

Вы до сих пор не используете HTML5? Возможно у вас есть на то причины, да и он не адаптирован до конца, не совместим с IE, а возможно вы просто преданы обычному XHTML коду. HTML5 – это эволюция, которая уже давно необходима Интернету и именно за ним будущее, хотите вы того или нет. HTML5 не является сложным языком и хотя он все еще не адаптирован до конца, есть много причин, чтобы начать использовать его прямо сейчас (конечно после прочтения этого поста).

В сети опубликовано огромное количество постов о HTML5, его использовании и преимуществах, да это еще один такой же пост. Но я все еще считаю целесообразным писать об этом языке и делиться с другими дизайнерами и разработчиками, так как его активно внедряют такие гиганты как Apple и Adobe. Именно на этом языке Adobe создает новые продукты. Главной проблемой этого языка пока является то, что многие думают о нем как о мистике. Для них это как летающая машина, как некая великолепная идея, о которой стоит подумать, но ее осуществление не практично. Однако они ошибаются, ведь именно сейчас и есть то время, когда использование HTML5 очень актуально!

Anthony Di Iorio on Jaxx's Business Model & Imminent Dash Integration

Для того чтобы подтолкнуть дизайнеров и разработчиков к использованию HTML5 и окончательно демистифицировать его, я составил список из 10 причин, почему мы должны начать использовать его прямо сейчас. Тем, кто уже использует HTML5, этот список может и не даст ничего нового, однако я надеюсь, что он заставит вас поделиться с нами преимуществами этого языка, которые открыли вы. И начнем мы наш список с номера 10 – доступности.

10 – Доступность

HTML5 облегчает создание полностью доступных сайтов по 2 главным причинам: семантической и ARIA.Новые HTML заголовки как <header>, <footer>, <nav>, <section>, <aside> и другие, дают пользователям легкий доступ к контенту. До этого ваши пользователи не могли определить то, что дает тот или иной <div>, так как к нему бл приписан ID или класс. А с новыми тегами, пользователи могут легко изучить HTML документ и получить лучшее представление о его строении.

ARIA – это W3C спецификация, которая в основном используется для присвоения специальных “ролей” элементам HTML документа, изначально создавая важные отметки на странице: хэдер, футер, навигацию. Данная спецификация была переработана и практически не использовалась, так как она не была валидна, однако HTML5 сделает данные атрибуты валидными. Для того, чтобы узнать больше о спецификации ARIA вы можете посетить эту страницу ( http://www.w3.org/WAI/intro/aria ).

9 – Поддержка аудио и видео

Забудьте о Flash плеере и других сторонних мультимедиа приложений, теперь ваши аудио и видео записи будут доступны при помощи простых HTML5 тегов <video> и <audio>. Раньше, для того, чтобы ваши мультимедиа записи воспроизводились корректно, вам нужно было использовать и настраивать параметры тегов <embed> и <object>. И зачастую они перерастали в огромные непонятные коды. HTML5 теги видео и аудио рассматривают все как изображение и выводятся следующим образом: <video src=”url”/>. А что же с параметрами высоты, ширины и автоматического воспроизведения? Не беспокойтесь, их параметры вы также можете легко прописать: <video src=”url” width=”640px” height=”380px” autoplay/>.

Хотя все это так просто, наши устаревшие браузеры еще не совсем любят наших друзей из HTML5, сейчас вам нужно добавлять чуть больше кода… но все же он не такой огромный как с тегами <object> и <embed>:

Стоит посетить следующие полезные ресурсы:

8 – Тип документа

<!DOCTYPE html>

Да, именно так задается тип документа, ничего более. Довольно просто, не так ли? Больше никаких вставок длинных и непонятных линий кода, никаких “грязных” тегов хэдера. Вы можете легко и просто вписать эту строчку и радоваться. Данный код уже работает во всех браузерах, кроме мертвого IE6.

7 – Более чистый код

Если вы заботитесь о простоте и легкости кода, тогда HTML5 – это лучший выбор. HTML5 позволяет вам писать чистый, информативный и семантический код, который позволяет разделять значение от стиля и контента. Взгляните на этот просто код навигации:

Этот код довольно чистый и простой, не так ли? Однако с HTML5 вы можете сделать его еще проще, придав разметке больше значения:

HTML5 позволит вам лучше описать ваш контент. Вам не понадобятся никакие классы в divах, вы будете обозначать контент при помощи тегов <section>, <article>, <header>, <footer>, <aside> и <nav>. HTML5 также позволит вам лучше организовать и упростить CSS.

Стоит посетить следующий полезный ресурс:

HTML5 Boilerplate

6 – Более продвинутое хранение данных

Одной из самых крутых вещей в HTML5 является новая возможность хранения локальных данных. Это что-то типа смеси старых куки и базы данных на стороне клиента. Это лучше чем куки, так как хранение возможно в нескольких открытых окнах. Это улучшает безопасность и производительность, так как данные сохраняются даже после закрытия браузера. Кроме этого, вам не нужно беспокоится о том, что данные не сохранятся, если пользователь захочет почистить куки.

Локальное хранение это просто отлично с точки зрения многих аспектов, именно это позволяет HTML5 инструментам запускать приложения без сторонних плагинов. Имея возможность хранить данные в пользовательском браузере, вы легко сможете реализовывать следующее: хранить пользовательскую информацию, кэшировать данные, загружать предыдущее состояние приложения пользователя. Если вы заинтересованы в локальном хранении, то вы можете познакомиться с прошлогодней статьей Кристиана Хейлмана — Wrapping Things Nicely with HTML5 Local Storage .

Стоит посетить следующие полезные ресурсы:

5 – Улучшенное взаимодействие (использование)

Всем нам хочется лучшего использования сайта, чем динамичнее сайт, тем больше им наслаждаются пользователи. Используйте <canvas>, тег HTML5, позволяющий использовать захватывающие анимированные возможности, которые ранее были доступны на таких платформах как Flash.

Кроме <canvas>, HTML5 предлагает ряд API, которые также позволяют создавать веб приложения:

* Drag and Drop (DnD)

* Офлайн база хранения данных

* Управление историей браузера

* Окончание документа

* Воспроизведение мультимедиа по времени

За более подробной информацией по API вы можете обратиться сюда ( HTML5Doctor ).

Стоит посетить следующие полезные ресурсы:

4 – Разработка игр

Да, все верно, с тегом <canvas> вы сможете разрабатывать игры. HTML5 не просто позволяет создавать отличные интерактивные игры, он делает их совместимыми с мобильными устройствами. Если вы уже делали игры на Flash, то в HTML5 ввы просто влюбитесь.

Совсем недавно вышли уроки по тому, как разрабатывать игры на HTML5, прочесть их вы можете тут:

Стоит посетить следующие полезные ресурсы:

3 – кроссбраузерность

Все современные браузеры поддерживают HTML5 (Chrome, Firefox, Safari IE9 и Opera), а doctype в HTML5 был сделан таким образом, что его могут понимать все даже самые старые браузеры. Однако, не смотря на то, что они понимают doctype, это не означает, что они понимают все теги HTML5. Все это было сделано для простоты и кроссбраузерности. Что касается других версий IE, то тут мы можем использовать Javacript:

Стоит посетить следующие полезные ресурсы:

2 – Мобильные устройства

Мобильная технология становится все популярнее с каждым днем. Я знаю, что это может звучать сумасшедше, но мобильные устройства захватывают весь мир. Происходит массовая адаптация мобильных сервисов, а это означает, что мобильными браузерами и приложениями будет пользоваться все больше и больше людей. Для такого развития как раз отлично подходит HTML5. Adobe объявил о “смерти” мобильной технологии Flash, а у вас теперь есть возможность разрабатывать мобильные веб приложения при помощи HTML5.

Мобильные браузеры уже полностью поддерживают HTML5, и поэтому вы уже можете создавать проекты под их небольшие дисплеи. Ниже представлены некоторые мета-теги, которые позволят вам оптимизировать сайт под мобильные устройства:

— Viewport: позволяет вам определить размеры и настройку увеличения в окне браузера.

— Full Screen Browsing: специальные значения, которые позволяют вашим девайсам Apple производить просмотр в полноэкранном режиме.

— Home Screen Icons: это как иконки на рабочем столе, эти иконки используются для добавления закладок на рабочий стол мобильных устройств на Android.

Для получения большей информации по оптимизации под мобильные устройства вы можете посетить эту страницу ( http://www.html5rocks.com/en/mobile/mobifying.html ).

Стоит посетить следующие полезные ресурсы:

1 – Это Будущее, не отставайте от него!

Причина №1 – будущее, начните использовать HTML5 сейчас и вы будете впереди. Он ни куда не денется, а со временем адаптируют все больше и больше новых элементов, все больше и больше компаний начнут использовать и развивать его. HTML5 это просто HTML, не нужно его бояться, его не нужно будет учить заново. Если вызнаете как писать на XHTML, то значит вы знаете как писать и на HTML5, почему бы тогда не использовать все его преимущества?

Если честно, то я предпочитаю писать на HTML5 потому, что мой код становится меньше и чище, всеми остальными преимуществами данного языка я пока не пользовался. Вы можете использовать его прямо сейчас, не меняя существующего дизайна сайта, но упрощая и облегчая семантическую разметку сайта. А может быть, вы сделаете мобильную игру, которая перевернет мир? – кто знает…