worldwide open-source software - software:development:web:docs:web:html:global_attributes

accesskey

anonymous@undisclosed.example.com (Anonymous) — Wed, 06 Sep 2023 18:20:55 +0000

HTML глобальный атрибут: accesskey (ключ доступа)

Глобальный атрибут accesskey даёт возможность быстро перейти к элементу с помощью комбинации клавиш. Значение атрибута состоит из одного печатного символа (в том числе спец. символы, акценты и другие, которые можно написать с клавиатуры).

Интерактивный пример

Примечание: Спецификация WHATWG допускает использования нескольких символов разделённых пробелом. Однако, на момент написания, эта функциональность не поддерживается в современных браузерах. IE и Edge в таком случае будет использовать первый символ, игнорируя остальные.

Активация элементов с помощью Accesskey зависит от браузера и платформы:

Обратите внимание, что в Firefox пользователь может настроить свой модификатор активации.

Проблемы с доступностью

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

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

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

WebAIM: Keyboard Accessibility - Accesskey

autocapitalize

anonymous@undisclosed.example.com (Anonymous) — Sun, 03 Mar 2024 07:59:22 +0000

HTML глобальный атрибут: autocapitalize (авто замена прописных букв)

Глобальный атрибут autocapitalize - это перечисляемый атрибут, который определяет, будет ли вводимый текст автоматически меняться буквы на заглавные при наборе или редактировании текста и, если да, то каким образом.

<input> и <textarea> элементы.
Любой элемент с contenteditable набором на нем.

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

Интерактивный пример

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

Примечание

autocapitalize могут быть установлены для <input> элементов <textarea> и содержащих их <form> элементов. Если autocapitalize этот параметр установлен для <form> элемента, он устанавливает поведение автокапитализации для всех содержащихся <input> s и <textarea> s, переопределяя любые autocapitalize значения, установленные для содержащихся элементов.
autocapitalize не влияет на типы url, email или password <input>, где автокапитализация никогда не включена.
Если autocapitalize не указано иное, принятое поведение по умолчанию варьируется в зависимости от браузера. Например:
- Chrome и Safari по умолчанию on/sentences
- По умолчанию в Firefox используется off/ none.

Синтаксис

autocapitalize="off | none | on | sentences | words | characters"

Значение

Возможные значения:

none или off
- Преобразования букв не происходит, все они по умолчанию остаются строчными.

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

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

characters
- Все буквы по умолчанию должны быть заглавными.

Доступность

Для полей следующего типа атрибут autocapitalize работать не будет, даже при его наличии.

<input type=«email»>
<input type=«password»>
<input type=«url»>

Ссылки и Дополнения

autofocus

anonymous@undisclosed.example.com (Anonymous) — Sun, 03 Mar 2024 09:25:19 +0000

HTML глобальный атрибут: autofocus (автофокус)

Глобальный атрибут autofocus это логический атрибут, автоматически переводящий фокус на элемент формы сразу после полной загрузки страницы или когда отображается элемент, частью которого является .autofocus <dialog>.

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

Интерактивный пример

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

Примечание

Атрибут autofocus применяется ко всем элементам, а не только к элементам управления формой. Например, его можно использовать в редактируемой области.
Не более одного элемента в документе или диалоге может иметь атрибут автофокуса. Если применить к нескольким элементам, фокус получит первый из них.

Синтаксис

<button autofocus>...</button>

<input name="q" autofocus />

<input type="..." autofocus>
<input type="..." autofocus="">
<input type="..." autofocus="autofocus">

Значения атрибута

Нет.

Значение по умолчанию: По умолчанию это значение выключено.

Доступность

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

При применении атрибута уделяйте особое внимание доступности autofocus. Автоматическая фокусировка на элементе управления может привести к прокрутке страницы при загрузке. Фокус также может привести к отображению динамической клавиатуры на некоторых сенсорных устройствах. В то время как программа чтения с экрана объявляет метку элемента управления формой, получающего фокус, программа чтения с экрана ничего не объявляет перед меткой, и зрячий пользователь на небольшом устройстве в равной степени пропустит контекст, созданный предыдущим содержимым.

Ссылки и Дополнения

class

anonymous@undisclosed.example.com (Anonymous) — Sun, 03 Mar 2024 08:54:46 +0000

HTML глобальный атрибут: class (класс)

Глобальный атрибут class представляет собой разделенный пробелами список классов элемента, чувствительных к регистру. Классы позволяют CSS и JavaScript выбирать и получать доступ к определенным элементам с помощью селекторов классов или функций, таких как метод DOM .class getElementsByClassName. Для CSS задаёт стилевой класс, который позволяет связать определённый элемент со стилевым оформлением.

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

Интерактивный пример

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

Примечание

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

Синтаксис

<element class="имя_класса">

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

Значения атрибута

Значение

Описание

имя_класса

Одно или несколько имен классов. Чтобы присвоить несколько классов, необходимо эти имена классов разделять пробелом, например, <span class=«left important»>. Это позволяет одному HTML элементу присвоить несколько CSS классов.
Имена классов
- должны начинаться с латинской буквы A-Z или a-z
- за которой может следовать: латинские буквы содержать в себе латинские буквы (A–Z, a–z), цифры (0–9), символ дефиса (-) и подчёркивания (_) и не должны начинаться с цифры.
- использование русских букв в классах недопустимо.
- в HTML5 эти ограничения сняты, но для совместимости со старыми браузерами и JavaScript рекомендуется придерживаться данных правил.
- в HTML все значения регистронезависимы.

Доступность

В HTML5 атрибут class можно использовать с любым HTML элементом (все элементы с этим атрибутом будут проходить валидацию. Тем не менее, это не всегда имеет смысл!).

В HTML 4.01 атрибут class нельзя использовать с элементами <base>, <head>, <html>, <meta>, <param>, <script>, <style>, <title>.

Ссылки и Дополнения

contenteditable

anonymous@undisclosed.example.com (Anonymous) — Sun, 03 Mar 2024 14:42:49 +0000

HTML глобальный атрибут: contenteditable (редактируемый контент)

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

Можно удалять текст и вводить новый. Также работают стандартные команды вроде отмены, вставки текста из буфера и др.

Интерактивный пример

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

Примечание
Хотя допустимые значения включают trueи false, этот атрибут является перечислимым, а не логическим .

Синтаксис

contenteditable="true | false"

<h1 contenteditable="false">Редактирование запрещено</h1>

  <p contenteditable="true">Редактирование разрешено</p>

Значения атрибута

true или пустая строка- Включает режим редактирования.
false - Запрещает редактирование элемента.
plaintext-only, что указывает на то, что необработанный текст элемента доступен для редактирования, но форматирование расширенного текста отключено.

Вместо true допустимо указывать пустое значение (contenteditable=«») или вообще его не писать (contenteditable).

Значение по умолчанию: По умолчанию наследует значение родителя.

Если этот атрибут отсутствует или его значение недопустимо, его значение наследуется от родительского элемента: поэтому элемент доступен для редактирования, если его родительский элемент доступен для редактирования.

Применяется к тегам

Доступность

Вы можете установить цвет, используемый для рисования курсора вставки текста, с помощью Caret свойства CSS caret-color.

Элементы, которые с помощью атрибута становятся редактируемыми и, следовательно, интерактивными, contenteditable могут быть сфокусированы. Они участвуют в последовательной навигации с помощью клавиатуры. Однако элементы с contenteditable атрибутом, вложенным в другие contenteditable элементы, по умолчанию не добавляются в последовательность табуляции. Вы можете добавить вложенные contenteditable элементы в последовательность навигации с помощью клавиатуры, указав значение tabindex (tabindex="0").

Ссылки и Дополнения

contextmenu

anonymous@undisclosed.example.com (Anonymous) — Sun, 03 Mar 2024 13:07:31 +0000

HTML глобальный атрибут: contextmenu (контекстное меню)

Глобальный атрибут contextmenu это идентификатор, который будет использоваться в качестве контекстного меню для этого элемента .contextmenu <menu>

Контекстное меню — это меню, которое появляется при взаимодействии с пользователем, например при щелчке правой кнопкой мыши. HTML теперь позволяет нам настраивать это меню. Вот несколько примеров реализации, включая вложенные меню.

Интерактивный пример

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

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

Примечание
Устарело: эта функция больше не рекомендуется. Хотя некоторые браузеры все еще могут его поддерживать, возможно, он уже удален из соответствующих веб-стандартов, может находиться в процессе удаления или может быть сохранен только в целях совместимости. Избегайте его использования и, если возможно, обновите существующий код; см. таблицу совместимости внизу этой страницы, чтобы принять решение. Имейте в виду, что эта функция может перестать работать в любой момент.

Синтаксис

contextmenu="идентификатор"

<li contextmenu="changeFont" id="fontSizing">

Значения атрибута

Значения: В качестве значения указывается идентификатор меню, созданного с помощью тега <menu>.
Значение по умолчанию: Нет.

Применяется к тегам

<a>, <abbr>, <address>, <area>, <b>, <bdo>, <blockquote>, <body>, <button>, <caption>, <cite>, <code>, <col>, <colgroup>, <del>, <dd>, <dfn>, <dir> , <div>, <dl>, <dt>, <em>, <embed>, <fieldset>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>|] [[software:development:web:docs:web:html:element:i|<i>, <iframe>, <img>, <input>, <ins>, <kbd>, <label>, <legend>, <li>, <link>, <map>, <menu>, <ol>, <option>, <p>, <pre>, <q>, <s>, <samp>, <select>, <span>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <ul>, <var>

Доступность

Атрибут contextmenu устарел и будет удален из всех браузеров.

Ссылки и Дополнения

data

anonymous@undisclosed.example.com (Anonymous) — Sun, 03 Mar 2024 13:52:03 +0000

HTML глобальный атрибут: data-* (данные-*)

Глобальный атрибут data-* образует класс атрибутов, называемых пользовательскими атрибутами данных , которые позволяют обмениваться частной информацией между HTML и его представлением DOM с помощью сценариев.

Используется для хранения пользовательских данных, относящихся к конкретной странице или приложению.

Интерактивный пример

В данном примере к элементу <meter> добавляется атрибут data-description содержащий необходимый текст для вывода. Само отображение происходит с помощью псевдоэлемента ::after и свойства content, значением которого как раз и выступает функция attr().

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

Примечание
Имя атрибута должно обязательно начинаться с data-, дальше можно использовать латинские буквы в нижнем регистре, цифры и следующие символы: дефис (-), двоеточие (:), подчёркивание (_).

Имена атрибутов трансформируются в переменные, к которым в дальнейшем можно обращаться и получать значения, по следующим правилам:

data- удаляется;
любой дефис идущий перед буквой удаляется, а буква за ним становится заглавной;
любые другие буквы остаются неизменными.

Например, атрибут data-date-of-birth преобразуется в переменную dateOfBirth.

data-description превращается в description.
data-full-description превращается fullDescription.
data-description-of-tag превращается descriptionOfTag.

Синтаксис

<element data-*="значение">

<div id="user" data-id="1234567890" 
       data-user="Вася Пупкин" 
       data-date-of-birth="01.04.1990">Пользователь</div>

Значения атрибута

Значения: Определяет значение атрибута (в виде строки)
Значение по умолчанию: Нет.

Ссылки и Дополнения

Более подробное руководство по использованию атрибутов данных HTML см. в разделе Использование атрибутов данных.

dir

anonymous@undisclosed.example.com (Anonymous) — Sun, 03 Mar 2024 16:02:57 +0000

HTML глобальный атрибут: dir (директория)

Глобальный атрибут class - это перечисляемый атрибут, указывающий направление текста элемента .dir

Задает направление и отображение текста — слева направо или справа налево. Браузеры обычно самостоятельно различают направление текста, если он задан в кодировке Юникод, но с помощью атрибута dir можно указать, в каком направлении отображать текст. Для арабских и еврейских символов приоритетным является направление, заложенное в Юникод, поэтому на них атрибут dir действовать не будет.

Интерактивный пример

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

Примечание
Этот атрибут является обязательным для <bdo> элемента, где он имеет другое семантическое значение.

Этот атрибут не наследуется элементом <bdi>. Если не установлено, его значение равно auto.
Этот атрибут может быть переопределен свойствами CSS direction unicode-bidi, если страница CSS активна и элемент поддерживает эти свойства.
Поскольку направленность текста семантически связана с его содержанием, а не с его представлением, веб-разработчикам рекомендуется по возможности использовать этот атрибут вместо связанных свойств CSS. Таким образом, текст будет отображаться правильно даже в браузере, который не поддерживает CSS или в котором CSS отключен.
Значение autoследует использовать для данных с неизвестной направленностью, например данных, поступающих от пользователя и в конечном итоге сохраняемых в базе данных.

Примечание
Браузеры могут разрешать пользователям изменять направление <input> и <textarea>, чтобы облегчить создание контента. Chrome и Safari предоставляют опцию направления в контекстном меню полей ввода, а Legacy Edge использует комбинации клавиш Ctrl + Left Shift и Ctrl + Right Shift. Firefox использует Ctrl/ Cmd++ Shift, X но НЕ обновляет dir значение атрибута.

Синтаксис

<dir={ltr | rtl}>

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

Значения атрибута

Значения

ltr: Текст отображается как обычно — слева направо и должно использоваться для языков, которые пишутся слева направо (например, английский);
rtl: Текст инвертируется и отображается справа налево и должно использоваться для языков, которые пишутся справа налево (например, арабский);
auto: позволяет пользовательскому агенту принять решение. Он использует базовый алгоритм, анализируя символы внутри элемента, пока не найдет символ с сильной направленностью, а затем применяет эту направленность ко всему элементу.

Значение по умолчанию:

Доступность

В HTML5 атрибут dir можно использовать с любым HTML элементом (все элементы с этим атрибутом будут проходить валидацию. Тем не менее, не всегда это имеет смысл!).

В HTML 4.01 атрибут dir нельзя использовать с элементами <base>, <br>, <frame>, <frameset>, <hr>, <iframe>, <param>, <script>.

Ссылки и Дополнения

sidebar

anonymous@undisclosed.example.com (Anonymous) — Sun, 03 Mar 2024 07:03:42 +0000

worldwide open-source software - software:development:web:docs:web:html:global_attributes

accesskey

HTML глобальный атрибут: accesskey (ключ доступа)

Интерактивный пример

Проблемы с доступностью

autocapitalize

HTML глобальный атрибут: autocapitalize (авто замена прописных букв)

Интерактивный пример

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

Синтаксис

Значение

Доступность

Ссылки и Дополнения

autofocus

HTML глобальный атрибут: autofocus (автофокус)

Интерактивный пример

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

Синтаксис

Значения атрибута

Доступность

Ссылки и Дополнения

class

HTML глобальный атрибут: class (класс)

Интерактивный пример

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

Синтаксис

Значения атрибута

Доступность

Ссылки и Дополнения

contenteditable

HTML глобальный атрибут: contenteditable (редактируемый контент)

Интерактивный пример

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

Синтаксис

Значения атрибута

Применяется к тегам

Доступность

Ссылки и Дополнения

contextmenu

HTML глобальный атрибут: contextmenu (контекстное меню)

Интерактивный пример

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

Синтаксис

Значения атрибута

Применяется к тегам

Доступность

Ссылки и Дополнения

data

HTML глобальный атрибут: data-* (данные-*)

Интерактивный пример

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

Синтаксис

Значения атрибута

Ссылки и Дополнения

dir

HTML глобальный атрибут: dir (директория)

Интерактивный пример

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

Синтаксис

Значения атрибута

Доступность

Ссылки и Дополнения

sidebar

Глобальные атрибуты