HTML 5

Содержание

1. Основание выбора темы
2. Краткая история развития HTML
3. Основные отличия нового HTML от старого
4. Новые возможности
5. Личный опыт и релевантные работы на сайте магистров
6. Список использованных источников
7. Список полезных ресурсов

HTML5 logo

Логотип HTML5

1. Основание выбора темы

Причина 1. Почему эта тема вообще возникла как возможная для выбора? На одной из лекций по курсу Интернет технологиям в университете, наш декан факультета Компьютерных Наук и Технологий Аноприенко Александр Яковлевич спросил у аудитории, кто может сделать шаблон персональной страницы для сайта магистров в соответствии со стандартами HTML5. Зная объём предстоящей работы и вообще что-либо конкретное об HTML5 я оказался одним из тех, кто согласился на такое задание. Затем в рамках учебной дисциплины мне нужно было выбрать себе тематику индивидуального раздела. Раз уж делаю шаблон персональной страницы (одновременно и свою страницу тоже) в соответствии со стандартами HTML5, я решил что тема HTML5 отлично подойдёт для моего индивидуального раздела.

Причина 2. Если чуть более серьёзно, то: HTML5 (англ. HyperText Markup Language, version 5) – язык для структурирования и представления содержимого всемирной паутины. Это пятая версия HTML, последняя (четвёртая) версия которого была стандартизирована в 1997 году. По состоянию на май 2014 года, HTML5 ещё находится в разработке, но, фактически, является рабочим стандартом (англ. HTML Living Standard). Цель разработки HTML5 – улучшение уровня поддержки мультимедиа-технологий, сохраняя при этом удобочитаемость кода для человека и простоту анализа для парсеров. Соответственно исходя из данного высказывания можно извлечь информацию о том, что на момент написания данной статьи (в мае 2014 года) HTML5 является передовой, развивающейся и активно применимой на практике технологией, которая определённо заслуживает статью о себе на сайте магистров ДонНТУ.

Причина 3. Аноприенко А.Я. целую лекцию под HTML выделил и особое место в ней занимал HTML5. Значит, тема важна.

Причина 4. Мне нравится HTML5.

Причина 5. HTML5 is the Future in the Present of Web!

2. Краткая история развития HTML

Краткую историю HTML от создателей можно прочитать там. Эта статья могла бы вмещать в себя весь текст этой краткой истории, однако в рамках одного раздела этой статьи придётся ограничиться очень краткой историей развития HTML.

Начало истории HTML следует отнести к 1986 году, когда Международная организация по стандартизации (ISO) приняла стандарт ISO-8879, озаглавленный Standard Generalized Markup Language (SGML). Стандарт этот посвящен описанию SGML – обобщенного метаязыка, позволяющего строить системы логической, структурной разметки любых разновидностей текстов. Слово структурная означает, что управляющие коды, вносимые в текст при такой разметке, не несут никакой информации о внешнем виде документа, а лишь указывают границы и соподчинение его составных частей, т. е. задают его логическую структуру. Создатели SGML стремились максимально абстрагироваться от проблем представления электронного текста в разных программах, на разных компьютерных платформах и устройствах вывода [2].

Язык SGML – это типичное детище академической науки, изящная игрушка теоретиков. Его создание не было вызвано насущной практической необходимостью. Принципы, на которых строится этот язык, значительны и интересны; несомненно, идеология SGML оказала влияние на многие компьютерные разработки. Однако сам по себе SGML не получил сколько-нибудь заметного распространения – до тех пор, пока в 1991 г. сотрудники Европейского института физики частиц (CERN), занятые созданием системы передачи гипертекстовой информации через Internet, не выбрали SGML в качестве основы для нового языка разметки гипертекстовых документов. Этот язык – самое известное из приложений SGML – был назван HTML (HyperText Markup Language, язык разметки гипертекста). Вся разметка была чисто логической, и лишь в описательной части стандарта, сопровождающей формальное определение тегов, можно было прочесть что-нибудь вроде "в графических браузерах действие этого тега может передаваться курсивным начертанием". Так что нет ничего удивительного в том, что в этот золотой век никаких противоречий между официальными стандартами и их реализацией в браузерах еще не существовало.

HTML неторопливо развивался, оставаясь в рамках парадигмы структурной разметки, и в апреле 1994 г. началась подготовка спецификации следующей версии языка – 2.0. Этим занимался образованный в том же году Консорциум W3 (W3 Consortium, сокращенно W3C). Достаточно сказать, что окончательный вариант HTML 2.0, единственным серьезным усовершенствованием в котором был механизм бланков (форм) для отсылки информации с компьютера пользователя на сервер, был официально утвержден лишь в сентябре 1995 г., когда в W3C уже полным ходом шло обсуждение HTML 3 (или, как его называли поначалу, "HTML+").

Проект HTML 3 – самая яркая и неоднозначная страница в истории языка. Работа над ним началась в марте 1995 г., и первоначальный вариант стандарта включал в себя много интересных нововведений – теги для создания таблиц, разметки математических формул, вставки обтекаемых текстом рисунков, примечаний и др. Но самое главное - HTML 3.0 был попыткой разрешить уже достаточно очевидное к тому времени противоречие между идеологией структурной разметки и потребностями пользователей, заинтересованных в первую очередь в гибких и богатых возможностях визуального представления.

Чтобы разрешить это противоречие, не оскверняя заветов отцов-основателей HTML, авторы версии 3 ввели в ней поддержку нового средства – так называемых иерархических стилевых спецификаций (Cascading Style Sheets, CSS). Система CSS формально независима от HTML, имеет совершенно иной синтаксис (более того, HTML 3 можно стыковать с разными реализациями CSS, обладающими разным синтаксисом и возможностями), не наследует никаких идеологических ограничений и позволяет, уже в совершенно иных терминах, задавать параметры визуального представления для любого тега HTML.

А между тем коммерческое освоение WWW не заставило себя долго ждать. В начале 1994 г. группа разработчиков браузера Mosaic под предводительством Джеймса Кларка, основала корпорацию Netscape Communications и вскоре выпустила первую версию коммерческого браузера Netscape Navigator. Вскоре после этого начался экспоненциальный рост WWW, продолжающийся по сей день. Чтобы закрепить лидерство и привлечь новых пользователей, Netscape, увы, вводила в HTML все новые и новые усовершенствования, – и эти усовершенствования поддерживались только браузером Netscape Navigator. Практически все новые теги, в изобилии предлагавшиеся Netscape, были направлены на улучшение внешнего вида документа и расширение возможностей его форматирования.

Такая политика компании, с одной стороны, принесла ей быстрый и впечатляющий успех (одно время версии Netscape Navigator составляли более 90% всех используемых браузеров), а с другой – вызвала ожесточенное сопротивление наиболее сознательной части HTML-сообщества. Энтузиасты неустанно разъясняли каждому, кто согласен был их слушать, что HTML по природе своей не имеет права зависеть от какого-то конкретного браузера и что заявления типа эту страницу лучше всего смотреть в Netscape Navigator являются насмешкой над здравым смыслом.

В конце 1995 г. ситуация в мире HTML была довольно смутной. Популярность браузера Netscape неуклонно росла; программисты этой фирмы готовили к выпуску версию 2.0, которая должна была утвердить господство Netscape. В этот переломный момент в игру вступил новый участник – всемогущая корпорация Microsoft. Долгое время эта компания, привыкшая монопольно владеть своим сектором рынка, недооценивала перспективы Internet и не собиралась как-либо участвовать в развитии этой информационной среды, однако невероятный взлет Netscape заставил Microsoft изменить мнение.

Поначалу мало кто верил, что браузер Microsoft Internet Explorer, который тогда существовал в версии 2.0 и не представлял собой ничего выдающегося, сможет составить конкуренцию Netscape. Тем не менее выпущенная летом 1996 г. версия Internet Explorer 3.0, которая поддерживала почти все расширения Netscape и обладала оригинальным и привлекательным интерфейсом, вызвала настоящий бум и очень быстро утвердилась в качестве "второго главного браузера".

Одновременно с разработкой конкурентоспособного браузера Microsoft решила навести порядок и в мире HTML. Взяв под свою опеку W3C, она напитала его денежными и людскими ресурсами и тем самым заработала право едва ли не решающего голоса в этой организации. Проект HTML 3 был заморожен, а вместо него в сжатые сроки создан стандарт HTML 3.2, утверждённый 14 января 1997 года.

Весной 1998 был издан HTML 4.0 как Рекомендация W3C. Он предлагал три версии:
- Strict (Строгий) – не допускал элементов, которые не входили в стандарт. Стандарт предназначен для новых документов.
- Transitional (Транзитный, ранее назывался свободным) – переходная форма, допускающая элементы, исключенные из стандарта, но ранее использовавшиеся.
- Frameset - в котором разрешены главным образом только связанные элементы (рамки).
Эти же самые различия относятся к XHTML 1 также.

HTML 4.0 узаконил многое из того, что самовольно ввели создатели браузеров, но в то же самое время стремился постепенно сократить визуальные особенности Netscape, отмечая их как осуждаемые в пользу листов стиля. Версия Transitional допускает многие элементы, которые исключены из версии Strict, а именно: underline (подчеркивание – u) – можно перепутать с оформлением ссылок и strike-through – перечеркнутый; некоторые тэги в Strict исключены, так как заменены оформлением с использованием CSS – center (центр), font (шрифт), basefont, background (фон), bgcolor, align (выровняйте), noshade, nowrap и другие.

В апреле 1998 HTML 4.0 был переиздан с незначительными поправками. В Декабре 1999 HTML 4.01 был издан как Рекомендация W3C. Его последние исправления были изданы 12 мая 2001г. В январе 2000 года издана XHTML 1.0 как Рекомендация W3C. Эта версия пересмотрена в августе 2002 г. XHTML 2.0 был рабочим проектом. В мае 2000 г. HTML 4.01 Strict был издан как международный эталон ISO/IEC (Международной организации по стандартизации). С 2000 г. по середину 2000-х годов шла работа по созданию нового языка XHTML, в котором предусмотрены математические формулы, расширенная технология форм и прочее. К 2008 г. HTML 4.01 и ISO/IEC 15445:2000 являются новыми версиями HTML. Работа над XHTML 2.0 была оставлена в 2009 в пользу работы над HTML5 и XHTML5 [3].

В 2007 г. началась работа по выработке нового стандарта HTML. В январе 2008 г. HTML5 был издан как Рабочий Проект W3C. Предполагалось, что HTML5 будет утвержден W3C в 2008 г., затем срок перенесли на конец 2010 года. Но в январе 2011 года HTML5 оставался все ещё в стадии рабочего проекта в W3C. Ян Хиксон из компании Google является редактором HTML5. В 2012 г. многие части спецификации были стабильны и могли быть реализованы в продуктах.

Основной целью HTML5 является улучшить язык, поддерживающий работу с новейшими мультимедийными приложениями, при этом сохраняется лёгкость чтения кода для человека и ясность исполнения для компьютеров и приспособлений (веб-браузеры, синтаксические анализаторы и т. д.). Полная спецификация HTML5 (по плану) должна появиться в 2014 г. [1].

Вот и дошли до текущего момента времени, когда писалась эта статья... (май 2014).

3. Основные отличия нового HTML от старого

Первым, и наверное, главным отличием следует отметить отличия в синтаксисе. HTML 5 будет иметь два синтаксиса - custom HTML и XML. HTML синтаксис определяет детализированные правила синтаксического анализа (включая обработку ошибок). Пользовательские агенты будут следовать этим правилам для документов, имеющих MIME тип text/html. XML синтаксис совместим с документами XHTML1 и его реализациями. Чтобы использовать этот синтаксис нужно объявить MIME тип XML, а элементы должны быть выстроены согласно спецификации XML [4].

Для синтаксиса HTML разработчики могут использовать три способа установки кодировки:
- на транспортном уровне. При использовании Content-Type HTTP заголовка, например.
- используя символ Unicode Byte Order Mark (BOM) в начале файла. Этот символ обеспечивает сигнатуру используемого кодирования.
- используя мета тег с атрибутом charset, который должен быть определен как первый дочерний элемент head.

Введены новые элементы (просто так, для примера, хороший список):
- section представляет часть документа или раздел;
- article представляет независимую часть содержания для включения в документ статей;
- aside представляет часть содержания, которая только частично связана с остальной страницей;
- header представляет заголовок section;
- footer – нижний колонтитул, может содержать информацию об авторе, авторском праве и так далее;
- nav представляет раздел документа, предназначенный для навигации;
- dialog может использоваться для выделения диалогов;
- figure может использоваться для связи заголовка с медиа контентом;
- audio и video для мультимедиа. Оба обеспечивают соответствующий API. Таким образом разработчики могут писать скрипты собственного пользовательского интерфейса, но также предусмотрен способ вызова стандартного API пользовательского агента. Вместе с этими элементами может быть использован source, если есть возможность организовать параллельные потоки.
- embed используется для контента plugin'ов.
- meter – для представления единиц измерений.
- time – дата и/или время.
- canvas используется для динамической отрисовки графики.
- command представляет команду, которую может вызвать пользователь.
- datagrid – интерактивное представление списка типа дерево или табличных данных.
- details представляет дополнительную информацию, которую пользователь может получить по требованию.
- datalist вместе с новым атрибутом list используется чтобы сделать combobox.
- datatemplate, rule, и nest обеспечивают механизм шаблонов (templating mechanism) для HTML.
- event-source используется для перехвата событий, посланных сервером.
- output представляет определенный тип вывода, например, от вычислений, сделанных через скрипт.
- progress представляет ход выполнения задачи, например, загрузки.
- Атрибут type элемента input теперь имеет следующие новые значения: datetime, datetime-local, date, month, week, time, number, range, email, url.

HTML 5 вводит несколько новых атрибутов для элементов, которые уже входили в HTML 4. На этот раз не буду их расписывать. Просто ограничимся тем, что они есть. Слишком много текста выходит.

Следующие элементы не включены в HTML 5, потому что их эффект достигается использованием CSS: basefont, big, center, font, s, strike, tt, u.

Следующие элементы не включены в HTML 5, потому что их использование негативно сказывалось на удобстве и доступности: frame, frameset, noframes.

Отменён большой набор атрибутов, список которых тоже не влезет сюда, а также большая часть оставшихся неотменёнными атрибутов была перенесена в CSS, точнее их реализация возможна только средствами CSS поскольку в нём они лучше обрабатываются, а потому были исключены из HTML.

HTML 5 вводит множество API, которые должны помочь в создании Web приложений. Они могут использоваться вместе с новыми элементами.

HTML 5 расширил интерфейс HTMLDocument. Интерфейс теперь реализован на всех объектах интерфейса Document. Имеет новые методы. Интерфейс HTMLElement также получил несколько расширений.

4. Новые возможности

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

Идея относительно введённых новых типов состоит в том, что пользовательский агент может обеспечить интерфейс для таких объектов как календарь (выбор даты), интеграции с адресной книгой и предоставить серверу данные в определенном формате. Это дает определенные преимущества как пользователям, так и разработчикам, поскольку пользовательский ввод проверяется перед посылкой на сервер браузером. Это означает, что разработчикам нет необходимости расходовать ресурсы на проверку введенных данных, что, в свою очередь, приводит к сокращению времени ожидания ответа [6].

В HTML5 определен элемент <canvas> как растровый холст, который может быть использован для отображения диаграмм, игровой графики или изображений на лету. Холст это прямоугольная область на вашей странице, где с помощью JavaScript можно рисовать что пожелаете.

До HTML5 не существовало стандартного способа сделать это, фактически, любое видео, что вы видели в Интернете, было добавлено через сторонние плагины вроде QuickTime, RealPlayer или Flash (на YouTube используется именно он). Эти плагины достаточно хорошо интегрированы с браузером, поэтому вы могли даже не знать, что их используете. Но это до тех пор, пока не попытаетесь посмотреть видео на платформе без поддержки плагина. HTML5 определяет стандартный способ вставки видео на веб-страницу с помощью элемента <video>.

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

Веб-приложения в HTML5 получили возможность использовать на компьютере пользователя локальное хранилище, позволяющее ускорить процесс работы с некоторыми большими объёмами данных, которые ранее нужно было бы каждый раз загружать заново. HTML5-хранилище базируется на именах пар ключ/значение. Вы сохраняете информацию, основываясь на имени ключа, а затем можете получить эти данные с тем же ключом. Имя ключа это строка. Данные могут быть любого типа, который поддерживает JavaScript, включая строки, логические, целые числа или числа с плавающей запятой. Однако в действительности данные хранятся в виде строки. Если вы сохраняете и извлекаете не строки, то надо будет использовать такие функции как parseInt() или parseFloat(), чтобы перевести полученные данные в корректные типы JavaScript. Эта технология позволяет использовать оффлайновые веб-приложения, т.е. сохранять веб-приложения и необходимые им данные на локальный компьютер и пользоваться этими приложениями будучи не подключённым к сети.

HTML5 определяет более десятка новых типов полей, которые вы можете использовать в своих формах. Использовать имеется в виду что их можно использовать прямо сейчас – без каких-либо прокладок, хаков или обходных путей. Однако эти новые возможности поддерживаются не всеми браузерами. В современных браузерах, да, ваши формы покажут все, на что они способны. Но в старых браузерах ваши формы по-прежнему будут работать, хотя и не в полной мере. Но кто пользуется старыми браузерами, когда они умеют автообновляться?

5. Личный опыт и релевантные работы на сайте магистров

Сам лично ознакомился с HTML5 по мере того как изучал HTML как таковой. После того, как изучил все основные конструкции HTML 4.0, XHTML 1.0, CSS 2.0, следующим стал HTML5. Никаких серьёзных проектов с его использованием я не создавал, пока не доводилось. В целях самообучения были созданы несколько простых страниц, оформленных в соответствии со стандартами HTML5.

Отдельное спасибо сайту htmlbook.ru, с помощью которого я изучал язык HTML.

Среди результатов поиска по сайту магистров из релевантных работ можно упомянуть только одну: А. Черняев HTML5 и CSS3: будущее интернета [5]. Во всех остальных найденных работах, html5 упоминается мимолётно и не является объектом описания.

6. Список использованных источников

  1. Википедия. HTML5 [Электронный ресурс]. – Режим доступа: http://ru.wikipedia.org/...
  2. Кирсанов Д. Краткая история HTML [Электронный ресурс]. – Режим доступа: http://www.osp.ru/...
  3. Регетт Д. Краткая история HTML [Электронный ресурс]. – Режим доступа: http://htmleditors.ru/...
  4. HTML 5: отличия от HTML 4 [Электронный ресурс]. – Режим доступа: http://easywebscripts.net/...
  5. Черняев А. HTML5 и CSS3: будущее интернета [Электронный ресурс]. – Режим доступа: http://masters.donntu.ru/...

    7. Список полезных ресурсов

  6. htmlbook.ru – HTML5 [Электронный ресурс]. – Режим доступа: http://htmlbook.ru/...

  7. Wisdomweb.ru – учебник HTML5 [Электронный ресурс]. – Режим доступа: http://www.wisdomweb.ru/...
  8. Избегаем распространённых ошибок в HTML5 разметке. Статья на habrahabr.ru [Электронный ресурс]. – Режим доступа: http://habrahabr.ru/...