Введение в HTML5

С тех пор как Интернет стал популярным в 90-х годах, HTML (язык гипертекстовой разметки) был стандартным языком для структурирования, объединения в сеть и предоставления кросс-платформенного контента во Всемирной паутине. Разработка последующих редакций была, по сути, отложена на второй план после публикации HTML 4.01 в декабре 1999 года. Однако сам Интернет не испытывал такого замедления. Сегодня работа в сети значительно отличается от того, что было на рубеже тысячелетий. Помимо текстов и картинок, мультимедийные элементы делают современный интернет таким, какой он есть. Добавьте сюда растущую популярность мобильных устройств, и станет ясно, что современный меняющийся интернет-ландшафт уже давно перерос язык разметки прошлого века.

Такое развитие событий заставило веб-сайты полагаться на разнообразные плагины, чтобы помочь им удовлетворить требования программистов, издателей и потребителей. Побочным эффектом этого импровизированного решения стало то, что пробелы в безопасности и несовместимость становятся все более частым явлением. Пятая версия HTML должна помочь положить конец этим неудобствам. В октябре 2014 года Консорциум Всемирной паутины (W3C) раскрыл базовую основу HTML5, который должен стать основным языком для WWW. Но не все приняли последнюю версию. Значительная часть операторов веб-сайтов по-прежнему работает на старой версии или перешла на компромиссные варианты, такие как XHTML. Скоро все это изменится.

Разработка HTML5

В отличие от своего предшественника, пятая часть языка гипертекстовой разметки является продуктом двух разных групп разработчиков. Решение W3C отложить дальнейшее развитие HTML 4.01, вместо этого сделав выбор в пользу XHTML, привело к тому, что многие организации были возмущены таким шагом комитета по стандартизации. Это отставание в разработке новых веб-стандартов оказалось бельмом на глазу у компаний-разработчиков программного обеспечения и браузеров. После этого была создана новая рабочая группа, Web Hypertext Application Technology Working Group (WHATWG), целью которой было продолжить разработку стандартов HTML и уделить больше внимания встраиванию приложений. В 2004 году WHATWG представила свою первую версию HTML5. Этого оказалось достаточно, чтобы убедить W3C создать рабочую группу с целью продолжения разработки HTML5 на основе версии WHATWG. В 2009 году W3C объявила о своем решении прекратить разработку XHTML и вместо этого сосредоточиться на спецификациях HTML5 вместе с WHATWG.

Почему HTML5?

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

Именно здесь HTML5 по-настоящему раскрывает свои возможности: в дополнение к тегам HTML с угловыми скобками, HTML5 содержит определенные метки (см. ниже), мультимедийные элементы, а также бесчисленные программные интерфейсы пользователя (интерфейсы прикладного программирования, API), которые доступны в сочетании с JavaScript. Проприетарные плагины от частных поставщиков, такие как Adobe Flash, скоро уйдут в прошлое. Программисты HTML5 могут работать независимо от компаний-разработчиков программного обеспечения, что позволяет им разрабатывать безопасные, безбарьерные веб-сайты.Ниже представлен обзор некоторых центральных элементов HTML.

Новые элементы HTML

Одним из революционных достижений HTML5 является введение элементов для семантической разметки. Если HTML 4.01 допускал лишь грубые варианты структурирования с помощью различных элементов div, то специальные теги <section>, <nav>, <article>, <aside>, <header>, <footer> или <main> позволяют определить, какой тип содержимого связан с каждым соответствующим элементом.

Тег

Функция

<секция>

Определяет раздел в документе HTML5.

<nav>

Определяет раздел как навигационную панель. Как правило, здесь размещаются ссылки на подстраницы.

<article>

Определяет раздел как отдельное содержимое в документе HTML5.

<в сторону>

Определяет раздел как побочное примечание.

<header>

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

<footer>

Определяет раздел как нижний колонтитул. Обычно здесь размещается контактная информация или уведомления об авторских правах.

<main>

Характеризует раздел как основное содержание сайта. Тег main может быть использован только один раз в документе HTML5.

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

Интеграция мультимедиа

С помощью HTML добавлять видео- и аудиофайлы так же просто, как и изображения. Элементы HTML5 <audio> и <video> устраняют необходимость использования плагинов.

Тег

Функция

<аудио>

Помечает файл как аудиофайл.

<видео>

Помечает видеоконтент, включая его звуковую дорожку.

Интерфейс программирования

Программисты могут интегрировать объекты JavaScript в качестве API в документы HTML5. Ниже представлена подборка таких элементов HTML5, которые облегчают программистам выполнение основных требований современного веб-дизайна.

API

Функция

Холст

С помощью элемента canvas программисты могут определить определенную область документа HTML5; это позволяет добавлять динамическую растровую графику с помощью JavaScript. Помимо линий, прямоугольников и круговых кривых, этот элемент также поддерживает кривые Безье, цветовые градиенты и графику в форматах PNG, GIF и JPEG. Одно из классических применений <canvas> включает в себя интеграцию диаграмм. Примеры могут быть самыми разными — от сложных приложений до онлайн-игр.

Перетаскивание

Перетаскивание позволяет перемещать объекты внутри документа HTML5 или между двумя веб-сайтами.

Автономные приложения

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

Геолокация

В HTML5 функция Geolocation позволяет узнать текущее местоположение посетителей сайта. При загрузке HTML5-страницы с Geolocation API у пользователей спрашивают, хотят ли они сообщить свое текущее местоположение.     

Работа с HTML5

В Интернете существует множество учебных пособий по HTML5, которые показывают пользователям, как работать с новым языком разметки. Одной из отличных отправных точек является веб-сайт. Подборку полезных ресурсов для веб-разработчиков также предоставляет Mozilla Developer Network. Язык тегов обычно поддерживается текущими версиями наиболее популярных веб-редакторов, что избавляет от необходимости приобретать специальный редактор HTML5. Как и в случае с каждым официальным веб-стандартом, W3C также предоставляет услугу проверки разметки. Этот инструмент позволяет пользователям проверять правильно сформированную HTML-разметку, что является важным шагом в обеспечении высокого качества. 

Оцените статью
cdelat.ru
Добавить комментарий