HTML5 (HyperText Markup Language, version 5)

HTML5 (HyperText Markup Language, version 5)
HTML5 logo and wordmark.svg.png
Выпущена: 28 октября 2014
Тип ПО: Язык разметки
Веб-сайт {{#property:P856}}
Стандарт(ы) W3C HTML5 Recommendation
W3C HTML5.1 Recommendation
WHATWG HTML Living Standard

HTML (англ.  HyperText Markup Language version 5) — это инструмент для упорядочивания Web-контента. Он предназначен для упрощения Web-проектирования и Web-разработки за счет языка разметки, обеспечивающего стандартизированный и интуитивно понятный пользовательский интерфейс. HTML5 предоставляет разработчику средства для секционирования и структуризации Web-страниц, а также позволяет создавать обособленные компоненты, которые не только обеспечивают логическую организацию Web-сайта, но и предоставляют ему возможности синдикации. Язык HTML5 реализует подход к проектированию Web-сайтов, основанный на отображении информации, поскольку он воплощает саму суть отображения информации — разделение и маркирование информации для упрощения ее использования и понимания. Именно в этом состоит огромная семантическая и эстетическая ценность HTML5. HTML5 предоставляет дизайнерам и разработчикам всех уровней возможности для предоставления в публичный доступ буквально любого контента – от простых текстов до мультимедийно насыщенных интерактивных материалов[1]. HTML5 предоставляет эффективные инструменты для управления данными, для рисования, для воспроизведения видео- и аудиоконтента. HTML5 облегчает разработку кросс-браузерных Web-приложений, а также приложений для мобильных устройств. HTML5 относится к числу технологий, которые стимулируют развитие мобильных сервисов на основе облачных вычислений. Кроме того, HTML5 способствует повышению гибкости – благодаря возможности создания впечатляющих и интерактивных Web-сайтов. И, наконец, HTML5 предлагает новые теги и усовершенствования, в числе которых следующие: элегантная структура, органы управления формами, API-интерфейсы, Новые теги HTML5 обладают «говорящими» названиями, которые раскрывают назначение и характер использования этих элементов. В предыдущих версиях HTML использовались весьма неопределенные названия тегов. В спецификации HTML5, напротив, используются весьма описательные, интуитивно понятные названия. HTML5 предоставляет информационно-насыщенные названия, которые однозначно идентифицируют соответствующий контент. Например, широко применявшийся до настоящего времени тег <div> был дополнен тегами <section> и <article>. Кроме того, были добавлены теги <video><audio><canvas> и <figure>, которые обеспечивают более точное описание определенных типов, поддержка баз данных, существенно увеличенная скорость обработки.

Ключевые понятия

  • Его разработали для обеспечения взаимодействия страниц в разных браузерах. Сегодня мы используем различные браузеры (к примеру, на работе у нас может стоят IE, в телефоне — Safari или Opera, а дома -Firefox) и было бы неразумно и досадно, если бы сайт не работал бы вчем-то из них.
  • Все производители браузеров — – Opera, Mozilla (Firefox), Apple (Safari), Microsoft (Internet Explorer), Google (Chrome) — все они сотрудничают между собой, равно как и с еще кучей органицазий и частных лиц: с Netflix, Inc., Adobe, IBM, HP, BBC и многим другими.
  • Он разработан, чтобы расширить возможности современного веба, не нарушая при этом работы уже существующих веб-страниц.
  • Он может соревноваться с плагинами типа Microsoft Silverlight и Adobe Flash, которые сами по себе были созданы, чтобы закрыть дыры в окаменелом стандарте HTML4.

Основное предназначение HTML5

HTML4 трещал по швам под напором новых видов приложений. Многие вещи были просто недоступны и требовали плагинов типа Adobe Flash или Microsoft Silverlight. Приходилось идти на всяческие уловки и ухищрения, использовать нестандартные, недокументированные приемы, что было не очень-то надежной основой для сайтов, созданных для заработка. Как много браузеров поддерживают HTML5? Если исходить из того, что HTML5 произошел от HTML4, то все браузеры поддерживают какие-то свойства HTML5. С другой стороны, если хотите знать, какие браузеры содержат все свойства ядра HTML5 — то ни один. Они все обеспечивают выполнение некоторых частей спецификации (которая насчитывает более 700 страниц), но ни один не поддерживает все одновременно. Если отбросить все несущественное, то все современные браузеры примерно в равной степени поддерживают HTML5, хоть они и добавляют поддержку тех или иных свойств в разное время.

Возможности HTML5

  • Теги с описательными названиями, которые точно указывают, для содержания какого контента предназначены эти теги.
  • Усовершенствованные сетевые коммуникации.
  • Существенно улучшенное хранение данных
  • Средства Web Worker для исполнения фоновых процессов.
  • Интерфейс WebSocket для установки постоянного соединения между резидентным приложением и сервером.
  • Улучшенное извлечение хранящихся данных.
  • Повышенная скорость сохранения и загрузки страниц
  • Поддержка CSS3 при управлении пользовательским интерфейсом, что обеспечивает контентную ориентированность HTML5.
  • Улучшенная обработка форм в браузере.
  • API-интерфейс баз данных на основе SQL, позволяющий применять локальное хранилище на стороне клиента.
  • Теги canvas и video, позволяющие добавлять графические и видеоматериалы без установки сторонних подключаемых модулей.
  • Спецификация API-интерфейса Geolocation, использующая геолокационные возможности смартфонов в интересах задействования облачных сервисов и приложений для мобильных устройств.
  • Усовершенствованные формы, ослабляющие потребность в загрузке кода JavaScript, что обеспечивает более эффективную связь между мобильными устройствами и серверами cloud-среды[2].

HTML5 позволяет предоставить пользователю более впечатляющие возможности: страницы, спроектированные с использованием спецификации HTML5, способны предоставлять такие же возможности, как приложения для настольных систем. Кроме того, HTML5 существенно улучшает разработку для нескольких платформ благодаря сочетанию возможностей API-интерфейсов с повсеместностью браузера. HTML5 позволяет разработчикам предоставлять возможности современных приложений, беспрепятственно охватывающие несколько платформ. Фактически HTML5 является синонимом непрерывных инноваций: новые теги, новые методики и общая инфраструктура разработки, базирующаяся на взаимодействии технологии HTML5 с родственными технологиями CSS3 и JavaScript. Это создает основу для функционирования приложений, ориентированных на клиентов. Помимо широкого распространения средств и методик технологии HTML5 на настольных системах, она может быть реализована в функционально насыщенных Web-браузерах для мобильных телефонов. Это растущий рынок, характерными представителями которого являются популярные и вездесущие платформы Apple iPhone, Google Android и Palm webOS. Важнейшим аспектом мощных возможностей HTML5 является препарирование информации — или разделение контента на блоки, которое делает процесс гораздо понятнее. Высокая эффективность этого инструмента при проектировании и разработке подтверждается его усиливающимся доминированием в сфере Web-обработки. HTML5 знаменует приход более эффективного семантического процесса на текстовом уровне и преобладание контролируемости над конструированием и использованием форм. Все эти и многие другие инновационные аспекты HTML5 обуславливают усиливающееся доминирование этой новой парадигмы. Этот нарастающий эффект до той или иной степени повлиял на многие организации (причем не только на коммерческие), в том числе на многие организации, у которых обработка информации и коммуницирование лишь недавно вошли в число основных видов деятельности.

Структура

Любой код разметки начинается с доктайпа, этот элемент говорит браузеру, на каком языке разметки и его версии написан документ. Также доктайп переводит браузер в один из возможных режимов: стандартный, почти стандартный и режим совместимости. В HTML5 нет подобных делений, доктайп один единственный и при его наличии браузер работает в стандартном режиме.

<!DOCTYPE html>

Из всех видов это самый короткий доктайп, его легко запомнить и набирать по памяти.

Изменения претерпели и другие теги, так, у тега
<html>
нет атрибута xmlns, а кодировка документа сократилась до такой записи.
<meta charset="utf-8">

Впрочем, старый способ указать кодировку также остался.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
Атрибут type у тега
<script>
и
<style>
можно опустить, браузер автоматически понимает содержимое этих тегов и ему уже не требуется явно об этом напоминать[3].

Код на HTML5

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Пример страницы</title>
  <style>
  p { color:  navy; }
  </style>
 </head>
 <body>
  <p>Страница на HTML5</p>
 </body>
</html>

История появления

Сама история HTML имеет весьма давние корни, начиная с языка GML (Generalized Markup Language), родившегося в недрах IBM в конце 60х годов, продолжая  стандартизированным в первой половине 80х языком SGML (Standard Generalized Markup Language) и переходя непосредственно к работам Tim Berners Lee в начале 90х, которые и вылились в первые наброски HyperText и HTML и первую официальную стандартную версию HTML 2.0 в 1995 г. Примерно тогда же началась активная работа над следующей версией HTML, ярко выразившая себя целой плеядой новых документов и предложений, добавляющих в стандарт все новые и новые возможности: В конце-концов уже в течение года эта активность дала дорогу HTML 3.2, довольно быстро перешедшему в состояние официальной рекомендации W3C. Появлялись новые идеи, стандарт продолжал усложняться и в 1997 г. был выработан и утвержден HTML 4.0, спустя 2 года обновившийся до ревизии HTML 4.01. Это последняя полностью утвержденная версия HTML, которой мы продолжаем активно пользоваться и на базе которой построены практически все страницы современного интернета. Это был 1999 год и это было более 11 лет назад. HTML5, дает три основных преимущества на концептуальном уровне:

  • Нативная поддержка. Браузеры, поддерживающие HTML5 (а на сегодня это современные версии всех популярных браузеров), делают это нативно, из коробки, то есть без необходимости устанавливать дополнительные плагины. Функционал из коробки – это всегда хорошо, если он работает не хуже того, что в принципе можно доставить сверху. За надежность и интеграцию встроенного функционала отвечает производитель браузера, он же следит за обеспечением безопасности и приватности. Для встроенного функционала проще обеспечить доступ к системным ресурсам – будь то данные или вычислительные мощности.
  • Полноправные элементы. В отличие от плагинов, работающих как черный ящик, вставленный на страницу и в лучшем случае взаимодействующий с ней через специальные интерфейсы на JavaScript, встроенный в браузер функционал полноправно интегрируется во всю экосистему технологий и поддерживаемых стандартов. Например, это означает, что видео-элементы HTML5 можно стилизовать через CSS, к ним можно напрямую обращаться через DOM и JavaScript. Это единая хорошо связанная экосистема.
  • Открытые технологии. Открытость – штука двоякая и есть палка о двух концах. Открытые стандарты, доступные любому для изучения, использования и реализации, – с одной стороны, и необходимость в стандартизации и стремлении к совместимости разных реализаций – с другой. И вместе с этим относительно легкий доступ к коду (благо в каждом уважающем себя браузере сегодня есть встроенные средства разработки, ну или популярный плагин.

Примечание

  1. HTML5 [Электронный ресурс] : Материал из Википедии — свободной энциклопедии: — Режим доступа: https://ru.wikipedia.org/wiki/HTML5
  2. HTML5 [Электронный ресурс] : Материал из https://developer.mozilla.org/: — Режим доступа: https://developer.mozilla.org/ru/docs/HTML/HTML5
  3. HTML5 [Электронный ресурс] : Материал из Википедии — свободной энциклопедии: — Режим доступа: http://htmlbook.ru/html5