10 новых функций HTML 5.1 и как их использовать в IRL

Спецификация HTML претерпела серьезные изменения пару недель назад, когда W3C опубликовал его новая рекомендация HTML 5.1 в ноябре 2016 года. В его недавнее сообщение в блогеW3C назвал новый основной выпуск золотым стандартом, так как HTML 5.1 предоставляет нам новые способы использования HTML для создания более гибких веб-интерфейсов.

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

Рекомендуемое чтение: взгляд в глаза: доступность веб-стандартов ARIA и приложений HTML

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

  1. Определите несколько ресурсов изображений для адаптивного дизайна
    В HTML 5.1 вы можете использовать пометьте вместе с атрибутом srcset, чтобы сделать возможным выбор адаптивного изображения. тег представляет контейнер изображений, который позволяет разработчикам объявлять различные ресурсы изображений для адаптации к размеру области просмотра UA, плотности пикселей экрана, типу экрана и другим параметрам, используемым в адаптивном дизайне.

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

Пример кода:


ваше изображение
  1. Показать или скрыть дополнительную информацию
    С

    а также

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

    тег внутри

    , После

    Вы можете добавить дополнительную информацию, которую хотите скрыть.

Пример кода:

Сообщение об ошибке

Мы не смогли закончить загрузку этого видео.
Имя файла:
yourfile.mp4
Размер файла:
100 МБ
Продолжительность:
00:05:27

Вот как этот пример кода выглядит в Firefox 50.0.2:
Подробности и итоговые теги на практике 3. Добавьте функциональность в контекстное меню браузера
С element и его атрибут type = «context», вы можете добавить пользовательские функции в контекстное меню браузера. Вам необходимо назначить как дочерний элемент

тег.
  Идентификатор

элемент должен иметь то же значение, что и контекстное меню атрибут элемента, к которому мы хотим добавить контекстное меню (которое является

Тэг может иметь три разных типа: «флажок», «команда» (к которому нужно добавить действие с помощью JavaScript) и радио. Можно добавить более одного пункта меню в контекстное меню, однако поддержка браузера для этой функции пока не очень хорошо. Chrome 54 не поддерживает его, а Firefox 50 допускает наличие только одного дополнительного контекстного меню. Ниже вы можете увидеть, как работает пример кода в Firefox 50.
Атрибут contextmenu 4. Верхние и нижние колонтитулы гнезда
HTML 5.1 позволяет вам вкладывать заголовки а также колонтитулы если каждый уровень содержится в секционирование контента, Примечание ниже скриншот из W3C документы, и советует разработчикам о правильном способе вложения заголовка и нижнего колонтитула.
Замечание W3C о вложении заголовков Эта функция может быть полезна, если вы хотите добавить разработанные заголовки к элементам семантического секционирования, таким как

<

article> а также

<

section>, Пример кода ниже создает боковую панель внутри заголовка,

<

aside> Тег также является элементом секционирования и добавляет в него дополнительную информацию об авторе. Боковая панель внутри заголовка также имеет собственный заголовок с подзаголовком и контактной информацией автора.

Пример кода:

<article>
  <header>
    <h1>Название статьи</h1>
    <aside>
      <header>
        <h2>Об авторе</h2>
                <a href="https://www.hongkiat.com/#">Электронное письмо</a><a href="https://www.hongkiat.com/#">щебет</a></p>
      </header>
      <img src="photo.jpg" alt="Фото автора">
      <p>Автор био ... </p>
    </aside>
  </header>
  <p>Введение в статью</p>
  <p>Другие параграфы ...</p>
</article>
  1. Используйте криптографические одноразовые номера для стилей и скриптов

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

  1. Создайте отношения обратной ссылки
    Вы можете добавить     оборот приписать ваши ссылки снова. Ранее он был определен в HTML 4, однако не поддерживал HTML5. HTML 5.1 позволяет разработчикам снова использовать этот атрибут для а также элементы. Атрибут rev противоположен rel, он определяет отношение текущего и связанного документа в обратном направлении (как текущий документ связан со связанным).

Пример кода:

Атрибут rev был включен в спецификации HTML 5.1 прежде всего для поддержки RDFa, который является широко используемым форматом разметки структурированных данных, и расширяет язык HTML,

Рекомендуемое чтение: улучшите результаты поиска с помощью Rich Snippets & Schema.org Vocabulary

  1. Используйте изображения нулевой ширины
    HTML 5.1 позволяет создавать изображения нулевой ширины разрешая разработчикам использовать атрибут ширины с 0 в качестве значения. Эта функция может быть полезна, если вы хотите включить изображения, которые вы не хотите показывать пользователям, например, отслеживание файлов изображений. Изображения нулевой ширины рекомендуется использовать вместе с пустыми атрибутами alt.

Пример кода:

  1. Раздельные контексты браузера для предотвращения фишинговых атак
    Использование ссылок с тем же источником на вашем сайте может в конечном итоге привести к некоторым неприятностям. Уязвимость называется цель = "_ blank" эксплойти это противная фишинговая атака. Вы можете (безопасно) проверить, как работает эта атака на этой умной демо-странице Githubи его фоновый код вы можете найти здесь на Github,

HTML 5.1 стандартизировал использование отн = "noopener" атрибут, который разделяет контексты браузера, поэтому устраняет эту проблему. Вы можете использовать rel = "noopener" в пределах а также

элементы.

Пример кода:

Ваша ссылка, которая не доставит хлопот

  1. Создайте пустую опцию
    HTML 5.1 позволяет разработчикам создавать пустые элемент.