Обзор новинок HTML5

В последнее время термин HTML5 стал часто встречаться на просторах интернета, а все прогрессивное сообщество веб-мастеров сосредоточилось на изучении нового стандарта Hyper Text Markup Language 5. Prostoweb решил узнать, что же означает это понятие.





HTML — язык разметки документов во Всемирной паутине. Большинство веб-страниц создаются при помощи языка HTML (или XHTML). Язык HTML интерпретируется браузерами и отображает пользователям интернета сайты в нужном виде. Именно благодаря этой технологии мы видим интернет таким красивым и понятным, по сравнению с самим HTML-кодом, той или иной страницы.  Для одних, HTML5 – это новая версия языка разметки гипертекста, для других - термин обозначающий совокупность современных технологий веб-разработки. Оба эти варианта верны.

Как появился и что такое HTML5

Работа над HTML4 была закончена в 1999 году, a разработка HTML5 в группе W3C началась лишь с 2004 года и до сих пор не закончена (актуальная версия черновика стандарта HTML5 доступна на w3.org). Внимание на HTML5 обратили в середине 2010 году, после того как Стив Джобс опубликовал свое заявление об отказе от технологии Flash в пользу «новых открытых стандартов, вроде HTML5». А в начале ноября 2011 года компания Adobe (разработчик Flash) объявила, что прекращает разработку Flash для мобильных устройств, а вместо этого сконцентрирует свое внимание на разработке инструментов, использующих HTML5.

Разработка нового стандарта проводилась по принципу соблюдения максимальной обратной совместимости со старыми браузерами, поэтому в целом HTML остался тем же, никаких революций не свершилось. В тоже время, возможности языка были существенно расширены. По сути, HTML5 – это целый зоопарк технологий верстки, новых стилей CSS, множества новых API, и даже новой версии JavaScript – «ECMAScript5».

W3C возлагает немалые надежды на свой трендовый стандарт, при этом привлекаются разнообразные маркетинговые технологии. Чего стоит сама история создания всем известного логотипа HTML5, (которая неплохо описана в статье: «Логотип HTML5: история, детали, проблемы»).

Что же такого нового в HTML5, чего не было в HTML4?

А новое в принципе все. Спецификация HTML5 несет в себе множество изменений разного уровня и важности. Фундаментальные изменения можно разделить на несколько блоков:

  • Семантика языка. В HTML5 появился ряд новых семантических тегов, позволяющих более осмысленно организовывать внутреннюю структуру веб-страниц.

Рассмотрим наиболее известные  из них:

  • nav — служит для создания панели навигации;
  • aside — является объединяющим тэгом, более всего подходящим для выделения сайдбара. В него могут входить как блоки nav, так и другие элементы, не являющиеся навигационными (рекламные баннеры, фотография автора, кнопки социальных сетей и т.д.);
  • section — также объединяющий тэг. Причем он может выступать в разных ролях: либо разделять страницу на несколько тематических областей, либо разделять на отдельные секции непосредственно статью на странице;
  • article — служит для разбивки страницы на отдельные статьи. Оба тэга section и article обладают рядом интересных особенностей. Например, вы можете теперь смело использовать заголовок первого уровня H1 на одной странице несколько раз, что ранее было недопустимо;
  • hgroup — тэг призван группировать заголовки страницы в одну логическую единицу;
  • video — служит для простой вставки видео на страницы сайта;
  • audio — также предназначен для простой вставки медиа-контента на страницы сайта;
  • canvas — создает область, в которой при помощи JavaScript можно рисовать разные объекты, выводить изображения, трансформировать их и менять свойства.

Про остальные тэги можно узнать из htmlbook.ru.

  • Мультимедиа. HTML5 теперь из коробки поддерживает мультимедийный контент (аудио и видео проигрыватель) в HMTL-разметке — с соответствующим API для управления воспроизведением и кодеками.
  • Графика. Работать с графикой стало заметно проще, благодаря тэгу canvas и специальному JavaScript  API для работы с ним. Также в HTML5 официально включен тэг svg, позволяющий внедрять векторную графику, описываемую соответствующим веб-стандартом (SVG, Scalable Vector Graphics).
  • Веб-формы. Новые элементы веб-формы: как типы, так и атрибуты, позволяющие расширить возможности традиционных форм встроенными средствами, без использования дополнительных библиотек для валидации вводимых данных, подсказок в формах.
  • JavaScript API.  API для работы с графикой и мульмедиа, новые расширенные возможности по перемещению объектов и работе с историей переходов (History API), а также ряд мелочей, вроде возможности сделать контент редактируемым прямо в текущем месте с помощью Content Editable атрибутов.
  • Многое другое. Усовершенствованные сетевые коммуникации. Существенно улучшенное хранение данных. Средства Web Worker для исполнения фоновых процессов. Интерфейс WebSocket для установки постоянного соединения между резидентным приложением и сервером. Повышенная скорость сохранения и загрузки страниц. Поддержка CSS3 при управлении пользовательским интерфейсом, что обеспечивает контентную ориентированность HTML5.

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

И напоследок чтобы не быть голословным приведем ряд примеров, которые отображают все преимущества HTML5:





Опубликовано на сайте: 21.09.2012

Автор: Игорь Лубенец

Источник: http://www.prostoweb.com.ua/


Нужны деньги до зарплаты?

более 30 сервисов

Кредиты онлайн на карту за 15 минут

от 0,01%

ставка

до 180 дней

макс срок

до 20 000 грн.

макс сумма




Забавное видео

2-х летний малыш любит бросать. Смотрите, что получилось, когда родители купили ему баскетбольное кольцо!