похудение
Блог Дмитрия Ивлева
Автор:      Рубрика: Веб-технологии 2017-08-09

Разработка сайтов на HTML5. Что нового в HTML5?

Новое в HTML5

Привет, друзья!

Поговорим об отличиях HTML5 от HTML, новых возможностях и поддержке HTML5 браузерами сегодня. Расскажу куда заглянуть, чтобы быстро освоиться в HTML5 и как изучить с нуля.

Поддержка браузерами HTML5



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

На какие браузеры будем обращать внимание? Заглянем на минутку на GlobalStats от StatCounter и узнаем статистику за последнее время. Вот такая статистика была на момент написания этой статьи.

популярные браузеры

На первой картинке видна мировая статистика, на второй — данные по России.

популярные браузеры России

Хорошо видно, что Chrome по популярности среди пользователей уже несколько лет вне конкуренции. На втором месте — Firefox. IE с каждым годом теряет позиции. В России хорошее место также занимает Opera и Yandex Browser, у которого позиции только растут. Не стоит забывать и про Safari, который неплохо смотрится в общей динамике. Вот пожалуй и все браузеры, которые сегодня стоит учитывать при верстке страниц, в частности на HTML5.

Чтобы узнать, насколько хорошо каждый браузер поддерживает HTML5, есть 2 отличных сервиса caniuse.com и html5test.com. Только следует сразу поправиться, — нужно говорить не о поддержке браузерами HTML5, а о поддержке различных возможностей, которые стали доступны при переходе на HTML5.



С помощью сервиса caniuse.com можно увидеть, что сегодня поддержка основными браузерами уже около 86 — 87%, у Safari чуть хуже. Воспользовавшись поиском на этом сервисе, вы можете быстро получить интересующую вас информацию.

Поддержка HTML5 браузерами

Не нужно думать, что 86% — это не 100%, этого может никогда не произойдет. Все браузеры будут отображать HTML5-страницы, но в каждом браузере пока что не все новые возможности одинаково хорошо реализованы. При переходе к HTML5 вы ничего не теряете, а наоборот, только выигрываете. Правда есть некоторые особенности, которые стоит иметь ввиду при новой верстке страниц.

Сервис html5test.com также очень удобен. Он позволяет протестировать ваш браузер и посмотреть, сколько очков он наберет. Таблица результатов очень наглядная.

Я протестировал свой Chrome (он набрал 521 очко из возможных 555) и заметил, что не поддерживается: input type=datetime в полях формы, элементы: time, menu (в toolbar и popup), видео формата MPEG-4 ASP и прочее.

Здесь очень удобно получить информацию по каждой позиции. Картинку приводить не буду, вы лучше сами перейдите по этой ссылке и посмотрите, что будет у вас.

А вот результаты тестов в других браузерах:

— Firefox — 478 очков (не очень поддерживает новые элементы форм и потоки),

— Opera — 520 очков.

Что нового в HTML5? Отличия между HTML и HTML5



HTML5 предоставляет много новых возможностей для разработки. Моей целью не является рассказать обо всем новом, что есть в  HTML5 и рассмотреть все отличия между HTML4 и HTML5. Расскажу очень коротко только о самом основном на мой взгляд, а если захотите узнать подробнее, то переходите по приведенным здесь ссылкам на другие источники, которые мне показались полезными и удобными для изучения.

Что появилось нового:

  • Рисование в реальном времени на прямоугольном холсте <canvas> с помощью JavaScript
  • Расширенные возможности проигрывания видео — <video> и аудио — <audio>
  • Локальное хранилище — стало доступным хранить большие объемы информации прямо в браузере пользователя
  • Многопоточность
  • Геолокация — можно узнать местонахождение пользователя
  • Управление историей браузера
  • Drag-and-drop
  • Микроданные
  • Редактирование

Чтобы узнать, какие из новых возможностей HTML5 и CSS3 поддерживает браузер пользователя, поможет JavaScript-библиотека Modernizr.

Подробнее об этих возможностях смотрите здесь и здесь.

Также HTML5 поддерживает MathML (математическая разметка для формул) и SVG (форма  изображений, масштабируемая векторная графика).

Упрощения элементов страницы HTML5. Что нового?



  • Доктайп: <!DOCTYPE html>, его легко запомнить
  • Корневой элемент:  <html lang=’ru’>
  • Кодировка симоволов:  <meta charset=’utf-8′ />
  • В некоторых ссылках можно не указывать тип: <link rel=’stylesheet’ href=’css/style.css’ />

Новые теги HTML5

В HTML5 появились новые теги для разметки страниц. Это логические блоки для удобства формирования структуры страниц, они ничем не отличаются от блоков <div>.

Вот основные из новых:

  • <header> — шапка/заголовок, может быть несколько на странице в разных разделах
  • <main> — основной контент
  • <footer> — подвал страницы
  • <nav> — раздел навигации
  • <section> — смысловой раздел
  • <article> — раздел статьи/записи/комментарий
  • <aside> — дополнительный контент
  • <hgroup> — раздел для группировки нескольких заголовков разного уровня
  • <time> — указание точной даты для робота

Для чего нужен каждый тег и как их правильно использовать смотрите здесь:

puzzleweb.ru/html/all_tags.php

htmlbook.ru/html5/semantics

htmlbook.ru/samlayout/verstka-na-html5/novye-tegi

wikibooks.org/wiki/HTML5

Уроки HTML5 для начинающих с нуля



Расскажу о нескольких полезных ресурсах по HTML5 для более глубокого изучения. Это самоучители, справочники, руководства — как хотите их называйте.

Недавно я рассказывал, как можно эффективно выучить HTML и CSS. Из продвинутых курсов HTML Academy вы узнаете, как правильно использовать новые теги HTML5.

На htmlbook.ru есть много полезной информации про HTML5.

На puzzleweb.ru есть хороший справочник с примерами.

Стоит обратить внимание и на ресурс professorweb.ru

Теперь Вы имеете кое-какие представления о новых возможностях HTML5 и об отличиях от старой версии HTML. Надеюсь, что статья была полезной, и Вы нашли для себя кое-что полезное.

Бесплатный курс по HTMLБесплатный курс по CSSAdobe DreamweaverHTML5 и CSS3 с Нуля до ПрофиПрактика HTML5 и CSS3

Современный PHP: работа с ВКОНТАКТЕJavaScript&jQuery с Нуля до ПрофиФреймворк CakePHPФреймворк BootstrapФреймворк Yii2: теория и первая практика



Вам может пригодиться:

Базовый курс по HTML бесплатно

HTML и CSS уроки. Обучение и самоучители

Как создать блог самому?

Защитить сайт или блог на wordpress. Защита в несколько уровней

Как научиться английскому языку самостоятельно с нуля

7 лучших способов заработка в интернете

Желаю успехов!

С уважением, Дмитрий Ивлев.

похудение


Сундук с сокровищами
Получите ключ от сундука с сокровищами.

Узнайте много интересного и сделайте свою жизнь ярче!
ELA English AcademyМеждународный Финансовый ЦентрMBA - City Business SchoolПоказать все обучающие курсы
Оставьте Ваш комментарий или вопрос
  • Егор

    Да уже давно смело можно полностью переходить на html5) Тег video меня вообще неоднократно выручал

    в 10:30 | Ответить
    • Дмитрий Ивлев

      Это точно. Теперь стало гораздо удобнее)

      в 7:03 | Ответить
  • YandexBrowser

    HTML5 это новый язык разметки. Но не стоит пугаться и думать, что Ваши знания по предыдущей версии html пропадут зря. На самом деле новая разметка воплотила все преимущества предыдущей версии html и добавила много всего вкусного.

    в 1:37 | Ответить
    • Дмитрий Ивлев

      Да, пожалуй только в разработке и программировании языки и инструменты развиваются в правильном направлении. =)

      в 7:19 | Ответить
  • Smolurist

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

    в 7:23 | Ответить
  • Александр

    В языках программирования появляются всё новые и новые тэги. Разработчики браузеров реально не успеют за всеми эти новинками. Я на данный момент пользуюсь мазилой, и много раз замечал, что он не видит некоторые функции или кнопки на сайтах. Захожу с хрома или оперы всё есть. А на счёт браузера сафари, могу сказать, что им наверное пользуются только пользователи, которые сидят в интернете с мобильных устройств. Просто я на компьютер себе ставил этот браузер — могу сказать, что он практически не работает, очень долго грузит страницы. *UNKNOWN*

    в 12:49 | Ответить