Статьи » Обзор » Новые возможности с HTML 5
HTML 5

Четвертая версия языка разметки html была создана еще в далеком 1997 году. С тех пор прошло уже 15 лет, и за это время представление информации на страницах сайтов изменилось кардинально. Современный интернет это обилие мультимедийных сайтов, масса разнообразного контента, к сожалению одного html для реализации поставленной задачи тут недостаточно, разработчикам приходится обращаться к дополнительным решениям, таким как java-скрипты, flash.

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

Структура HTML 5

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

<div>, позиционирование которого управляется в каскадных таблицах (css). Если смотреть на страницу глазами браузера, они не могут нести какой-либо смысловой нагрузки. В основе html 5 заложены «смысловые» блоки для формирования страницы. То есть, теперь для отображения информации в «шапке» сайта используется тег <header>, в «подвале» ресурса - <footer>. Причем это касается не только основной страницы, тег <header> может быть использован в теле тега <article> (статьи), тем самым сформировав «шапку» статьи, указав в ней автора статьи, дату публикации и прочее.

Для работы с мультимедийной частью сайта можно использовать теги

<display>, тем самым указав браузеру что в теле тега содержится контент, его, по желанию пользователя, можно скрыть или отобразить. Для отображения информации при свернутом блоке <display> используется вложенный в него тег <summary>.

Благодаря такому подходу, со временем, можно полностью отказаться от применения небезопасного JavaScript.

Работа с веб-формами так же описана в HTML 5, причем на более высоком уровне, чем это позволяла предыдущая версия языка разметки. Если раньше правильность заполнения формы проверялась на стороне клиента (JavaScript), то в HTML 5 реализован механизм, отчасти реализующий проверку заполнения самостоятельно.

К примеру, указав для элемента

<input> тип данных «date» мы укажем браузеру, что по клику он обязан отобразить мини-календарь, в котором пользователь укажет необходимую для данной ситуации дату, будь то день рождения, или дату следования поезда (приобретая посадочный талон).

Для ввода числовых значений можно использовать тип «number», причем некоторые браузеры автоматически отобразят стрелки, для увеличения или уменьшения числового значения, введенного в поле, а используя параметры min и max можно задать минимальное число для ввода, и максимальное соответственно.

Указав «range» как тип, мы создадим полоску со слайдером, изменять числовое значение которого можно с помощью мыши (перетаскивая слайдер), параметры min и max так же будут регулировать минимум и максимум.

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

html5 в Chrome
Отображение элементов HTML 5 в браузере Chrome

html5 в Firefox
Отображение элементов HTML 5 в браузере FireFox

Онлайн тесты показывают, что лучше всего HTML5 поддерживает 17-я версия браузера Chrome (359 баллов), хуже всего IE8 (41 балл), хотя уже 9 версия показывает результат в 141 балл. На втором месте с количеством 329 баллов браузер Opera, на третьем FireFox (315 баллов), после следует Safari5 – 302 балла.

Мультимедийные возможности HTML5

Для работы с Flash и подобными технологиями в браузере должны быть установлены сторонние плагины, обеспечивающие поддержку. HTML 5 способен все это отобразить собственными средствами, для просмотра видеоролика предназначен тег

<video>. Дополнительные атрибуты «src» и «control» указывают ссылку на видео-файл, и кнопки управления соответственно (стоит отметить, что вид управляющих элементов описывается каскадными таблицами стилей - css). Как видите, симпатичный видеоплеер можно создать всего лишь средствами html.

Однако, реальность далека от идеала, так как разработчики основных представителей интернет-браузеров никак не придут к единому согласию по поводу использования аудио- видео-кодеков. К примеру Internet Explorer и Safari используют H.264, а вот Chrome, FireFox и Opera предпочитают OGG Theora и созданным Google – WebM. Поэтому гарантия, что все посетители Вашего сайта увидят ролик, отсутствует.

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

<canvas> создавать их, и работать с ними. С его помсощью можно рисовать линии, работать с заливкой фигур, масштабировать картинки, вращать их. Фактически изображения создаются с помощью JavaScript. Благодаря этому тег <canvas> может отображать не только статику, но и динамически изменяемые изображения, а это позволяет создавать как красочные демонстрационные материалы, так и игры.

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

Поддержка формата

На сегодняшний день, основные элементы HTML 5 поддерживаются всеми последними версиями популярных браузеров. Исключение составляют браузеры Internet Explorer, где поддержка нового стандарта пока оставляет желать лучшего. Благодаря частым обновлениям FireFox и Chrome, пользователи этих интернет-браузеров уже сейчас могут во всей красоте оценить достоинства нового формата html-разметки.

Все права сохранены © Каталог бесплатных программ

Перепубликация материалов возможна только с устного или письменного разрешения администрации сайта!