И так давайте рассмотрим, какие обновления пришли в новую редакцию языка гипертекстовой разметки HTML. В обновлении языка до версии HTML5, наконец-то стал не нужен плагин Adobe Flash, снизилась потребность использования языка JavaScript. Были введены инструменты такие как (семантические элементы, новые типы контроля за вводом данных, обработчики событий и API), что упростило разработку веб – приложений.
Работы над новой версий HTML5 начались в 2004 году и в настоящее время продолжается усилиями двух групп W3C и WHATWG. Основными игроками кто стоит у истоков разработки стандарта HTML5 являются разработчики браузеров Apple, Mozilla, Opera которые и сформировали группу WHATWG (Web Hypertext Application Technology Working Group). В 2006 году компания, специализирующаяся на стандартизации W3C собрала свою группу по разработке HTML5 на основе стандарта, созданного ранее группой WHATWG. Версии W3C и WHATWG имели незначительные различия между спецификациями языка, но чтобы избежать конкуренции, W3C и WHATWG договорились сотрудничать для развития единого стандарта. В 2017 году компании подписали меморандум, согласна которому, ведущую роль в развитии стандарта HTML и DOM принадлежит WHATWG, а W3C отправила своих представителей участвовать над разработкой и утверждает стандарты WHATWG как свои официальные рекомендации.
Расшифровка аббревиатур.
API – (Application Programming Interface) «программный интерфейс приложения ». Проще говоря, это набор инструментов, который позволяет приложениям взаимодействовать между собой.
DOM – (Document Object Model — «объектная модель документа») – представляет собой дерево, формируемое структурой документа. Это независящий от платформы и языка программный интерфейс, позволяющий программам и скриптам получить доступ к содержимому HTML-, XHTML- и XML-документов, а также изменять содержимое, структуру и оформление таких документов.
Семантические элементы в HTML5
В отличие от старой версии HTML 4.01 в новой версии добавлены новые теги. Новые элементы позволяют нам создать разметку контента страницы уже с учетом новой семантики, а не как раньше используя костыли, в виде прописывания атрибута у тега DIV, создавая таким образам псевдо разметку (пример ниже).
Пример блочной верстки с использованием тега DIV и прописыванием ему атрибутов.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Блочная верстка</title>
</head>
<body>
<div class="content">
<div class="box">
<h2>Заголовок блока</h2>
<p>Содержимое блока</p>
</div>
<div class="box">
<h2>Заголовок блока</h2>
<p>Содержимое блока</p>
</div>
</div>
</body>
</html>А вот пример верстки, новыми элементами семантики.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Заголовок страницы</title>
</head>
<body>
<header class="main-header">
<!— Шапка сайта —>
<nav> Навигация сайта</nav>
</header>
<main>
<!— Основное содержимое страницы —>
</main>
<footer class="main-footer">
<!— Подвал сайта —>
</footer>
</body>
</html>Устаревшие элементы языка HTML 4.01
Активное взаимодействия новой версии HTML5 и CSS, привело к устареванию многих атрибутов, что просматривалось еще ранее, начиная с версии 4.01. Элементы были признаны устаревшими и вызывали проблемы или вовсе больше не поддерживались браузерами, что приводило к некорректному отображению страниц примеры: acronym, applet, big, center, dir, font, strike и др.
Библиотека возможностей API интерфейса HTML5
С ростом популярности интерактивного контента, отображаемого на веб – страницах, в HTML5 были введены элементы API, что упрощает создание веб – приложений. Данные нововведения позволяют разработчикам выполнять задачи, используя мощные возможности API – интерфейса.
Спецификации W3C HTML5 предлагают новые API – интерфейсы.
- Media API. Воспроизведение видео и аудио файлов с синхронизацией мультимедиа и отображением субтитров. Применяется вместе с новыми элементами video и audio.
- Session History API. Отображает журнал (историю) браузера.
- Canvas API. Создание рисунков в двумерной плоскости, используя вместе с новым элементом canvas.
- Geolocation API. Позволяет получить доступ пользователям к информации к географическим координатам, используя сценарии в веб – приложениях.
- File API. Позволяет получить доступ к файлам, переданным при вводе данных в форму. Также позволяет просматривать загруженные файлы, отображать их и выполнять загрузку простым перетаскиванием.
Я описал лишь несколько наиболее популярных API.
По мере изучения мы еще вернемся к данной теме и рассмотрим ее на рабочем примере в будущих статьях.
Поддержка языка HTML5 в браузерах.
В данный момент большинство семантических элементов и атрибутов HTML5 поддерживаются современными браузерами, которые установлены на компьютерах и телефонах пользователей (Chrome, Safari, Opera, Firefox и др.). Для браузеров, которые не поддерживают новые элементы API, обычно применяют полизаполнение (заплатки) имитирующие поддержку HTML5.
Чтобы обеспечить совместимость устаревших браузеров, таких как Internet Explorer 8, 9 и др. с новыми элементами HTML5,применяется сценарий языка JavaScript. Например, если выполнить следующею команду, то можно создать элемент section:
document .createElement (“section”);
Эта заплатка позволит браузеру воспринимать соответствующие стили и сценарии как HTML5.
Поддерживает ли браузер вашу разметку?
Как мы уже поняли из выше сказанного, последнее слово остается за разработчиками браузеров. Только от них зависит, какие элементы стандарта будут, поддерживаются браузерами уже сейчас, а какие только будут приняты, не говоря уже о поддержке в старых версий браузеров, которыми пользуются до сих пор.
Но к радости разработчиков существует веб – сайт caniuse.com, благодаря которому мы можем справиться с этой проблемой. Этот ресурс, позволяет узнать, какие браузеры поддерживают ту или иную функцию. Подробно как работать сданным ресурсом мы разберем в отдельной статье.