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

Глобальные атрибуты — это атрибуты общие для всех HTML элементов; они могут использоваться всеми элементами, хотя на некоторые элементы могут не оказывать влияния.

Глобальные атрибуты могут быть указаны для любых элементов HTML, даже для тех, которые не указаны в стандарте. Это значит, что все нестандартные элементы должны допускать эти атрибуты, даже если использование этих элементов означает, что документ больше не является HTML5-совместимым. Например, HTML5-совместимые бразузеры скрывают содержимое, помеченное как . , хотя не является верным HTML элементом.

В дополнение к основным для HTML глобальным атрибутам, также существуют следующие глобальные атрибуты:

• xml:lang и xml:base — унаследованы от спецификации XHTML, и хотя являются устаревшими, сохранены в целях совместимости.
• Многочисленные aria-* атрибуты, используемые для улучшения доступности.
• Атрибуты обработчиков событий: onabort, onautocomplete, onautocompleteerror, onblur, oncancel, oncanplay, oncanplaythrough, onchange, onclick, onclose, oncontextmenu, oncuechange, ondblclick, ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, onerror, onfocus, oninput, oninvalid, onkeydown, onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onpause, onplay, onplaying, onprogress, onratechange, onreset, onresize, onscroll, onseeked, onseeking, onselect, onshow, onsort, onstalled, onsubmit, onsuspend, ontimeupdate, ontoggle, onvolumechange, onwaiting.

Описание аттрибутов¶

accesskey ¶

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

class ¶

Это список разделенных пробелами классов элемента. Классы позволяют CSS и JavaScript выбирать и получать доступ к конкретным элементам через селекторы по классу или через функции, такие как метод Document.getElementsByClassName() .

contenteditable ¶

• true или пустая строка, указывает, что элемент должен быть редактируемым;

• false , указывает, что элемент не должен быть редактируемым.

contextmenu ¶

data-* ¶

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

dir ¶

• ltr , что расшифровывается как left to right (слева направо), и предназначено для языков, в которых пишут слева направо (как в русском);

• rtl , что расшифровывается как right to left (справа налево), и предназначено для языков, в которых пишут справа налево (как в арабском);

• auto — позволяет принять решение пользовательскому приложению. Оно применяет базовый алгоритм — анализирует символы внутри элемента до тех пор, пока не найдет символ со строгим направлением, а затем применяет это направление ко всему элементу.

draggable ¶

• true , указывающее, что элемент можно перетаскивать;

• false , указывающее, что элемень нельзя перетаскивать.

dropzone ¶

• copy , указывающее, что перетаскивание создаст копию перетаскиваемого элемента;

• move , указывающее, что перетаскиваемый элемент будет перемещен в новое расположение;

• link — создаст ссылку на перетаскиваемые данные.

hidden ¶

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

id ¶

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

itemid , itemprop , itemref , itemscope , itemtype ¶

lang ¶

Участвует в определении языка элемента, языка написания нередактируемых элементов или языка, на котором должны быть написаны редактируемые элементы. Содержит единственное значение в формате, определенном в документе IETF BCP47. xml:lang имеет приоритет над ним.

spellcheck ¶

• true , указывающее, что элемент должен, по возможности, проверяться на наличие орфографических ошибок;

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

style ¶

Содержит описание стилей CSS, которые должны быть применены к элементу. Учтите, что рекомендуется определять стили в отдельном файле или файлах. Этот атрибут, как и элемент

tabindex ¶

• отрицательное число означает, что элемент фокусируемый, но он не может получить фокус посредством последовательной навигации с клавиатуры;

• 0 означает, что элемент фокусируемый и может получить фокус посредством последовательной навигации с клавиатуры, но порядок его следования определяется платформой;

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

title ¶

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

translate ¶

• пустая строка или yes указывает, что элемент должен быть переведен;

• no указывает, что элемент не должен быть переведен.

Источник

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

Существует категория HTML-атрибутов, которые можно применить к любому или почти любому HTML-тегу.

Пример

Скопировать ссылку «Пример» Скопировано

Пример глобального атрибута, с которым вы точно работаете постоянно — class . Его можно задать абсолютно любому тегу. Что очень круто, иначе нам было бы гораздо сложнее стилизовать страницу.

 
Простой div Простой span 
Простой h1 div class="parent">Простой divdiv> span class="parent">Простой spanspan> h1 class="parent">Простой h1h1>    Скопировать Скопировано Не удалось скопировать   

Как пишется

Скопировать ссылку «Как пишется» Скопировано

class

Скопировать ссылку «class» Скопировано

Позволяет выбирать конкретный элемент (или несколько) при помощи CSS или JavaScript. В качестве значения для атрибута class задают один или несколько классов для HTML-элемента, разделённые пробелом.

contenteditable

Скопировать ссылку «contenteditable» Скопировано

Делает любой элемент на странице редактируемым. В качестве значения для атрибута contenteditable используют true или false . А можно записать совсем без значения, тогда наличие самого атрибута будет равно contenteditable = «true» .

   div contenteditable>div> div contenteditable="true">div>    Скопировать Скопировано Не удалось скопировать   

data - *

Скопировать ссылку "data-*" Скопировано

data - * — группа атрибутов, позволяющая перекидывать данные между HTML и DOM. Часто используется для взаимодействия с HTML при помощи JavaScript. Если не требуется менять внешний вид элемента, то это удобнее, чем передёргивать классы.

hidden

Скопировать ссылку "hidden" Скопировано

Не требует явного указания значения, наличие атрибута само по себе означает состояние true . Прячет со страницы любой HTML-элемент. Причём элемент невидим не только для глаз пользователя, но и для скринридеров.

id

Скопировать ссылку "id" Скопировано

Важно, чтобы значение идентификатора было уникальным в рамках одной страницы. Позволяет создавать якоря — ссылки на части страницы, выбирать уникальный элемент при помощи CSS или JS. Значение: одно слово или набор символов, не может содержать пробелы. Позволяет сделать один из элементов на странице уникальным.

lang

Скопировать ссылку "lang" Скопировано

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

spellcheck

Скопировать ссылку "spellcheck" Скопировано

С помощью этого атрибута мы указываем браузеру, что в элементе, которому он задан, нужно проверить правописание. Значение: true или false .

style

Скопировать ссылку "style" Скопировано

Позволяет прописывать стили прямо внутри HTML-разметки. Внимание: это считается антипаттерном и может быть использовано только для проверки гипотез. Значение: любые правила CSS в соответствующем формате.

tabindex

Скопировать ссылку "tabindex" Скопировано

Указывает браузеру, нужно ли видеть этот элемент при навигации по странице с помощью клавиатуры. Часто используется для неинтерактивных элементов.
Значение: отрицательное или положительное целое число. Отрицательное число — элемент может быть выделен, но не участвует в последовательной цепочке навигации. 0 — элемент включается в цепочку последовательной навигации, но порядок остаётся на усмотрение браузера. Положительное число — элемент участвует в последовательной навигации, причём чем больше указанное значение, тем выше элемент будет в цепочке навигации. Если у нескольких элементов одинаковые значения, то они идут по порядку следования в HTML.

title

Скопировать ссылку "title" Скопировано

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

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

На собеседовании

Скопировать ссылку "На собеседовании" Скопировано

Как title влияет на вспомогательные технологии? В каких случаях пригодится? Какую информацию можно добавлять в атрибут?

Скопировать ссылку "Как title влияет на вспомогательные технологии? В каких случаях пригодится? Какую информацию можно добавлять в атрибут?" Скопировано

Это вопрос без ответа. Вы можете помочь! Почитайте о том, как контрибьютить в Доку.

Источник

Общие HTML атрибуты

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

Атрибут	Описание
accesskey	Определяет клавишу быстрого доступа для активации элемента
class	Определяет один или несколько имен классов для HTML элемента
contenteditable	Определяет, можно ли редактировать содержимое элемента или нет
contextmenu	Определяет контекстное меню для элемента
data-*	Используется для хранения пользовательских данных, относящихся к странице
dir	Определяет направление вывода текста HTML элементе
draggable	Определяет, является ли элемент перетаскиваемым или нет
dropzone	Определяет способ обработки данных (копирование, перемещение, создание ссылки), перетаскиваемых на данный элемент
hidden	Определяет, отображается элемент или нет
id	Определяет уникальный идентификатор элемента
lang	Определяет язык содержимого HTML элемента
spellcheck	Указывает браузеру проверять или нет правописание содержимого HTML элемента
style	Определяет встроенный стиль HTML элемента
tabindex	Определяет последовательность выбора элементов при нажатии на кнопку Tab
title	Определяет дополнительную информацию об элементе
translate	Определяет, может ли содержимое элемента переводиться или нет

Источник