Новые атрибуты HTML5

Новые теги HTML5

Новые атрибуты

Некоторые атрибуты были введены в различные элементы, которые уже были частью HTML4:

  • a и area элементы теперь имеют атрибут media для соответствия link элемента. WHATWG HTML также имеют download и ping атрибуты.
  • Элемент area, для соответствия a и link элементам, теперь также имеет hreflang, type и rel атрибуты.
  • Элемент base теперь может иметь атрибут target, главным образом, для согласования с элементом a.(Это уже широко поддерживается.)
  • Элемент meta теперь имеет атрибут charset, что обеспечивает хороший способ указать кодировку документа.
  • Новый autofocus атрибут может быть указан для тэгов input (кроме случаев, когда атрибут type — hidden), select, textarea и button. Он обеспечивает декларативный способ указания на активный элемент формы во время загрузки страницы. С помощью этой функции можно повысить эффективность работы пользователей.
  • Новый атрибут placeholder может быть указан для тэгов input и textarea. Он представляет собой намек предназначеный помочь пользователю при вводе данных. 
    <input type=email placeholder="a@b.com">
  • Новый атрибут form для input, output, select, textarea, button, label, object и fieldset элементов управления позволяет связать их с формой. Эти элементы теперь можно разместить в любом месте на странице, а не только как потомков тэга form, и все еще ??быть связаными с формой. 
    <label>Email:
      <input type=email form=foo name=email>
     </label>
    <form id=foo></form>
  • Новый атрибут require относится к input (кроме случаев, когда type атрибут hidden, image или кнопка типа, таких как submit), select и textarea. Это означает, что пользователь должен заполнить значение для того, чтобы отправить форму. Для select, первый вариант элемента должен быть с пустым значением. 
    <label>Color:
      <select name=color required>
       <option value="">Choose one
       <option>Red
       <option>Green
       <option>Blue
      </select></label>
  • fieldset элемент теперь имеет disabled атрибут, который отключает все дочерние элементы управления, а также атрибут name, который может быть использован для сценария доступа.
  • Тэг input имеет несколько новых атрибутов для указания ограничений: autocomplete, min, max, multiple, pattern и step. Как упоминалось ранее он также имеет новый атрибут list, которые можно использовать вместе с datalist тэгом. Кроме того, в настоящее время width и height атрибуты, определяющие размеры изображения при использовании type = image.
  • Тэги input и textarea имеют новый атрибут dirname.
  • textarea элемент имеет два новых атрибута, maxlength и wrap, которые управляют максимальной длиной входных данных и представлением поведения при переносе строк, соответственно.
  • Тэг form получил NOVALIDATE атрибут, который может быть использован для отключения проверки формы перед отправкой (т.е. форма всегда может быть отправлена).
  • input и button элементы получили новые атрибуты formaction, formenctype, formmethod, formnovalidate и formtarget. Если они есть, они заменят собой action, enctype, method, novalidate и target атрибуты тэга form.
  • Тэг menu имеет два новых атрибута: type и label. Они позволяют преобразовать элемент в меню, которые содержатся в типичных пользовательских интерфейсах, а также предоставление для контекстного меню в сочетании с глобальным contextmenu атрибутом.
  • Тэг style получил новый атрибут scope, который может быть использован для разрешения области видимости таблиц стилей.
  • Тэг script получил новый атрибут async, что влияет на загрузку и выполнение сценариев.
  • тэг html имеет новый атрибут manifest, который указывает на манифест приложения кэш используется в сочетании с API для автономных веб-приложений.
  • тэг link получил новый атрибут sizes. Он может быть использован в сочетании с icon, чтобы указать размер значка.Таким образом, указывая на иконки различных размеров.
  • Тэг ol получил новый атрибут reversed. Если он присутствует, это означает, что список идет в порядке убывания.
  • iframe элемент имеет три новых атрибутов sandbox, seamless и srcdoc.
  • Тэг object получил новый атрибут typemustmatch который позволяет безопасно использовать вложение внешних ресурсов.
  • Тэг img новый атрибут crossorigin, чтобы использовать CORS в запросе, и если он окажется успешным, выдает данные изображения для чтения API canvas.

Некоторые атрибуты HTML4 теперь распространяется на все элементы. Это так называемые глобальные атрибуты: аccesskey, class, dir, id, lang, style, tabindex и title. Кроме того, XHTML 1.0 разрешает только XML:space на отдельные элементы, которые в настоящее время допускаются на все элементы в документах XHTML. Есть также несколько новых глобальных атрибутов:

  • сontenteditable атрибут указывает, что элемент является редактируемой областью. Пользователь может изменить содержимое элемента и манипулировать разметкой.
  • сontextmenu атрибут может использоваться, чтобы указать на контекстное меню, представленные автором.
  • data-* коллекция автора определенных атрибутов. Авторы могут определить любой атрибут какой захотят, с префиксом data-, чтобы избежать столкновения с будущими версиями HTML. Единственное требование этих атрибутов является то, что они не используются в расширениях пользовательского агента.
  • dragable и dropzone атрибуты могут быть использованы вместе с новой  API drag&drop.
  • hidden атрибут указывает, что элемента еще нет, или он не актуален.
  • role и area-* коллекция атрибутов, которые можно использовать для указания вспомогательных технологий.
  • spellcheck атрибут намекает может ли содержание  быть проверено на наличие орфографических ошибок или нет.
  • translate атрибут подсказывает переводчикам, что содержимое должно быть переведено.

HTML5 также использует все атрибуты обработчиков событий из HTML4,  и добавляет несколько новых обработчиков событий атрибутов для новых событий. Например, onplay обработчик события, которое используется API для элементов мультимедиа.