Что нового в html5. Пять вещей, которые надо знать об HTML5

HTML5 – новое поколения . С момента выхода рекомендации HTML 4.01 прошло уже более 10 лет (1999 год), а, стало быть, изменений и дополнений стоит ожидать достаточно много. Спецификация HTML5 на данный момент еще находится на стадии разработки. Консорциум всемирной паутины не разрабатывает стандарты, а выпускает лишь рекомендации. Начинается все с рабочих обсуждений, потом инициируется рабочий проект, потом выпускается кандидат на роль рекомендации и только потом спецификация окончательно получает статус рекомендации. Сейчас работы над HTML5 находятся еще на стадии рабочего проекта. Не смотря на это, большинство наиболее популярных интернет браузеров уже частично поддерживают нововведения HTML5. Перед тем, как сделать краткий их обзор повторюсь, что реализуют эту функциональность далеко не все браузеры и пока еще не в полном объеме. Сегодня мы можем рассчитывать на то, что в той или иной степени HTML5 поддерживают Opera, Chrome, Firefox, Safari и Internet Explorer.

Что нового в HTML5

А нового действительно много. Теперь веб-разработчики получат целый ряд дополнительных возможностей, таких как рисование геометрических фигур на веб-холсте, встроенную возможность перетаскивания элементов, воспроизведение видео и аудио файлов (раньше это можно было сделать только с использованием plug-in компонентов, таких как Adobe Flash Player) и многое другое, о чем будет сказано чуть позже. Для начала хотелось бы сказать пару слов об общих тенденциях развития HTML.

Та часть спецификации HTML5, которая “торчит” в виде новых тегов – это лишь “верхушка айсберга”. Большинство дополнительных возможностей HTML5 доступно только с использованием языка программирования сценариев , который является основой веб-программирования на стороне клиента. Если взять ту же функциональность рисования, реализованную с использованием тега , то речи не идет о “разметке рисунка” с использованием тегов геометрических фигур, как можно было бы предположить. Разметка холста заканчивается размещением элемента canvas на странице и все. Само рисование – это функция JavaScript, которая, получив доступ к холсту, будет выводить на нем фигуры примерно так же, как обычные приложения под Windows выводят графику на окна через интерфейсы GDI (Graphics Device Interface). Таким образом, спецификация HTML5 предъявляет достаточно серьезные требования к интернет браузерам в части реализации работы с JavaScript, которые во многом регламентируют программный интерфейс () работы с объектной моделью документа (DOM). Это не может не радовать, поскольку многие знают, что разные браузеры могут организовывать работу с объектной моделью через программные интерфейсы, отличающиеся друг от друга. Отчасти, спецификация программного интерфейса - это заслуга организации Web Hypertext Application Technology Working Group (WHATWG) , которая прикладывает усилия, направленные на стандартизацию не только языка разметки, но и API, используемого в приложениях, написанных на языках сценариев, таких как JavaScript. Организация WHATWG также участвует в разработке совместно с W3C.

Еще можно сделать вывод, что авторы HTML5 старались перенести реализацию некоторых популярных и востребованных задач веб-программирования в зону ответственности самих интернет браузеров. К примеру, используя HTML5, можно достаточно легко реализовать функциональность перетаскивания элементов, которая стала столь популярной в пользовательских интерфейсах интернет магазинов (выбор товаров в корзину). Раньше, для этого дела нужно было писать сценарий на JavaScript с использованием различного рода вспомогательных библиотек, таких как . Теперь реализовать перетаскивание намного легче, определив ряд дополнительных атрибутов и добавив несколько обработчиков событий для нужных вам тегов. Организация “drag&drop” с использованием jQuery тоже не отличается особой сложностью, но, в случае с HTML5, мы будем иметь дело с единой рекомендацией для всех программных интернет клиентов, а это уже совсем другой уровень поддержки и гарантии кроссбраузерности. Оказывается, что браузеры, поддерживающие рекомендации HTML5 теперь будут давать возможность сохранять и восстанавливать параметры сессии в контексте самого веб-сеанса. К примеру, при повторной загрузке страницы, введенная на ней ранее информация не будет потеряна, а будет восстановлена из окружения текущей сессии. Это уже “выход на территорию” веб-программирования на стороне сервера, поскольку ранее только средствами HTML и JavaScript этого сделать было нельзя.

Ну а теперь список наиболее заметных нововведений HTML5:

Рисование на веб-холсте или использование элемента canvas

Как уже было сказано, основная часть рекомендаций в части использования нового элемента - это спецификация программного интерфейса вывода на него графики. Для начала вы размещаете на странице тег определенной ширины и высоты, затем в коде JavaScript получаете к нему доступ (например, по id) и начинаете на нем рисовать. Рисование сводится к последовательному определению стиля линий strokeStyle , стиля заливки fillStyle и вызову методов рисования, таких как moveTo (перенести перо), lineTo (нарисовать отрезок), arc (нарисовать дугу) и т.д. Далее смотрите пример - простейший инструмент для рисования с помощью мыши. Ниже приведен его исходный код на JavaScript и HTML разметка. Для рисования "пером" нажмите левую кнопку мыши и водите курсором по холсту. В режиме "линии" или "полигоны" просто последовательно щелкайте по холсту, указывая тем самым вершины ломаных линий или площадных объектов.

Пример рисования на элементе canvas

Пример реализации операций рисования на элементе средствами HTML5.

Исходный JavaScript код

//Код текущей операции var operation=0; //Статус операции var active=false; //Начало графической операции function startOperation(e) { if (operation==0) return; if (active) return; var context = getContext(); context.strokeStyle = getColor("stroke"); context.fillStyle = getColor("fill"); context.beginPath(); var point = getPoint(e); context.moveTo(point.x, point.y); active = true; } //Завершение графической операции function stopOperation() { if (!active) return; var context = getContext(); context.closePath(); active = false; } //События мыши function mouseDown(e) { var e = e || window.event; if (!active) { startOperation(e); return; } else { var context = getContext(); var point = getPoint(e); context.lineTo(point.x, point.y); context.stroke(); if (operation == 3) context.fill(); } return true; } function mouseUp(e) { var e = e || window.event; if (!active || operation != 1) return; stopOperation(); return true; } function mouseMove(e) { var e = e || window.event; if (!active || operation != 1) return; var context = getContext(); var point = getPoint(e); context.lineTo(point.x, point.y); context.stroke(); return true; } function getColor(control) { var color = document.getElementById(control).value; if (color == "") color = "#000"; return color; } //Элемент canvas function getCanvas() { return document.getElementById("canvas"); } //Контекст вывода 2d графики на элемент canvas function getContext() { return getCanvas().getContext("2d"); } //Элемент "выбранная операция" function getSelected() { return document.getElementById("selected"); } //Относительные координаты курсора мыши function getPoint(e) { var x = event.pageX || event.x; var y = event.pageY || event.y; var rect = getCanvas().getBoundingClientRect(); var point = {}; point.x = x - rect.left; point.y = y - rect.top; return point; } //Выбор операции function selectOperation(code) { stopOperation(); operation = code; switch(operation) { case 1: { getSelected().innerText = "Выбрано: перо"; break; } case 2: { getSelected().innerText = "Выбрано: линии"; break; } case 3: { getSelected().innerText = "Выбрано: полигоны"; break; } } }

Исходный HTML код

перо линии полигоны Выбрано: цвет линий цвет заливки

Перетаскивание элементов

Это не что иное, как поддержка браузерами классической модели “drag and drop”, которая очень популярна в обычных приложениях с графическим интерфейсом. Для элементов, которые будете “перетаскивать” определяете атрибут draggable , а для элементов, на которые будете “бросать” перетаскиваемые элементы определяете обработчики событий ondragenter , ondragover и ondorp . Вот, собственно, и все. Пример ниже.

Пример drag and drop на HTML5 - "Баскетбольная корзина"

Пример реализации операций drag and drop (перетаскивание элементов) средствами HTML5.

Исходный HTML код

HTML5: Drag and Drop html, body { font-family: Arial font-size: 11px; } .basket { border: 1px solid #777; width: 105px; height: 120px; padding: 10px; border-radius:0 0 10px 10px; background-color: #eee; box-shadow: inset 0px 0px 5px #777; } .basket .ball { width: 30px; height: 30px; border-radius:15px; box-shadow: 5px 5px 10px #777; float: right; } .ball { border: 1px solid #FF7F50; width: 20px; height: 20px; border-radius:10px; background-color: #FF8C00; box-shadow: 0px 0px 5px #777; float: left; margin: 1px; } function startDrag(e) { var e = e || window.event; e.dataTransfer.setData("Ball", e.target.id); e.dataTransfer.effectAllowed="move"; return true; } function endDrag(e) { var e = e || window.event; e.dataTransfer.clearData("Ball"); return true; } function drop(e) { var e = e || window.event; e.target.appendChild(document.getElementById(e.dataTransfer.getData("Ball"))); e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true; return false; } ...

Воспроизведение видео и аудио файлов

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

Новые пользовательские элементы веб-форм

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

Пользовательские элементы управления

Варианты элемента с различными значениями атрибута type:

Если значение адреса не соответствует формату url , то после нажатия [подтвердить] браузер предпримет попытку его исправить. Если он этого сделать не сможет, то выведет сообщение об ошибке. Если значение электронной почты не соответствует формату email , то после нажатия [подтвердить] браузер либо исправит адрес, либо сообщит об ошибке ввода.

Визуализация числовых величин

Представление числовой величины в виде шкалы с возможностью указания интервалов ниже нормы low и выше нормы high , а также оптимальной величины optimum .

Элемент :

Визуализация процесса выполнения. Можно указать только максимальное max и текущее value значение.

Элемент Исходный HTML код

Число из интервала:

Целое число:

Дата и время:

Дата:

Время:

Месяц:

Неделя:

Цвет:

url:

email:

Управление историей просмотра страниц

Появится возможность самостоятельно управлять переходом по загруженным ранее страницам с использованием JavaScript и объекта history . Например, вызов window.history.length вернет “длину предыстории”, а вызовы window.history.back() , window.history.forward() или window.history.go(stepCount) осуществят соответствующие переходы. Далее небольшой пример:

Вперед>

Сохранение состояния сеанса работы

Эта замечательная функциональность позволит сохранять и восстанавливать данные сессии. Заполнили заказ, перешли на просмотр товара, вернулись (по ссылке) снова к заполнению заказа, а ранее введенные данные никуда не делись. Раньше, для того, чтобы обеспечить такое свойство страницы, без дополнительных усилий на стороне серверной части веб-приложения было не обойтись. Теперь будет возможность сохранять данные в контексте веб-сеанса (sessionStorage ) или локально в оперативной памяти браузера (localStorage ). Предполагается, что sessionStorage позволит сохранять данные, пока активен сеанс, в рамках которого они были инициализированы. Доступ к сохраненным данным может быть осуществлен с различных страниц сайта, загруженных браузером. Вариант с localStorage, судя по всему, должен сохранять данные, пока открыт сам браузер. Поскольку доступ к localStorage должен быть всегда, даже если нет связи с сервером, то и получить данные из localStorage сможет любая открытая браузером страница. Состояние сеанса работы в обоих случаях – это набор пар “ключ - значение”, доступ к которому осуществляется вызовами xxxStorage.setItem(key, value) и xxxStorage.getItem(key) .

Пример: В разделе о редактировании содержимого элементов с помощью нового атрибута contenteditable , появившегося в HTML5, есть. Ниже добавлены две кнопки, одна из которых сохраняет содержимое редактируемого блока, а вторая - его восстанавливает. Нажмите [Сохранить], отредактируйте содержимое блока и нажмите [Восстановить]. Если ваш браузер поддерживает функциональность HTML5 sessionStorage , то содержимое блока contenteditable будет восстановлено.

Восстановить

Сохранить Восстановить

Обмен сообщениями между страницами

Если ваша страница содержит элементы , которые загружают содержимое других страниц: не только страниц вашего сайта, но и страниц с абсолютно другого домена, то с внедрением рекомендаций HTML5 появится возможность обмениваться с такими окнами сообщениями. Страница, отправляющая сообщение делает это с использованием вызова функции window.postMessage(message, target) , а страница, принимающая сообщение должна содержать обработчик события “onmessage”, где она уже должна обработать текст сообщения event.data , если действительно является его адресатом – соответствует значению event.origin . До появления этого механизма, возможности общаться различным интернет ресурсам на стороне клиенте не было. Пример простейшей реализации общения двух страниц посредствам нового механизма сообщений HTML5 приведен далее. На первый взгляд может показаться, что ничего особенного в примере не происходит. Точнее не понятно, зачем все это нужно. На самом деле обмен сообщениями может стать популярным при создании информационных порталов, объединяющих в одном месте различные интернет сервисы. К примеру, пусть существует некий интернет сервис, услугами которого можно воспользоваться только после заполнения объемной электронной заявки. Также, пусть имеет место клиент, который довольно часто пользуется услугами этого сервиса, но его заявки каждый раз мало чем отличаются друг от друга (большинство параметров всегда одни и те же). Если бы подобный интернет сервис, помимо электронной формы для заполнения заявки поддерживал бы еще и “приемник сообщений” для автоматического оформления заказа на свои услуги, то его клиенты смогли бы “перетащить” окно этого сервиса на свои страницы (с использованием элемента ), создать там собственные (оптимизированные под себя) формы заполнения заявки и функции их отправки целевому сервису в виде сообщений. Большинство параметров в этом случае формировались бы автоматически, к примеру, реквизиты клиента. Безусловно, похожее общение можно реализовать посредством http запросов от клиента к серверу, в заголовке которых передавать требуемые параметры, но стоит заметить, что в случае с механизмом сообщений HTML5 трафик при передаче параметров нулевой, поскольку все происходит на стороне клиента.

Пример двух страниц, обменивающихся сообщениями

Пример реализации обмена сообщениями между страницами средствами HTML5.

Исходный код страницы - источника сообщений

function init() { document.getElementById("form").onsubmit = sendMessage; } function sendMessage() { var location = window.location; var message = document.getElementById("message").value; var target = document.getElementById("target"); target.contentWindow.postMessage(message, location.protocol+"//"+location.host); return false; } ...

message_source.html:

Не удалось загрузить messages_target.html!

Текст сообщения

Исходный код страницы - приемника сообщений

function init() { if (window.addEventListener) window.addEventListener("message", receiveMessage, false); else window.attachEvent("onmessage", receiveMessage); } function receiveMessage(event) { document.getElementById("target").innerHTML = event.data; document.getElementById("origin").innerHTML = "от " + event.origin; } ...

messages_target.html:

жду сообщения... от...

Редактирование содержимого элементов

Теперь с помощью определения атрибута contenteditable можно сделать редактируемым отдельные элементы разметки, например, блоки с текстом, списки и т.п. С помощью атрибута designmode можно сделать редактируемым всю страницу. Такая функциональность может быть полезна для организации обратной связи с владельцем ресурса, например, для заполнения и отправки ему заявления, заказа или чего-нибудь еще в этом роде. Вы создаете html страницу бланка в его первоначальном виде и отдаете пользователю для заполнения. После заполнения пользователь подтверждает введенные данные, и отредактированный документ отправляется на сервер. Пример редактируемой разметки приведен ниже:

Содержимое данного блока можно редактировать, поскольку для него определен атрибут contenteditable :

В ходе редактирования ячеек таблицы ширина колонок и высота строчек изменяется автоматически.

Для ввода нового элемента списка нажмите .

• Элемент списка 1
• Элемент списка 2
• Элемент списка 3

После добавления нового элемента в список нумерация будет обновлена автоматически.

Элемент нумерованного списка 1

Элемент нумерованного списка 2

Элемент нумерованного списка 3

Векторная графика

Ожидается поддержка SVG - языка разметки векторной графики на базе . Графика будет вставляться в разметку, что логично, с использованием тега , например вот так:

Если вы видите геометрические фигуры ниже, то значит ваш браузер уже поддерживает svg.

Математические выражения

Также ожидается поддержка MathML - языка разметки математических выражений на базе XML. Вот пример разметки формулы вычисления длины стороны треугольника по теореме косинусов:

a = b 2 + c 2 - 2 b c cos α

Если вы видите формулу с символом квадратного корня, то ваш браузер уже понимает MathML.

A = b 2 + c 2 - 2 b c cos α

Другие элементы разметки

В первую очередь хочется выделить группу новых элементов разметки страницы, которых в явном виде ранее не было. К ним относятся тег - статья, заметка, новость и т.д.; - заголовок статьи или верхний колонтитул - подвал или нижний колонтитул и - раздел или глава статьи. Для чего это нужно, если все то же самое можно сделать с помощью элементов различных классов? Нужно это для того, чтобы смысл вашей разметки был также понятен и тем, кто пытается ее анализировать. Я не про человека, читающего ваш текст (он разметку не видит, ему и без ее все понятно), а про автоматизированные системы и в первую очередь это относится к поисковым машинам. Семантическая нагрузка очень важна для поисковых машин при вычислении степени релевантности ваших страниц конкретному поисковому запросу. Отдельного внимания в этом контексте заслуживает элемент , поскольку он создан для того, чтобы выделить блок с основными навигационными ссылками на вашей странице. Возможно, поисковые машины будут как-то иначе относиться к подобным ссылкам. Ниже приведена сводная таблица с новыми тегами HTML5, которые добавляют разметке смысловой оттенок.

Тег Краткое описание

	Статья, новость, заметка, комментарий или любой другой вид отдельной публикации. Тег article объединяет информацию, относящуюся к одной теме или вопросу. Один элемент article может включать в себя другие элементы article (пример ниже).
	Ремарка, отступление. Тег aside также может быть использован для выделения части текста, не относящейся к основному содержанию страницы, например, для размещения рекламных объявлений.
	Раскрываемый по требованию блок детализации сведений.
	Подпись рисунка. Тег figcaption используется внутри тега figure .
	Рисунок с подписью. Данный элемент должен содержать изображение img и подпись figcaption .
	Нижний колонтитул. Тег footer имеет смысл также размещать внутри тега article для указания автора статьи или заметки.
	Заголовок страницы или введение к статье. При размещении внутри тега article в тег header можно включить заголовок, краткое описание публикации и ссылки на связанные материалы.
	Группировка заголовков h1 - h6 в многоуровневый заголовок.
	Пометка. Тег mark имеет смысла использовать, если вам необходимо выделить часть текста другим стилем и сослаться на него из другого места документа.
	Блок навигационных ссылок.
	Раздел страницы, глава статьи. При размещении внутри статьи (тег article ) может интерпретироваться, как отдельная ее глава.

Ниже представлен пример HTML разметки с использованием перечисленных тегов.

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

Не стоит использовать тег header только для того, чтобы разместить в нем один тег заголовка h1 - h6 точно также, как не нужно запихивать внутрь тегов-заголовков ничего кроме текста самих заголовков. Так делать не стоит : Название сайта

Не стоит использовать тег hgroup для создания групп заголовков из одного элемента. Каждый отдельно взятый элемент от h1 до h6 и так сам себе заголовок. Вот пример, как делать не нужно : Название сайта

Не стоит добавлять элементы section внутрь других элементов, если они будут включать в себя все основное содержание этих элементов. В приведенном выше примере внутри каждого комментария нет отдельных блоков section для выделения самого текста комментария. Вот пример лишнего элемента section :

Текст комментария

Опубликовано...

Не нужно понимать смысл элемента article буквально. Это не только статья, но и любая форма представления законченной мысли. Именно по этой причине комментарии к статье в приведенном ранее примере также выделены в отдельные блоки article .

Используйте структурные теги HTML5, только если уверены, что они помогут поисковым машинам больше узнать о семантике вашей разметки. Если тег не несет отдельного смысла, а добавлен только лишь для "красоты", то результат его добавления - это "лишний вес" вашей страницы, который, как известно, "вреден для здоровья" сайта.

На этом про новые возможности языка разметки гипертекста, которые должны появиться с выходом рекомендации HTML5 у меня все.

Введение

HTML 4 с нами уже примерно 10 лет. За это время не было серьезных шагов по его усовершенствованию. Конечно, появился XHTML, однако, он просто ужесточает правила и заставляет писать лучший и более качественный код. При этом, вы полностью заботитесь о соответствии стандарту. HTML 5 же призван сделать большее. Он добавляет серию очень важных нововведений.

Работа над HTML5 началась еще в далеком 2004-м, но только сейчас (2009) он начинает вызывать серьезный интерес. Увеличивается поддержка браузеров, а элемент, который мне больше всего нравится (CANVAS), поддерживается 4-мя из 5-ти наиболее распостраненных браузеров. Вместе с тем не совсем реально, хотя и возможно, использовать HTML 5, так как новый стандарт не поддерживается в MSIE.

Итак, что же нового в HTML 5?

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

и

Тег упрощает добавление видео клипов на HTML-страницы. Он может содержать атрибуты src, autoplay и loop. Тег также допускает задание текстового описания для видео (например, для незрячих людей). В идеале это должна быть полная текстовая интерпретация видео.

Тег очень похож на , но предназначен для аудио-файлов. Неожиданно, не правда ли?

Контекстные меню

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

Новые структурные элементы

Так как HTML 4 слабо структурирован, в 5-ю версию спецификации были добавлены новые элементы, призванные исправить этот недостаток:

• - секция, либо параграф.
• - верхний колонтитул страницы (не путать с )
• - нижний колонтитул страницы.
• - содержит набор ссылок на другие страницы. Например, вы можете расположить там навигацию по вашему сайту.
• - в этот тег может быть включена, например, статья блога.
• - может быть использован для предоставления дополнительной информации к текстовому блоку.
• - может быть использован, например, для создания диаграмм.

Новые inline-элементы

Стандарт HTML5 вводит новые элементы, которые позволяют специальным образом выделять фрагменты текста, содержащие время и числа:

• - помечает фрагмент текста. Можно, например, отметить найденные термы в списке результатов поиска.
• - можете использовать этот тег для вывода времени или даты в текстовом блоке.
• - для представления чисел в определенном диапазоне. Он может иметь различные атрибуты: value, min, max, low, high и optimum.
• Может быть использован для отображения индикатора состояния процесса. Имеет пару атрибутов: value и max.

Новые типы полей ввода

HTML5 добавляет ряд новых типов для полей ввода данных:

• datetime
• datetime-local
• month
• number
• range
• email

Некоторые из них широко применяются в пользовательских интерфейсах desktop-приложений. И, вероятнее всего, они будут уже хорошо знакомы всем вашим пользователям.

Устаревшие (deprecated) элементы

Следующие элементы HTML считаются устаревшими:

• acronym
• applet
• basefont
• center
• frame
• frameset
• isindex
• noframes
• noscript
• strike

Синтаксис для задания кодировки

Синтаксис для задания кодировки документа в HTML5 теперь выглядит очень просто:

Интерактивные нововведения

Несколько нововведений, которые сделают создание сайтов и web-приложений проще и приятнее:

• - дополнительная информация о чем либо. Например, данный тег может быть использован в браузерах для реализации подсказки. Тег может иметь атрибут open, указывающий будет ли содержимое тега изначально показано пользователю или нет.
• - В отличие от традиционных таблиц (которые задуманы как статические), этот тег может быть использован для представления интерактивного набора данных. Например, для таблицы с выбором строк или колонок, inline-редактированием данных, сортировкой и т.п.
• - ранее нерекомендуемый, тег вернулся в стандарт HTML5 в новом обличии. Теперь он может содержать, например, элементы , которые вызывают соответствующие команды. Этот элемент можно использовать для представления панели инструментов или контекстного меню (см. выше). Тег может иметь атрибуты label и icon. Они могут быть добавлены для создания многоуровнего меню.

Новое определение типа документа (DTD)

В HTML5 стало гораздо проще объявлять DTD: Объявление DTD стало более симпатичным и, я полагаю, проще запоминающимся. Скорее всего, это является результатом того, что HTML больше не связан с SGML.

Необязательный href в ссылках

Атрибут href теперь необязательный, поскольку ссылки могут использоваться в сочетании со сценариями. Вероятно, это будет полезно в web-приложениях.

Атрибут async

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

Заключение

Естественно, не все браузеры будут поддерживать весь стандарт целиком (думаю, читатель сейчас вспомнил о "любимом" MSIE). Но поддержка появится со временем. И новые элементы HTML 5 были разработаны с учетом текущей ситуации. С другой стороны, большинство браузеров уже частично поддерживают спецификацию. Так, например, тег поддерживается в Firefox, Opera, Chrome и Safari. Плюс, на сколько мне известно, Firefox 3.5 будет поддерживать теги и .

Так что, ждем с нетерпением.

Кому интересно, спецификацию HTML 5 можно найти по следующей ссылке -

Стандарт HTML5 все активнее используется в современном веб-дизайне. И хотя, он до сих пор находится в стадии разработки, многие из его стандартов уже утверждены и используются всеми современными браузерами, в том числе и мобильными.

В этой статье мы рассмотрим некоторые новые возможности HTML5 с конкретными примерами их применения на практике

Новый DOCTYPE

Давайте вспомним, как определяется типичный XHTML документ в разделе DOCTYPE :

‹!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"›

Объявление типа документа на языке разметки выглядит куда более лаконично и читабельно

‹!DOCTYPE html›

Более того, вы можете применять данный DOCTYPE при верстке любой страницы. Если браузер не знаком с HTML5, то он применит отобразит страницу в стандартном режиме.

Улучшенная семантика кода

Улучшенная семантика кода позволяет поисковым системам четко разграничивать на странице типы контента, отделять важную информацию, повышать рейтинг страницы по поисковым запросам.

Элементы Header и Footer

Теперь можно избавиться от конструкций типа

‹div id="header"› … ‹/div› ‹div id="footer"› … ‹/div›

И начать использовать более понятные как человеку, так и машине

‹header› … ‹/header› ‹footer› … ‹/footer›

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

Элемент FIGURE

Рассмотрим следующую часть кода:

‹img src="mars.jpg" alt="About Mars" /› ‹p›This is an image of Mars‹/p›

В данном случае поисковым системам сложно определить, что тег ‹p›, содержащий описание картинки, собственно и является ее описанием. Именно поэтому такие конструкции лучше объединять в общий контейнер, которым является ‹figure ›:

‹figure› ‹img src="mars.jpg" alt="About Mars" /› ‹figcaption› ‹p›This is an image of Mars‹/p› ‹/figcaption› ‹/figure›

В данном случае пристутсвует дополнительный тег ‹figcapture› , который уточняет, где содержимое фигуры, а где ее заголовок

Использование hgroup

Представьте, что у вас на сайте заголовок состоит из основного заголовка и подзаголовка. Использование обычных тегов ‹h1› и ‹h2› никак не отображает зависимость между двумя этими пунктами. Поэтому их можно объединить семантически, используя тег ‹hgroup› :

‹header› ‹hgroup› ‹h1›Photogallery‹/h1› ‹h2›Our vacancy in Prague‹/h2› ‹/hgroup› ‹/header›

Никаких types для подключения скриптов и таблиц стилей

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

‹link rel="stylesheet" href="stylesheet.css" type="text/css" /› ‹script src="script.js" type="text/javascript"›‹/script›

Так вот, теперь больше нет необходимости указывать тип подключаемого файла. Браузер определит его автоматически. А значит в атрибуте type больше нет необходимости:

‹link rel="stylesheet" href="stylesheet.css" /› ‹script src="script.js"›‹/script›

Структура кода

Стандарт XHTML предусматривал необходимость указывать значения атрибутов в одинарных или двойных кавычках. Стандарт HTML5 позволяет не использовать кавычки, если в них нет необходимости, т.е. значение атрибута задается одним словом без пробелов. Более того, вы можете даже не закрывать парные элементы. Вот пример:

‹p class=myClass id=pId›Content

Однако это может повредить читабельности кода со стороны разработчика. Поэтому стиль написания кода полностью зависит от вас, ведь старый (проверенный временем) стиль все так же поддерживается.

Редактируемый контент

HTML5 позволяет сделать контент вашего сайта полностью редактируемым, при этом нет необходимости вставлять скрытые поля для ввода текста. Все, что необходимо – это добавить атрибут contenteditable="true" (или без кавычек, как мы узнали из предыдущего пункта) к тому элементу, который вы хотите сделать доступным для редактирования. После этого, пользователь сможет редактировать его содержимое непосредственно со страницы.

В данном случае пользователь может добавлять, удалять и редактировать пункты неупорядоченного списка ‹ul› . Ниже приведен пример списка, пункты которого можно изменить

• Watch TV
• Listen to music
• Play videogames

Новые возможности форм

HTML5 предоставляет пользователям и разработчикам большие возможности по вводу информации в формы. В этих целях добавлены многие полезные вещи. Рассмотрим некоторые из них.

Поля для ввода email

Используйте атрибут type="email" к тегу ‹input› и e поля ввода появятся дополнительные уникальные способности по проверке правильности ввода адреса, и если адрес введен неверно, то браузер продемонстрирует пользователю предупреждающее сообщение.

‹input id="email" name="email" type="email" /›

Результат может быть таким (Google Chrome):

Также существуют и другие поля для ввода, например, адреса вебсайта или номера телефона. Принцип их работы схож с полем email .

Использование подсказок

Теперь нет необходимости использовать javascript для создания подсказок (placeholders) для ввода в текстовые поля. HTML5 предлагает использовать специальный атрибут placeholder , который может выводить фоновую текстовую подсказку для поля.

‹input name="email" type="email" placeholder="[email protected]" /›

Результат отображен ниже:

Данный пример будет работоспособен только в браузерах с поддержкой HTML5

Email:

Автофокус

Без использования javascript можно автоматически передать фокус элементу после загрузки страницы. Для этого нужно добавить атрибут без параметров тому полю, которое необходимо вводить в первую очередь.

‹input name="name" type="text" autofocus /›

Поле name будет активировано автоматически и готово для ввода текста.

Обязательные поля

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

‹input name="name" type="text" placeholder="John Smith" required /›

Ниже иллюстрация результата работы этого кода (Google Chrome):

Range Input

HTML5 представляет абсолютно новый элемент управления – range input , который представляет собой бегунок, значение которого изменяется перетягиванием специального маркера между установленными заранее значениями.

‹input type="range" name="quantity" min="0" max="100" step=".25" value="10" /›

Атрибуты min и max используются для задания крайних значений бегунка, step – это шаг изменения значения. Браузер Google Chrome отображает этот элемент управления следующим образом:

Данный пример будет работоспособен только в браузерах с поддержкой HTML5

Локальное хранилище

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

Само по себе Local Storage не является частью спецификации HTML5, однако тесно с ней связано.

Управление локальным хранилищем происходит через объект класса localStorage с помощью двух методов setData() и getData() . Ниже приведен пример, в котором используется описанный выше редактируемый список, который будет хранить последние введенные в него значения.

‹h1›To-Do List‹/h1› ‹ul contenteditable=true› ‹li›Watch TV‹/li› ‹li›Listen to music‹/li› ‹li›Play videogames‹/li› ‹/ul›

JavaScript (с применением библиотеки jQuery, но это необязательно):

$("#todo").blur(function () { localStorage.setItem("todoData", this.html); }); if (localStorage.getItem("todoData")) { $("#todo").html(localStorage.getItem("todoData")); }

Поддержка мультимедиа

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

Аудио

Для внедрения на страницу звукового файла необходимо воспользоваться тегом ‹audio› с необходимыми атрибутами. Пример ниже выводит на странице блок управления аудиофайлом, содержащим ссылку на скачивание этого файла. Звук будет воспроизводиться автоматически.

‹audio autoplay controls›
‹source src="file.ogg" /›
‹source src="file.mp3" /›
‹a href="file.mp3"›Download this file.‹/a›
‹/audio›

На странице данный блок может выглядеть вот так (браузер Google Chrome)

У данного тега есть свои особенности поддержки в браузерах. Например, браузер Mozilla Firefox работает с.ogg файлами, тогда как Webkit-браузеры работают с.mp3

Видео

До недавнего времени, единственным способом вставки видеоконтента на HTML-страницу было интегрирование Flash-контента. Однако теперь такую возможность предоставляют сами браузеры, отвечающие спецификациям HTML5. Особую популярность это приобрело тогда, когда на формат HTML5 перешел крупнейший видеохостинг YouTube.com.

Для успешного интегрирования видео в страницу необходимо воспользоваться тегом ‹video› . К сожалению между производителями браузеров нет единого мнения в каком формате должно быть представлено видео, поэтому каждый из них продвигает свой формат. Если IE и Safsri поддерживают видео в формате H.264 (которое поддерживалось Flash-плеерами), то Opera и Firefox продвигают open source форматы Vorbis и Theora. Chrome же может правильно отображать видео во всех форматах, в том числе WebM.

‹video controls preload› ‹source src="video.ogv" type="video/ogg; codecs="vorbis, theora"" /› ‹source src="video.mp4" type="video/mp4; codecs="avc1.42E01E, mp4a.40.2"" /› ‹p›Your browser is old. ‹a href="video.mp4"›Download this video instead.‹/a› ‹/p› ‹/video›

Не все браузеры могут отображать HTML5 видео, поэтому под тегом ‹source› можно указать ссылку для скачивания видео, либо интегрировать Flash плеер.

Атрибут preload позволяет браузеру автоматически начинать загрузку видео, что может быть полезно, если размер видео достаточно большой. Атрибут controls позволяет установить стандартные элементы управления видеопотоком.

От автора: релиз стандарта HTML 5 2 года назад наделал шуму в сообществе разработчиков. Не только потому что в спецификации появилось много новых свойств, но и потому, что это было первое крупное обновление в HTML с HTML 4.01, который вышел в 1999. В сети до сих пор можно найти сайты, хвалящиеся тем, что они используют «современный» стандарт HTML5.

К нашему счастью, на этот раз нам не пришлось ждать так же долго нового поколения HTML. В октябре 2015 W3C начали разработку черновика HTML 5.1, в котором должны были решить ряд проблем, которые остались открытыми в HTML5. Спустя долгое время в июня 2016 спецификация достигла статуса «Candidate Recommendation», в сентябре 2016 статуса «Proposed Recommendation» и, наконец, статуса W3C Recommendation в ноябре 2016. Кто следил за разработкой, могли заметить, что путь был тернистый. Много первичных HTML 5.1 свойств были отклонены из-за плохой проработки и отсутствия поддержки в браузерах.

HTML 5.1 находится до сих пор в разработке, а W3C начали работу над черновиком HTML 5.2, который предположительно должен выйти в конце 2017. А в этой статье мы рассмотрим пару интересных новых свойств и улучшений в версии 5.1. Поддержка у данных свойств до сих пор скудная, но мы расскажем в каких браузерах можно хотя бы попробовать примеры.

Контекстное меню при помощи тегов menu и menuitems

Черновая версия 5.1 представляет два типа элементов menu: context и toolbar. Первое используется для расширения родного контекстного меню, которое обычно отображается по клику на правую кнопку мыши по странице. Второй определяет простые компоненты меню. В процессе разработки от toolbar отказались, тег context до сих пор присутствует.

С помощью тега menu можно создать меню с одним или более тегами menuitems, после чего присвоить эти теги к любым элементам при помощи атрибута contextmenu. Тег menuitem может быть одного из трех типов:

checkbox – позволяет выбирать или снимать выбор;

command – позволяет выполнять действие по клику;

radio – позволяет выбирать один вариант из группы.

Базовый пример использования, работает в Firefox 49, в Chrome 54 поддержка отсутствует.

В браузерах с поддержкой контекстное меню должно выглядеть так:

Элементы details и summary

Теги details и summary позволяют показывать и прятать блоки с дополнительной информацией по клику. Обычно такое делают на JS, но теперь это можно делать и с помощью тегов details и summary. По клику на тег summary открывается контент из тега details.

Пример ниже тестировался в Firefox и Chrome.

В поддерживаемых браузерах демо выглядит так:

Дополнительные типы поля input – month, week и datetime-local

Арсенал поля инпут был расширен тремя новыми типами: month, week и datetime-local.

Первые два типа позволяют выбирать неделю и месяц. В Chrome оба этих типа показываются в виде выпадающих календарей, где можно выбрать месяц или неделю. При получении доступа из JS строка будет выглядеть примерно так: «2016-W43» для week и «2016-10» для month.

Изначально в черновике 5.1 было представлено два инпута date-time: datetime и datetime-local. Разница между ними в том, что datetime-local всегда выбирает время в часовом поясе пользователя, а datetime позволяет менять часовой пояс. В процессе разработки тип datetime был отброшен, остался только datetime-local. Поле типа datetime-local состоит из двух частей: даты, которую можно выбрать так же, как и в полях типа week и month, и времени, которое можно указать отдельно.

В CodePen демо ниже показаны примеры всех типов. Работает в Chrome, в Firefox поддержки пока нет:

В браузерах с поддержкой демо будет выглядеть так:

Адаптивные изображения

В HTML 5.1 появилось несколько новых функций для работы с адаптивными изображениями без подключения CSS. У каждой функции есть свои примеры использования.

Атрибут изображения srcset

Атрибут изображения srcset позволяет прописать несколько дополнительных изображений с различной плотностью пикселей. Так браузер может загружать изображения нужного качества под устройство пользователя (на основе плотности пикселей на устройстве, уровне зума и скорости сети). К примеру, для пользователей с маленькими телефонами или медленной сетью можно показывать изображения низкого разрешения.

Атрибут srcset принимает список URL изображений, разделенных запятой с Х модификатором. Модификаторы описывают соотношение пикселей (количество физических пикселей на CSS пиксель), подходящее к каждому изображению. Простой пример:

< img src = "images/low-res.jpg" srcset = " Images/low-res.jpg 1x, Images/high-res.jpg 2x, Images/ultra-high-res.jpg 3x"

Если соотношение пикселей равно 1, будет показано изображение low-res, для 2 будет показано high-res, для 3 — ultra-high-res. Можно показывать изображения разных размеров вместо соотношения пикселей. Для этого нужно использовать модификатор w:

< img src = "images/low-res.jpg" srcset = " Images/low-res.jpg 600w, Images/high-res.jpg 1000w, Images/ultra-high-res.jpg 1400w"

В этом случае для low-res задано изображение шириной 600px, для high-res – 1000px, для ultra-high-res – 1400px.

Атрибут изображения sizes

Возможно, вы захотите показывать изображения разными способами в зависимости от размера экрана. К примеру, можно показывать изображения в две колонки на широких экранах, а для узких экранов – в одну колонку. В этом вам поможет атрибут sizes. Атрибут позволяет переводить ширину экрана в пространство, отведенное для изображения, после чего подходящее изображение выбирается с помощью атрибута srcset. Пример:

< img src = "images/low-res.jpg" sizes = "(max-width: 40em) 100vw, 50vw" srcset = "images/low-res.jpg 600w, Images/high-res.jpg 1000w, Images/ultra-high-res.jpg 1400w"

Когда ширина окна браузера больше 40em, атрибут sizes определяет ширину изображения, как 50% от ширины окна. Когда ширина окна меньше или равна 40em, ширина изображения составляет 100%.

Тег picture

Недостаточно просто менять размер изображений под разные экраны. Вам нужен способ показывать совсем другие изображения. В этом вам поможет тег picture. Данный тег позволяет прописать несколько изображений для разных экранов. Для этого нужно обернуть тег img в picture и указать дополнительные теги source. В тегах source указываются ссылки на изображения.

< picture > < source media = "(max-width: 20em)" srcset = " Images/small/low-res.jpg 1x, > < / picture >

Валидация форм с помощью form.reportValidity()

В HTML5 прописан метод form.checkValidity(), с помощью которого можно проверять поля формы по валидаторам. В качестве результата возвращается Булево значение. Новый метод reportValidity() работает схожим образом. С его помощью можно провести валидацию формы и вернуть результат. Дополнительно данный метод показывает ошибки пользователю прямо в браузере. В CodePen демо ниже показан результат (тестировалось в Firefox и Chrome):

Поле First name должно быть подсвечено, оно не должно быть пустым. Обычно это работает так:

Атрибут allowfullscreen для фреймов

Новый Булев атрибут для фреймов allowfullscreen позволяет изменять способ отображения контента при помощи метода requestFullscreen(). С его помощью можно разворачивать контент на весь экран.

Проверка орфографии при помощи element.forceSpellCheck()

Новый метод element.forceSpellCheck() позволяет включать проверку текстовых элементов на орфографию. Это также первая функция, которая пока что не поддерживается ни в одном браузере. Чисто теоретически, данный метод можно использовать для проверки орфографии нередактируемых элементов.

Функции, которые не были реализованы

Некоторые из функций, прописанных в первых черновиках спецификации, были в конечном итоге удалены, в основном из-за отсутствия интереса со стороны разработчиков браузеров. Вот некоторые из интересных функций:

Атрибут inert

Атрибут inert должен был отключать пользовательское взаимодействие для всех дочерних элементов. То же самое, что добавить атрибут disabled ко всем элементам вручную.

Тег dialog

С помощью тега dialog можно было создавать попап окна. Была даже продумана удобная форма интеграции. Атрибут method тега dialog запрещал отправку формы на сервер, вместо этого тег возвращал значение создателю диалога.

Тег до сих пор поддерживается в Firefox, пример его работы:

Дополнительные ссылки

Это отнюдь не полный список изменений в HTML 5.1. В спецификации прописано множество мелких функций и изменений, которые были приняты в Living Standard, а также много функций, которые были удалены. Полный список изменений можете посмотреть в разделе Changes спецификации. А пока что будем надеяться, что разработчики браузеров быстро подхватят новые функции!

А что вам в HTML 5.1 понравилось больше всего? Пишите в комментариях!

Редакция: Pavels Jelisejevs

• Перевод

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

Чтобы дать разработчикам более гибкий, совместимый продукт, а также позволяющий делать проекты более интерактивными и интересными, HTML 5 внедряет и расширяет спектр функций, включая формы управления, API, мультимедиа, структуру и семантику.

Работа над HTML 5 была начата в 2004 году. В настоящее время разработки осуществляются в рамках совместных усилий W3C HTML WG и WHATWG . Многие известные компании принимают участие в разработках, в том числе: Apple, Mozilla, Opera, а Microsoft, и ряд других организаций и частных лиц с различными интересами и опытом.

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

Структура

HTML 5 вводит целый ряд новых элементов, которые делают структуру страниц намного проще. Большинство HTML4 страниц содержат ряд общих структур, например, колонтитулы (шапка и футер страницы) и столбцы, и сегодня это становится уже традицией - выделять их, используя элементы div, присваивая ему класс или id.


На иллюстрации типичный 2х колоночный макет с использованием div элементов, с присвоением им класса или id. Структура сожержит - «шапку» страницы, подвал, навигационное меню и контент, разбитый на 2 колонки -

Использование div элементов преимущественно, потому что в текущей версии HTML 4 не хватает семантики для описания этих частей более конкретно. HTML 5 данную проблему решает за счет введения новых элементов, каждый из который имеет свое отдельное название.

Код документа выглядит так:

...
...
...

...
...

Есть несколько преимуществ использования этих элементов. При использовании их в сочетании с заголовками элементов (h1 - h6), это дает возможность внедрить в каджый уровень свой подраздел с заголовком, в отличие от возможных 6 уровней в предыдущей версиии HTML. Спецификация включает в себя детальный алгоритм для генерации границ . Эти элементы могут быть использованы как авторские и браузерные инструменты для генерации оглавления и помощи пользователям в навигации по документу.

Например, следующая структура разделена на уровни с вложенными элементами h1:

Level 1Level 2Level 3
Заметим, что для наибольшей совместимости с разными браузерами, можно использовать различные уровни заголовков, такие как h2, h3 и т.д.

Определив назначение разделов на странице, используя конкретные элементы разделов, такая технология может помочь пользователю легче перемещаться по странице. Например, пользователь может легко перейти в раздел меню или быстро переходить от одной статьи к следующей без необходимости для разработчика делать такую ссылку-переход. Разработчики также могут торжествовать, потому что заменив элементы div на соотвествующие элеметы, исходный код будет проще и «чище».

Элемент «header» представлет собой заголовок страницы. Этот раздел может содержать не только заголовок как таковой, но также и любые подзаголовки, которые помогут пользователю больше понять содержание страницы.

A Preview of HTML 5 By Lachlan HuntExample BlogInsert tag line here.
Элемент «footer» представляет собой «подвал» страницы. В этой части страницы обычно размещают ссылку на права автора, счетчики, и т.д.

Элемент «nav» - определяет раздел навигации по сайту:

Элемент «aside» определяет секцию, косвенно связанную с содержанием страницы, чаще всего используемую как приложение.