HTML5 продолжает начатое еще в первых версиях HTML и служит для объединения различных объектов в интернете. Но сейчас мы соединяем уже не только гипертекст со статическими изображениями. Ввиду этого, в HTML5 было представлено введение таких элементов, как аудио и видео, что само по себе является естественным развитием данного языка разметки.
Примечание: в более правильном смысле, аудио и видео заменяют объект и весь встраиваемый код, который люди годами загружают на веб-страницы. Тем не менее эти элементы работают таким образом, чтобы перетаскивать ссылку на страницу, а не отправлять вас в другое место. В этом смысле даже элемент img является в некотором роде не чем иным, как встроенным элементом: он захватывает контент из другого места и внедряет его в страницу. Все это просто ссылки, соединенные вместе. И именно для этого HTML и предназначен.
Теперь вы можете вставлять изображения, аудио и видео прямо в документ. Что еще более важно, поскольку эти объекты теперь имеют элементы первого порядка, вы можете легко манипулировать аудио и видео из JavaScript. Короче говоря, элемент первого порядка всегда будет стимулировать более прямой программный доступ.
HTML5 позволяет интегрировать больше ресурсов в один документ, сохраняя целостность и разделение этих активов на месте.
HTML5-соединения
Все вышесказанное перетекает в следующие установки:
Веб-страницы больше не должны выглядеть (и вести себя) как веб-страницы
Рост Flash за последние годы был в значительной степени попыткой преодолеть «ограничения» того, что позволяет HTML. Первоначально Flash был ориентирован на анимацию и интересные визуальные эффекты. Но затем во Flash были внедрены целые сайты, что позволило использовать различные типы навигации и организации страниц, более богатый программный доступ к отдельным частям веб-страницы и возможность избежать необычных особенностей JavaScript.
Веб-страницы больше не должны представлять контент одного человека/организации
Несмотря на то, что веб-программисты и дизайнеры годами извлекали изображения с других сайтов, веб-страницы по-прежнему в значительной степени однородны с точки зрения владения активами. Сегодня веб-страница действительно содержит контент, изображения, страницы, мультимедиа и тому подобное одного человека. Даже такие сайты, как Vimeo и YouTube, чаще используются в качестве расширений частного репозитория, чем в качестве реального бесплатного носителя для доступа к миру.
Веб-страницы могут легко функционировать на мобильных платформах
Ни для кого не секрет, что смартфоны стали своеобразной рекламной площадкой для HTML5, который продвигал свой функционал на этих устройствах. Но история не в том, что HTML5 имеет отличную поддержку мобильных устройств; скорее, мобильный телефон больше не является проблемным ребенком. Другими словами, то, что работает в компьютерном браузере, в значительной степени работает и на телефоне. Телефоны и планшеты являются первоклассными девайсами, потому что они относятся к тем же соединениям, перечисленным выше.
HTML5 вводит парадигму, которая отходит от обоих этих ограничений. Во-первых, HTML5 и CSS3 предоставляют для JavaScript довольно солидный рабочий набор инструментов и эффектов, сравнимый с большинством Flash-сайтов. Обычно мы можем взять Flash-сайт среднего размера и воссоздать его на WordPress, HTML5, JavaScript (через jQuery) и CSS3 за неделю, если не меньше. И преимущества такой перестройки огромны: текст снова выбирается, закладки работают без заморочек, и, конечно, владельцы сайтов могут обновлять свои собственные сайты, вместо того чтобы полагаться на чрезмерно занятого Flash-программиста, к которому они обычно обращаются за помощью.
В результате HTML5 снова является наиболее удобным и индексируемым инструментом, доступным для веб-контента; но этот контент уже богаче, чем когда-либо прежде. Кроме того, этот контент больше не должен принадлежать кому-то в той степени, в какой должны были принадлежать старые веб-страницы.
Отличия от HTML4 и новые теги
HTML4 зарекомендовал себя очень хорошо, но у него явно есть ряд недостатков. Именно их и постаралась устранить команда, работавшая над HTML5. Основополагающими принципами новой версии языка стали:
- Меньшая зависимость от плагинов для раскрытия функциональности;
- Сценарии должны быть заменены разметкой, когда это возможно;
- Независимость от устройства (т. е. доступность на всех устройствах и обеспечение одинакового конечного опыта);
- Процесс общественного развития, чтобы люди могли видеть, что происходит.
В частности, HTML5 добавляет целую кучу новых тегов разметки:
- Теги <header> и <footer> помогают изолировать верх и низ блоков контента. Могут использоваться более одного раза на одной странице;
- Тег <article>, который служит для идентификации конкретной единичной части содержимого, например, сообщение в блоге или комментарий пользователя;
- Тег <nav> для указания того, какие разделы следует считать навигационными блоками;
- Тег <section>, позволяющий определить общий раздел содержимого; похож на ранее существовавший тег <div>;
- Теги <audio> и <video> для обозначения включения аудио или видео контента;
- Тег <canvas>, который позволяет рисовать графику с использованием отдельного языка сценариев;
- Тег <embed> для встраивания внешнего контента или приложений на страницу.
- HTML5 также не поддерживает некоторые старые теги: <acronym>, <applet>, <font>, <frame>, <frameset>, <noframes> и несколько других.
Новые возможности
Кроме добавления новых тегов, HTML5 представляет и расширенный функционал, поддержку новых возможностей и способов взаимодействия с мультимедиа:
- Перетаскивание. Позволяет перетаскивать любой элемент на странице, чтобы вы могли определить, что перетаскивать, куда перетаскивать и к чему это приведет;
- Локальное хранилище. Новейший и самый эффективный в кэшировании, HTML5 Local Storage API является отличной заменой куки, делая его незаменимым, когда дело доходит до кэшируемой информации. Гибридный метод хранения файлов cookie в облаке означает, что информация сохраняется даже при закрытом браузере. Содержимое сохраняется для последующего просмотра, в следствии чего страницы загружаются быстрее;
- Кэш приложения. API, который позволяет пользователю получить доступ к веб-приложению без подключения, создав его автономную версию. Это снижает нагрузку на сервер, ускоряет его работу и позволяет просматривать информацию без подключения;
- Web workers. Скрипты Java, которые работают в фоновом режиме, отделены от любых других сценариев, которые позволяют пользователю иметь доступ к сайту и переходить в нужные разделы, не дожидаясь загрузки сценариев;
- SSE. Отправленные сервером события теперь исключают необходимость запроса сайтом обновлений с сервера. Эти автоматические обновления отправляются посредством одностороннего обмена сообщениями, чтобы сайт мог загружать свежий контент, например, обновления Twitter, цены на акции или новостные ленты;
- Новые мультимедийные элементы. Новые теги для аудио и видео означают, что ваши медиафайлы воспроизводятся так, как вы хотите;
- Новые семантические элементы. HTML является языком разметки описания или «семантики», что означает, что он маркирует логические, структурные части сайта в своем коде. В HTML4 отсутствие хорошо структурированных семантических элементов, таких как <section> или <footer>, означало, что поисковым системам было очень трудно узнать, что есть на веб-странице. Новые семантические элементы HTML5, такие как <header>, <nav> и <article>, делают разделы страницы кристально чистыми;
- HTML5 Canvas, CSS3 и новые графические элементы. Появившись с HTML5 и наряду с ним, CSS3 добавляет новые стандарты дизайна и новые функции. HTML5 также добавил новые графические элементы, такие как <canvas>, который позволяет рисовать через JavaScript в браузере, и <svg> или «масштабируемая векторная графика» (2D-графика на основе XML);
- Функции определения местоположения. HTML5 может задействовать информацию о местоположении, позволяя браузерам получать доступ к местоположению пользователя через телефон GPS, IP-адрес и т. д.
Взаимодействие с JavaScript
Идея о том, что HTML-страница представляет собой нечто большее, чем просто организацию гибких элементов, не является чем-то новым, но HTML5, похоже, является очевидной отправной точкой для программистов на JavaScript и веб-разработчиков, которые еще не сделали этот концептуальный скачок. Примечательно, что с появлением CMS, таких как WordPress, для небольших компаний и личных веб-сайтов, почти все теперь знакомы с разделением проблем, когда даже текст HTML-страницы не обязательно кодируется и хранится в статическом HTML-файле. Будучи программистом на JavaScript, вы бы наверняка предпочли иметь больший программный контроль и создать страницу, которая построена на основе пользовательских решений, логики на основе базы данных и программирования для одного человека с помощью HTML или текстового редактора.
И на самом деле, наиболее очевидным примером такого подхода является сайт Twitter. Но если вы присмотритесь поближе, просмотрев его исходный код, вы обнаружите сотни строк JavaScript в начале файла, еще больше JavaScript в конце файла. А небольшие фрагменты HTML втиснуты в середину. Вот примерно 1/3 этого HTML:
Теперь стоит отметить, что хотя в целом это хорошо (использование JavaScript для соединения организации HTML с контентом, не закодированным непосредственно в этот HTML), но развитие новых элементов HTML5 таким образом достигается торможением и деградацией такого рода программирования. По крайней мере, в том виде, в котором оно реализовано в настоящее время.
Это еще одна область, которую HTML5 стремится улучшить. Введение нескольких новых элементов (например, nav, header и footer) в значительной степени игнорировалось многими. Почему бы просто не продолжать использовать <div id=”nav”>? Что ж, теперь ответ должен быть очевиден: эти новые элементы обеспечивают дополнительное семантическое значение. Если вы ссылаетесь на чужую страницу или даже добавляете часть чужой страницы на свою, то можете получить чужой нижний колонтитул, навигацию, цифры и подписи к ним.