Что такое HTML5?

Дата публикации: 2016-04-03

Что такое HTML5?

От автора: привет друзья! В данной статье я хочу немного рассказать вам про 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 позволяют быстрее создавать разметку для страницы, она становиться проще, более понятна и упрощается процесс отладки. Вот некоторые новые теги:

<nav> для любых видов меню

<aside> для сайдбаров или связного контента

<article> для статей

<section> практически то же, что и div

<audio> и <video> теги позволяют проигрывать видео без плагинов

<canvas> для рисование на странице использую 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:

<!doctype html> 
<html lang="en">
<head>
  <meta charset="utf-8">
   <title></title>
    <meta name="author" content="" />
    <meta name="description" content="" />
  <link rel="stylesheet" href="assets/css/style.css" />
   <!--[if lt IE 9]>
  <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>
 <body>
    <header>
        <h1><a href="/">Page Title</a></h1>
        <nav>
            <ol>
                <li><a href="">Nav Link 1</a></li>
                <li><a href="">Nav Link 2</a></li>
                <li><a href="">Nav Link 3</a></li>
            </ol>
        </nav>
    </header>
    <article>
        <h1>Article Header</h1>
        <p>Etiam pretium odio eu mi convallis vitae varius neque pharetra. Nulla vestibulum nisi ut sem cursus sed mattis nisi egestas.</p>
         <h2>Article Subhead</h2>
        <p>Vestibulum lacus erat, volutpat vel dignissim at, fringilla ut felis.</p>
     </article>
     <aside>
        <h2>Sidebar Content</h2>
    </aside>
     <footer>
        <p><small>&copy; Copyright Your Name Here 2014. All Rights Reserved.</small></p>
    </footer>
 </div>
 <script src="scripts/js/scripts.js"></script>
</body>
</html>

<!doctype html>

<head>

<!--[if lt IE 9]>

<![endif]-->

</head>

<body>

<h1><a href="/">Page Title</a></h1>

<nav>

<ol>

</ol>

</nav>

</header>

<h1>Article Header</h1>

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

<h2>Article Subhead</h2>

<p>Vestibulum lacus erat, volutpat vel dignissim at, fringilla ut felis.</p>

</article>

<aside>

<h2>Sidebar Content</h2>

</aside>

</footer>

</div>

</body>

</html>

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

Слева на изображении показан код, а справа результат работы этого кода — видеоплеер

Очень много новых возможностей по работе с формами появилось в html5. Появились новые типы для тегов input. Новые типы призваны упростить ввод данных в поля формы с мобильных устройств. Например, если мы сделает input с типом email:

<input type="email">

1	<input type="email">

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

Вот еще пример нового типа input:

И напоследок еще один пример — это идущие часы. Созданы тоже только на html5.

Заключение

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

Надеюсь статья вам понравилась и у вас по итогам ее прочтения сложилось понимание того, что же такое html5.

P.S. Напишите в комментариях, используете ли вы html5 в своих проектах. Если используете, то что именно вы используете. Если нет, то хотели бы вы начать использовать html5?

Метки: HTML5