Что такое HTML5?

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

<header> и <footer>

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

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

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

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

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

<canvas> для рисование на странице использую javascript

<embed> для вставки внешнего контента на страницу

Наряду с тем, что появились новые теги часть существующих тегов в 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>

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

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

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

<input type="email">

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

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

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

Заключение

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

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

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

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (11)

  1. Александр

    Прекрасная статья! HTML5 действительно открывает массу новых потрясающих и грандиозных возможностей, о которых можно было только мечтать в прошлых версиях языка гипертекстовой разметки веб документов.
    В своей работе повсеместно применяю атрибуты html5, в основном связанные с типами полей форм: mail (о котором упоминалось в данной статье), number, placeholder, pattern и другие…

  2. Юрий

    Спасибо за полезную информацию!
    Но по мере ознакомления возник один вопрос.
    У Вас в примере тег Н1 используется дважды. Это противоречит правилам использования заголовков, особенно для СЕО.
    Уточните, это просто ошибка или же какая-то рекомендация, характерная для HTML5.

    • Андрей Кудлай

      С точки зрения разметки это не является ошибкой и использование заголовка h1 дважды вполне пройдет валидацию. С точки же зрения СЕО да, желательно использовать не более одного заголовка h1 для одной страницы. Но поскольку это учебный пример и пример по HTML5 (не по СЕО), то никакой ошибки нет)

    • Pocherk

      Правильно пишется SEO (Search Engine Optimization),
      а CEO (Chief Executive Officer — главный исполнительный директор).
      Это принципиальная разница, а то получается «смесь английского с нижегородским» :)

  3. Роман

    Спасибо за интересную статью,всё описано доходчиво и подробно.

  4. Дмитрий

    HTML5 пока не использую, только начал знакомится с этой фишкой. А вообще тема хорошая, как и статья. Благодарю. И еще CSS3 интересует, я только начал код писать, пару месяцев….. прошел только базовые курсы.

  5. Erich

    Коротко, но для общей информации неплохо. На html5 я пока не перешел, хотя, бесспорно, плюсов на нем много. Однако, что удивительно — все шаблоны на html5, которые есть в интернете — все на одно лицо! Такое впечатление, что эта версия языка предназначена только для продающих одностраничников, но никак не для контентных сайтов…
    И еще момент. Сейчас считается дурным тоном использовать в коде таблицы. Но есть случаи, когда именно табличная структура гораздо удобнее дивной…

  6. Алекс

    Очень интересная и познавательная статья!

  7. Сергей

    Спасибо за интересный материал. Думаю освоить HTML5, необходимо для работы. Пока что только положительные впечатления от новой версии.

  8. gurgen

    Спасибо за информацию.Вероятно,цель статьи дать общий обзор возможностей , но как то похоже на рекламу.Хотелось бы технических подробностей : как решены проблемы предыдущих версий,и какие принципиально,идейно новые решения.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree