≡× МЕНЮ

• Утилиты
• Инструменты
• Оптимизация
• Интернет
• Загрузки

Html5 нововведения. Знакомство с HTML5

От автора: релиз стандарта 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

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

1. Новый Doctype и Charset.

Одно из достоинств HTML5 – это его простота.

Да, вот и все. Буквально два слова. Это простота объясняется, возможно, тем что HTML5 существует сам по себе, а не остается частью SGML.

Charset так же очень просто, используется utf-8, и задается так же, буквально одним тегом:

2. Новая структура

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

• – определяет разделы страницы
• – определяет заголовок страницы
• – определяет статью или основной контент на странице

• – определяет изображение, аннотацию статьи

3. Новые встроенные элементы.

Эти новые элементы определяют некоторые базовые концепции и обозначают элементы страницы:

• – для обозначения содержимого
• – для обозначения времени или даты
• – для обозначения некоторых измерений, например дискового пространства
• – для обозначения ваших успехов и продвижения

4. Новая поддержка динамических страниц

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

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

5. Новые типы форм

HTML5 поддерживает все старые типы форм, но так же добавлены и новые:

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

6. Новые элементы

Появились некоторые новые элементы в HTML5:

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

7.Удаленные элементы

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

Что же такого нового в HTML5, чего не было в HTML4?

А новое в принципе все. Спецификация HTML5 несет в себе множество изменений разного уровня и важности. Фундаментальные изменения можно разделить на несколько блоков:

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

Рассмотрим наиболее известные из них:

• nav - служит для создания панели навигации;
• aside - является объединяющим тэгом, более всего подходящим для выделения сайдбара. В него могут входить как блоки nav, так и другие элементы, не являющиеся навигационными (рекламные баннеры, фотография автора, кнопки социальных сетей и т.д.);
• section - также объединяющий тэг. Причем он может выступать в разных ролях: либо разделять страницу на несколько тематических областей, либо разделять на отдельные секции непосредственно статью на странице;
• article - служит для разбивки страницы на отдельные статьи. Оба тэга section и article обладают рядом интересных особенностей. Например, вы можете теперь смело использовать заголовок первого уровня H1 на одной странице несколько раз, что ранее было недопустимо;
• hgroup - тэг призван группировать заголовки страницы в одну логическую единицу;
• video - служит для простой вставки видео на страницы сайта;
• audio - также предназначен для простой вставки медиа-контента на страницы сайта;
• canvas - создает область, в которой при помощи JavaScript можно рисовать разные объекты, выводить изображения, трансформировать их и менять свойства.

Про остальные тэги можно узнать из htmlbook.ru .

• Мультимедиа . HTML5 теперь из коробки поддерживает мультимедийный контент (аудио и видео проигрыватель) в HMTL-разметке - с соответствующим API для управления воспроизведением и кодеками.
• Графика . Работать с графикой стало заметно проще, благодаря тэгу canvas и специальному JavaScript API для работы с ним. Также в HTML5 официально включен тэг svg, позволяющий внедрять векторную графику, описываемую соответствующим веб-стандартом (SVG, Scalable Vector Graphics).
• Веб-формы. Новые элементы веб-формы: как типы, так и атрибуты, позволяющие расширить возможности традиционных форм встроенными средствами, без использования дополнительных библиотек для валидации вводимых данных, подсказок в формах.
• JavaScript API. API для работы с графикой и мульмедиа, новые расширенные возможности по перемещению объектов и работе с историей переходов (History API), а также ряд мелочей, вроде возможности сделать контент редактируемым прямо в текущем месте с помощью Content Editable атрибутов.
• Многое другое. Усовершенствованные сетевые коммуникации. Существенно улучшенное хранение данных. Средства Web Worker для исполнения фоновых процессов. Интерфейс WebSocket для установки постоянного соединения между резидентным приложением и сервером. Повышенная скорость сохранения и загрузки страниц. Поддержка CSS3 при управлении пользовательским интерфейсом, что обеспечивает контентную ориентированность HTML5.

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

Что нового в HTML5? Отличия HTML5 от HTML 4

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

а) Семантика (смысловое значение единиц языка)

В HTML5 появился ряд новых семантических тегов, позволяющих более осмысленно организовывать внутреннюю структуру веб-страниц. Это включает как блочные теги вроде header, footer, article, так и теги для разметки текста, например, mark, ruby, details. Ряд существующих тегов HTML4 признан устаревшим, отдельные теги поменяли свое значение, определенные изменения претерпели атрибуты.

б) Мультимедиа

HTML5 добавляет встроенную поддержку мультимедийного контента (аудио и видео) прямо в HMTL-разметке -- с соответствующим API для управления.

в) Графика

Работать с графикой на стороне клиента стало заметно проще. В HTML5 добавлен элемент canvas и специальный API на JavaScript для работы с ним. Canvas представляет собой динамическую «поверхность», поверх которой можно программного рисовать. Также в HTML5 официально включен тег svg, позволяющий внедрять векторную графику, описываемую соответствующим веб-стандартом SVG (Scalable Vector Graphics).

г) Веб-формы

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

д) JavaScript APIs.

В HTML5 включены новые возможности по перемещению объектов (Drag & Drop), работа с историей переходов (History API), а также ряд мелочей, вроде возможности сделать контент редактируемым прямо в текущем месте с помощью Content Editable атрибутов.

е) Новый DOCTYPE

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

В HTML 4 было 3 вида элемента :

• 1. Строгий (Strict)
• 2. Переходный (Transitional)
• 3. С фреймами (Frameset)

Зачастую выбор того или иного элемента DOCTYPE был достаточно затруднителен. В HTML5 DOCTYPE всего один он пишется так:

Эта короткая запись заменяет старую и длинную форму:

"http://www.w3.org/TR/html4/strict.dtd">

ж) Синтаксис

HTML 5 будет иметь два синтаксиса - "custom" HTML и XML. HTML синтаксис определяет детализированные правила синтаксического анализа (включая "обработку ошибок").

XML синтаксис совместим с документами XHTML1 и его реализациями. Чтобы использовать этот синтаксис нужно объявить MIME (Multipurpose Internet Mail Extensions) тип XML, а элементы должны быть выстроены согласно спецификации XML.

Рисунок 2 - основные свойства HTML5

HTML 5 - это новая версия самого популярного языка разметки.

Уже более 10-ти лет язык гипертекстовой разметки HTML практически не менялся, что было очень странно, учитывая огромную скорость развития Web-технологий, и вот, наконец-то, изменение случилось и появился HTML 5 .

В HTML 5 добавлены несколько новых элементов и атрибутов, а также убраны несколько старых (например, font и center ).

Добавлены следующие элементы:

1) header .

2) footer .

4) section .

5) article .

6) aside .

7) figure .

8) dialog .

9) m (mark) .

10) time .

11) meter .

12) progress .

13) video .

14) audio .

15) details .

16) datagrid .

17) menu .

18) command .

В остальном осталось всё без изменений. То есть никаких проблем с не возникнет, при условии, что Вы знакомы со стандартным . Собственно, всё осталось как прежде, только добавились новые возможности.

Благодаря нововедениям HTML 5 можно существенно облегчить труд Web-мастеров по , упростив ту же самую разметку.

Наверняка, Вы задаётесь вопросом: "А будет ли работать HTML 5 со старыми браузерами?". Ответ таков: "Конечно, да, но новые элементы, разумеется, отображаться не будут". Или другими словами, новые страницы увидят все, но обладатели современных версий браузеров увидят немного больше и по-другому.

Я уверен, что в ближайшие время HTML 5 смогут увидеть такой же процент пользователей, как сейчас видят HTML 4 , которому уже более 10-ти лет.

А об использовании новых возможностей HTML 5 мы поговорим с Вами в следующих статьях.