HTML5 – это пятая версия HTML, языка разметки, используемого веб-браузерами для визуализации кода. В ней реализован ряд улучшений в возможностях веб-сайтов, разработке веб-контента и многом другом. В этой статье рассказывается о значении, элементах и преимуществах HTML5.
Язык HTML5: что это?
HTML5 – это пятая версия языка гипертекстовой разметки (HTML), используемого веб-браузерами для визуализации кода. В ней реализован ряд улучшений в возможностях веб-сайтов, разработке веб-контента и многом другом.
Эволюция HTML
На заре существования Всемирной паутины ведущие создатели веб-браузеров Microsoft Internet Explorer и Mosaic Netscape разрабатывали специфические элементы. Они были нужны для улучшения внешнего вида веб-страниц в их браузерах. К концу 1990-х годов они создали отдельные версии веб-сайтов для Internet Explorer и Netscape.
Именно в 1996 году недавно созданный Консорциум Всемирной паутины (W3C) рекомендовал создать стандарт HTML 3.2. Этот стандарт охватывал широко используемые в то время элементы HTML. Он также включал презентационные расширения HTML. Например, такие как центральные элементы и шрифты, созданные в ходе “браузерной войны” Internet Explorer-Netscape.
Вскоре появились HTML 4.0 (1998) и HTML 4.01 (1999). В них подчеркивалось разделение представления и структуры, а также повышалась доступность. В этих обновлениях элементы представления были перенесены в недавно созданный стандарт каскадных таблиц стилей (CSS).
Язык HTML5: появление
Вскоре после начала тысячелетия представители Mozilla, Opera и Apple объединились для создания рабочей группы по технологии веб-гипертекстовых приложений (WHATWG). Целью этой организации, отличной от W3C, было совершенствование разработки HTML. Это нужно было сделать таким образом, чтобы язык мог отвечать новым требованиям. А новые требования возникали в результате реальной авторской практики и поведения браузеров. Web Applications 1.0 и Web Forms 1.0, первоначальные документы WHATWG, были объединены для создания HTML5.
Сегодня WHATWG поддерживает “живой” стандарт HTML, который не классифицируется с помощью цифр. Работа WHATWG также послужила основой для создания W3C собственной рабочей группы HTML5. HTML5 официально получил статус “Рекомендации” в октябре 2014 года.
Спецификации стандарта HTML5 поддерживаются обеими организациями наряду друг с другом. Что иногда приводит к небольшим несоответствиям. Большинство разработчиков браузеров полагаются на версию WHATWG для справки о реализации.
HTML 4.01 Strict, версия без презентационных элементов и других устаревших атрибутов, послужила основой для HTML5. Это привело к тому, что большинство HTML5 создается с использованием тех же совместимых с браузерами элементов, которые использовались годами ранее. В нем также появилось множество новых элементов и глобальных атрибутов, а многие устаревшие атрибуты и элементы из HTML 4.01 стали неактуальными. Ключевой особенностью HTML5 является включение стандартного протокола для обработки браузерами устаревшей и неправильно сформированной разметки.
Язык HTML5: отличия
До этого обновления HTML фокусировался на элементах, используемых для разметки контента для визуализации веб-страниц. HTML5 продвигается вперед, предлагая множество новых методов для выполнения задач. В случае с предыдущими версиями HTML эти задачи требовали специального программирования или использования проприетарных плагинов, таких как Silverlight или Flash.
Возможности HTML5 включают элементы разметки и сценариев, а также интерфейсы прикладного программирования (API) для таких функций, как добавление видео и аудио на страницу, локальное хранение данных, автономные операции и использование данных о местоположении. Благодаря тому, что в HTML5 реализованы стандартные функции веб-разработки, командам разработчиков не нужно создавать функциональность с нуля для каждого приложения, а можно полагаться на встроенные возможности браузера.
Язык HTML5: преимущества
Мы уже видели, как элементы, представленные в HTML5, облегчают интеграцию мультимедийного контента и повышают семантическую ценность. Теперь мы подробнее рассмотрим преимущества HTML5.
1. Семантическое обогащение
Семантическая разметка описывает разметку, которая связана с определенным смыслом, а не просто создает определенный визуальный результат. Например, тег <h1> четко выделяет основной заголовок веб-страницы. Хотя можно добиться того же результата, сделав текст заголовка жирным и крупным с помощью соответствующих тегов форматирования вместо тега <h1>, семантический смысл не будет сохранен.
В предыдущих версиях HTML также присутствовала семантическая разметка, такая как теги заголовков, link rel и метаданные doc. Однако общие структурные элементы, такие как навигационные меню, заголовки страниц и основные разделы контента, не были семантически дифференцированы. Вместо этого все они использовали тег <div>.
HTML5 решает эту проблему с помощью множества новых семантических элементов, таких как <header>, <main>, <section>, <nav>, <aside>, <article> и <footer>. Кроме того, новые встроенные семантические элементы, такие как <address> и <time>, помогают таким онлайн-сервисам, как поисковые системы, быстро находить нужные данные на странице. Существующие строчные разметки, такие как жирный, курсив и подчеркивание, также были усовершенствованы и теперь связаны с конкретными семантическими значениями.
2. Богатый мультимедийный опыт без плагинов
С ростом скорости Интернета богатые мультимедийные возможности стали основной частью онлайн-опыта. Если изначально HTML служил языком разметки для гипертекстовых документов (и, возможно, нескольких изображений), то в HTML5 реализована поддержка богатых медиа с помощью таких элементов, как <video> и <audio>.
Помимо функциональности и удобства для разработчиков, у этой возможности есть еще одно преимущество: отказ от плагинов. К недостаткам плагинов, таких как Java и Flash, относятся низкая производительность, меньшее количество пользовательских опций, недостатки безопасности и отсутствие видимости в поисковых системах.
Кроме того, HTML5 предоставляет пользователям новые элементы форм и превосходную интеграцию с CSS и JavaScript, упрощая создание полномасштабных мультимедийных веб-приложений без использования плагинов.
3. Совместимость с XML
Благодаря XML-сериализации HTML5 (также известной как XHTML5), код может быть написан с использованием более “строгого” синтаксиса XML. Это полезно для разработчиков, которые предпочитают аккуратность, предлагаемую хорошо сформированным XHTML, включая значения атрибутов в кавычках, имена элементов в нижнем регистре и закрытие всех элементов. В тех случаях, когда предполагается, что код будет работать с другими XML-приложениями, документы HTML5 должны быть представлены в формате XML.
4. Разделение дизайна и содержимого
Помимо поощрения семантической разметки, HTML5 не поощряет бессмысленную разметку, которая предназначена только для того, чтобы помочь браузеру визуализировать материал (вспомните объявления для шрифта, цвета текста, выравнивания текста и так далее). В этом стандарте устарели многие элементы, которые позволяли такую визуализацию, а те немногие, которые поддерживаются, отображают предупреждения “не рекомендуется использовать”.
Разделение дизайна и контента упрощает обслуживание и редизайн сайта, так как декларациями стилей занимается CSS. Кроме того, дизайнерские решения, которые хорошо смотрятся на одной платформе (скажем, на настольном компьютере), не обязательно будут хорошо смотреться на другой (мобильной). HTML5 решает эту проблему, предоставляя семантический контекст и позволяя адаптировать контент.
5. Доступность и отзывчивость дизайна
Ранние итерации HTML не были совместимы с многочисленными размерами и соотношениями сторон экрана современных технологий. К ним относятся мобильные телефоны, планшеты, электронные читалки, вспомогательные технологии, такие как преобразователи текста в речь, программы для чтения с экрана, которые подавляют стилистику, увеличивая при этом контрастность текста, и переводчики Брайля. Эти технологии сдерживались разметкой, которая пыталась “жестко закодировать” стиль и дизайн в содержимом страницы.
Однако благодаря семантическим тегам и доступным богатым интернет-приложениям (ARIA) создание доступных и отзывчивых веб-сайтов стало намного проще с HTML5. Например, устройства чтения с экрана могут легче интерпретировать содержимое HTML5, что облегчает просмотр веб-сайтов для людей с ослабленным зрением.
6. Интерфейсы прикладного программирования
Ранние спецификации HTML описывали только элементы, значения и атрибуты, допустимые в языке. Это подходило для простых текстовых сайтов, но мало помогало в создании веб-приложений, требующих программирования и написания сценариев.
HTML5 совершил большой скачок, определив множество новых API, которые упрощают взаимодействие с приложениями. В нем появились API для функциональности, для которой раньше требовались плагины или настраиваемый код, включая веб-хранилище, перетаскивание, геолокацию и микроданные.
Это помогло стандартизировать конкретные механики, упростить сложные задачи кодирования и позволить разработчикам добавлять функциональность, которая работает в браузерах на разных платформах без проблем.
7. Постоянное локальное хранилище
HTML5 поддерживает локальное хранилище браузера, которое представляет собой гибрид между cookies и клиентскими базами данных. Эта функция позволяет браузерам поддерживать хранение данных в нескольких окнах одновременно. Что, в свою очередь, повышает безопасность и производительность. А также обеспечивает сохранность данных даже после закрытия браузера.
Постоянное локальное хранилище позволяет работать в автономном режиме и предотвращает негативное влияние удаления файлов cookie на работу браузера, поскольку клиентское хранилище данных на базе HTML5 теперь поддерживается большинством современных браузеров. Это также позволяет приложениям, использующим функциональность HTML5, а не сторонние плагины, работать без сбоев.
Заключение: язык html5
Компании, занимающие первые позиции в области технологий, уже переходят на HTML5. Скоро этот язык разметки станет основным для всех. Ни один онлайн-бизнес не может позволить себе игнорировать этот стандарт, если он надеется оставаться актуальным. Переходите на HTML5 и воспользуйтесь его передовыми возможностями привлечения, удобством и доступностью.
