HTML5 простыми словами. Введение в HTML5

Последнее обновление: 08.04.2016

HTML (HyperText Markup Language) представляет язык разметки гипертекста, используемый преимущественно для создания документов в сети интернет. HTML начал свой путь в начале 90-х годов как примитивный язык для создания веб-страниц, и в настоящий момент уже трудно представить себе интернет без HTML. Подавляющее большинство сайтов так или иначе используют HTML.

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

Что именно привнес HTML5?

HTML5 определяет новый алгоритм парсинга для создания структуры DOM

добавление новых элементов и тегов, как например, элементы video , audio и ряд других

переопределение правил и семантики уже существовавших элементов HTML

Фактически с добавлением новых функций HTML5 стал не просто новой версией языка разметки для создания веб-страниц, но и фактически платформой для создания приложений, а область его использования вышла далеко за пределы веб-среды интернет: HTML5 применяется также для создания мобильных приложений под Android, iOS, Windows Mobile и даже для создания десктопных приложений для обычных компьютеров (в частности, в ОС Windows 8/8.1/10).

В итоге, как правило, HTML 5 применяется преимущественно в двух значениях:

HTML 5 как обновленный язык разметки гипертекста, некоторое развитие предыдущей версии HTML 4

HTML 5 как мощная платформа для создания веб-приложений, которая включает не только непосредственно язык разметки гипертекста, обновленный HTML, но и язык программирования JavaScript и каскадные таблицы стилей CSS 3.

Кто отвечает за развитие HTML5? Этим занимается World Wide Web Consortium (сокращенно W3C - Консорциум Всемирной Паутины) - независимая международная организация, которая определяет стандарт HTML5 в виде спецификаций. Текущую полную спецификацию на английском языке можно посмотреть по адресу https://www.w3.org/TR/html5/ . И надо отметить, что организация продолжает работать над HTML5, выпуская обновления к спецификации.

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

Надо отметить, что между спецификацией HTML5 и использованием этой технологии в веб-браузерах всегда был разрыв. Большинство браузеров стало внедрять стандарты HTML5 еще до их официальной публикации. И к текущему моменту большинство последних версий браузеров поддерживают большинство функциональностей HTML5 (Google Chrome, Firefox, Opera, Internet Explorer 11, Microsoft Edge). В то же время многие старые браузеры, как например, Internet Explorer 8 и более младшие версии, не поддерживают стандарты, а IE 9, 10 поддерживает лишь частично.

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

Для проверки поддержки HTML5 конкретным браузером можно использовать специальный сервис http://html5test.com .

Необходимые инструменты

Что потребуется для работы с HTML5? В первую очередь, текстовый редактор, чтобы набирать текст веб-страниц на html. На данный момент наиболее популярным и продвинутым текстовым редактором является Notepad++ , который можно найти по адресу http://notepad-plus-plus.org/ . К его преимуществам можно отнести бесплатность, подсветка тегов html. В дальнейшем я буду ориентироваться именно на этот текстовый редактор.

Также стоит упомянуть кроссплатформенный текстовый редактор Visual Studio Code . Данный редактор обладает несколько большими возможностями, чем Notepad++, и кроме того, может работать не только в ОС Windows, но и в MacOS и в операционных системах на основе Linux.

И также потребуется веб-браузер для запуска и проверки написанных веб-страничек. В качестве веб-браузера можно взять последнюю версию любого из распространенных браузеров - Google Chrome, Mozilla Firefox, Microsoft Edge, Opera.

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

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

Также важно не забывать, что так называемые "демо-HTML» с самим HTML5 не имеют ровным счетом ничего общего. Например, во многом из Google Doodles используется DHTML — технология HTML 4 начала 2000х.

Зачем придумали HTML5?

HTML4 трещал по швам под напором новых видов приложений. Многие вещи были просто недоступны и требовали плагинов типа Adobe Flash или Microsoft Silverlight. Приходилось идти на всяческие уловки и ухищрения, использовать нестандартные, недокументированные приемы, что было не очень-то надежной основой для сайтов, созданных для заработка.

Как много браузеров поддерживают HTML5?

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

А с другой стороны, если вы хотите знать, какие браузеры содержат все свойства ядра HTML5 — то ни один. Они все обеспечивают выполнение некоторых частей спецификации (которая насчитывает более 700 страниц), но ни один не поддерживает все одновременно.

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

Кто является движущей силой HTML5?

Началось все в 2004 году, в Opera, под руководством Яна Хиксона. Постепенно присоединились и другие браузеры. Хиксон ушел из Оперы в Google, где продолжает работать над спецификацией.

Будет справедливо сказать, что производители браузеров совместно координируют работу над спецификацией, равно как и W3C и многие другие организации и частные лица. Говоря обобщенно, процессом руководят потребности веб-разработчиков.

Кто пользуется HTML5?

Множество людей и компаний: Boston Globe Newspaper ; Nationwide Building Society , Yell.com и сотни других. На HTML5gallery.com собрано множество сайтов, применяющих HTML5-технологии.

Когда будет завершена работа над HTML5?

Возможно, в 2012 году. А может и в 2022. Это не так важно, важно другое: он сегодня уже поддерживается браузерами, а, следовательно, мы можем использовать его уже сегодня.

Сказать, что мы не можем пользоваться HTML5, потому что его развитие не завершено — это все равно, что сказать, что мы не можем говорить на русском языке, потому что он все еще развивается.

Правда ли, что HTML5 несовместим с Internet Explorer?

Абсолютная ерунда. IE9 хорошо поддерживает HTML5. В более старые браузеры можно добавить поддержку некоторых API с помощью JavaScript -технологии polyfilling, а также плагинов Flash и Silverlight. Элемент canvas может работать некорректно в версиях IE ниже 9. В основном, причиной проблем в старых браузерах является медленный движок JavaScript. Для отображения видео в старых браузерах можно использовать резервный Flash-вариант.

Стоит отметить, что многие возможности HTML5, такие, как атрибут contenteditable, позволяющий пользователю редактировать содержимое объекта, были придуманы Microsoft и включены уже в IE5.

Правда ли, что HTML5 предназначен для мобильных устройств?

Совершенно нет. В основе HTML5 лежат определенные принципы разработки , один из которых гласит о повсеместном его применении:

«Элементы должны разрабатываться для повсеместного использования... Элементы, по возможности, должны работать независимо от платформы, устройства и носителя.»

С другой стороны, есть особенности HTML5, которые особенно полезны в свете использования мобильных устройств. Если рассматривать «настоящий» HTML5, очень полезной окажется, к примеру, возможность продолжать работать с сайтом в оффлайне с помощью технологии Application Cache (“Appcache”).

Также преимуществом является возможность использовать элемент canvas для отображения анимации устройствами, которые по той или иной причине не могут использовать Flash.

Если рассматривать HTML5 в значении «новые супер-веб-технологии», то огромным плюсом является геолокация.

Вытеснит ли HTML5 Adobe Flash?

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

Apple приняли решение не включать поддержку Flash своими iOS устройствами, что дает огромный толчок видео HTML5. Однако, стоит заметить, что iOS — не самая лучшая платформа и для HTML5.

Flash в любом случае остается полезным кросс-браузерным инструментом. к тому же, следует понимать, что Flash — это больше, чем просто видео. Некоторые простые его функции, используемые в играх, перехвачены HTML5 canvas, а часть примитивных анимаций, для которых он ранее использовался, перекочевала в CSS3. Однако, из соображений удобства создателей тонкой анимации, используемой в играх и мультфильмах, конечно, лучше пользоваться Flash , в котором куда более удобный интерфейс, упрощающий разработчикам многие рабочие моменты. Со временем, когда будут разработаны удобные оболочки для работы с canvas это изменится, но еще не сегодня и не завтра.

Комментарии

1. емеля
   4 октября 2011 в 22:29

   html1 *THUMBS UP*

   Olga Ответ:
   октября 5, 2011 at 11:26 дп

   Wdtime.ru Ответ:
   февраля 20, 2016 at 10:32 пп

   Полный список структурных тегов HTML 5 — wdtime.ru/blog/strukturnye-tegi-html-5

2. маргарита
   5 октября 2011 в 14:01

   емеля — дурачок, вы что, сказки не читали? :-D

3. Бублик
   25 ноября 2011 в 14:47

   жаль что некоторые пользователи немогут понять что есть браузеры лучше internet explorera:(

   Olga Ответ:
   ноября 25, 2011 at 4:03 пп

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

   Бублик Ответ:
   ноября 25, 2011 at 4:11 пп

Cообщить об ошибке

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

Программа способна не только конвертировать видео, но и редактировать его (переворачивать, обрезать). Перед сохранением результата можно запустить готовое видео в режиме предпросмотра. Следует отметить, что приложение позволяет выбрать «скин» проигрывателя, который будет интегрирован в браузер.

Основные возможности

• Конвертация нескольких файлов;
• Работа со всеми популярными видеоформатами;
• Отключение ПК после окончания процесса преобразования;
• Возможность выбора каталога для сохранения результата;
• Предпросмотр измененного видео;
• Возможность настройки внешнего вида проигрывателя;
• Настройка качества конвертируемого видео файла;
• Возможность обрезки ролика;
• Совместимость со всеми популярными браузерами.

Преимущества

Приложение html5 video player появилось не так давно, но уже успело завоевать популярность, благодаря своим преимуществам. Главным достоинством программки можно считать то, что она способна работать со всеми популярными видео форматами. Это значит, что на свой сайт можно «залить» любой фильм (ролик).

Еще одним преимуществом можно считать совместимость с браузером Internet Explorer, Safari, Opera, Google Chrome, а также Firefox. При этом вы можете перед сохранением файла проверить, как он будет воспроизводиться в том или ином интернет-обозревателе.

Проигрыватель html5 является кроссплатформенным приложением. Его можно установить не только на ПК, который управляется ОС Windows, но и на мобильные устройства Android и iOS. Таким образом, публиковать видео возможно сразу с телефона.

Скачать html5 video player можно совершенно бесплатно. При этом на сайте разработчика имеется русскоязычная версия плеера. Благодаря этому пользователям будет проще разобраться с работой программки.

Благодаря html5 видео, загружаемое на веб-сайты можно просматривать без установки Flash Player. Поэтому программу можно встретить в списке самых скачиваемых плееров. В качестве дополнения, разработчики предоставляют возможность пользователям изменять внешний вид проигрывателя на сайте.

Недостатки

Что касается недостатков html5 video player, то он всего один. Конвертируемые файлы оптимизированы только под web-стандарт. Это значит, что видео html5 будет неудобно смотреть локально. В остальном недостатков у программки не обнаружено.

Следует заметить, что эта программа будет интересна только владельцам сайтов и web-мастерам. Для обычного пользователя, видеоплеер не представляет ценности.

Как скачать плеер

Чтобы скачать видеоплеер, необходимо посетить веб-сайт разработчика. Для этого требуется перейти по следующему URL-адресу: «https://www.dvdvideosoft.com/». Чтобы было удобнее пользоваться сайтом, рекомендуется сменить язык. Это можно сделать, кликнув по флажку, расположенном в правом верхнем углу. После чего необходимо выбрать русский язык.

Когда интернет-ресурс будет русифицирован, нужно кликнуть по ссылке «Скачать». Сразу после этого откроется страница со всеми доступными продуктами. Чтобы загрузить проигрыватель, следует опуститься до раздела «Другие программы».

На следующем шаге, необходимо кликнуть по названию конвертера. Открывшаяся станица демонстрирует информацию о проигрывателе. Чтобы загрузить программу, требуется опуститься в самый низ веб-страницы, а затем кликнуть по кнопке «Скачать». Теперь остается только установить программный продукт.

Принцип работы

Когда программа загрузится, вы увидите русскоязычный, интуитивно понятный интерфейс. При помощи навигационной панели вы можете:

• Добавить файлы;
• Указать выходное имя;
• Удалить файл;
• Настроить плеер.

После того как файл для конвертировании будет выбран, рекомендуется указать каталог в который сохранится готовый результат. Также необходимо задать формат конвертируемого видео.

Чтобы ознакомиться с результатом, требуется установить галку напротив пункта «Показать HTML…». Для преобразования фалов, нужно кликнуть по кнопке «Конвертировать».

Следует отметить, что имеется возможность изменить настройки самой программы, для этого нужно нажать на кнопку «Опции…».

Заключение

Веб-мастера занимающиеся сайтостроением, должны понимать принцип работы html5. Так как сайты с Flash анимацией (видео) уходят на второй план, поэтому без видеоплеера-конвертера не обойтись. С управлением проигрывателя справится даже начинающий пользователь. Важно отметить, что существуют и платные аналоги, способные конвертировать html5 видео. При необходимости можно воспользоваться ими.

Видео обзор проигрывателя HTML5

Наверняка, после всего сказанного, у вас появится вопрос «как мне узнать поддерживает ли мой браузер новую версию HTML ?» Это хороший вопрос, требующий скорейшего ответа. Ведь прежде чем тестировать новые возможности, рассматривать новые теги, в первую очередь необходимо узнать, возможно ли это вообще. Например, в HTML 5 существует поддержка видео или графики. Однако нет смысла пробовать внедрить в страничку видео, если оно не поддерживается программно.

К счастью, в Интернете есть хороший ресурс – HTML 5 test . com , который поможет вам в этой ситуации. Он проанализирует данные о вашем браузере и расскажет, какие новые теги версии HTML 5 браузер поддерживает, а какие нет. Также здесь можно посмотреть краткую информацию и о других браузерах, сравнить данные и сделать соответствующие выводы.

К примеру, при тестировании браузера Mozilla Firefox 8.0 для ОС Ubuntu C anonical 1.0 через сайт www.HTML 5 test . com суммарное количество баллов составило 330 (+ 9 бонусных очков) из 475 (табл. 8.1).

Это не так много по сравнению с браузером Google Chrome 16.0, у которого 373 очка (+15 бонусных очков). Но достаточно много по сравнению с браузером Microsoft Internet Explorer 9, у которого всего 141 очко (+ 5 бонусных очков) (табл. 8.2).

В табл. 8.1. приводятся примеры тех нововведений, в которых есть недочеты. Те технологии, которые приведены на английском языке, находятся в разработке или разработаны W 3C . На сайте-анализаторе также есть ссылки на соответствующие страницы. Все остальные моменты, введенные в версии HTML 5, полностью поддерживаются указанным выше браузером.

Таблица 8.1

Данные по браузеру Mozilla Firefox 8.0

Таблица 8.2

Даные по браузерам

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

Так или иначе, настоящий веб-разработчик никогда не будет писать программу под какой-то конкретный браузер, понимая, что в других его детище работать не будет. Если, конечно, иное не указано в техническом задании, и если хочется, чтобы работа была видна всем.

Поэтому, если вы решили сделать нечто потрясающее, обязательно ответьте на вопрос «в каких браузерах это будет работать?» и только потом, взвесив все за и против, приступайте к работе .

Теперь, когда вы осознали важность проверки вашего браузера на совместимость с новым стандартом HTML 5, рассмотрим несколько новых возможностей, а именно – взаимодействие с видео- и аудиоинформацией.