- accesskey
- autocapitalize
- contenteditable
- dir
- draggable
- dropzone
- hidden
- inputmode
- itemid
- itemprop
- itemref
- itemscope
- lang
- slot
- spellcheck
- tabindex
- translate
Universal attributes are attributes that are common to all HTML elements. Therefore, these attributes can be added to all elements.
accesskey
This attribute provides an indication that allows you to create a keyboard shortcut for the current element. The browser must use the first character that exists according to the keyboard layout used.
Example:
<button accesskey="s">Stress reliever</button>
The way to activate the access key depends on the browser and its platforms.
autocapitalize
This attribute controls how typed text is automatically converted to uppercase. Valid values for this attribute are:
- none – conversion to upper case is not performed
- sentences – (by default) the first letter of each sentence is capitalized. Other letters are lowercase by default.
- none – conversion to upper case is not performed
- words – the first letter of each word is capitalized, the other letters are lowercase.
- characters – all letters are uppercase
<input autocapitalize="characters">
contenteditable
A restricted value attribute that indicates whether the user can edit the element. If so, the browser modifies the user interface to allow editing. Valid values for this attribute are:
- true or an empty string – these values indicate that the element should be editable
- false – which indicates that the element is not editable.
<blockquote contenteditable="true"> <p>Edit this</p> </blockquote>
dir
A attribute that specifies the orientation of the element’s text. Valid values for this attribute are:
- ltr(Left To Right) – indicates that content is written from left to right (e.g. French).
- rtl(Right To Left) – indicates that the content is written from right to left (e.g. Arabic).
- auto – the user agent decides. It uses an algorithm that parses the characters in an element’s content until it finds a character with strong bias, which it then applies to the entire element.
<p dir="rtl">some text</p>
draggable
A limited value attribute that indicates that the element can be dragged using the Drag & Drop API. Valid values for this attribute are:
- true – element can be dragged/dropped.
- false – item cannot be dragged/dropped.
dropzone
Attribute that indicates the type of content that can be dropped onto an element using the Drag & Drop API.
Valid values for this attribute are:
- copy – the element is deleted, its copy is created.
- move – element is reset, it is moved to this new location.
- link – a link is created to the data being moved.
hidden
A Boolean attribute whose value indicates that the element is not yet present or no longer relevant.
Therefore, this attribute can be used to hide page elements that cannot be used until the login procedure is complete.
The browser will not display elements that use this attribute. This attribute should not be used to hide content that could be displayed appropriately.
A concrete 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. In fact, this is display: none – this is how it is described in browser styles.
<p hidden> hidden text </p>
inputmode
This attribute gives a hint to the browser about which type to use, which will be entered in the field, and to help you set the virtual keyboard configuration so that it can be entered.
This type is primarily used for input elements, but can be used for any element with contenteditable mode. Specified for <input> or <textarea> elements
<input type="text" inputmode="numeric">
<textarea inputmode="text"></textarea>
- none – there is no virtual keyboard. When a page implements its own control of keyboard input.
- text – Standard input keyboard for the current user language (default value).
- decimal – a fractional numeric keypad that contains numbers and a decimal separator for the user’s language (usually .or ,). Devices may or may not display the minus (–) keyd.
- numeric – A numeric keypad, but only numbers 0-9 are required. Devices may or may not display minus..
- tel – Input from the phone keypad, including numbers 0-9, asterisk (*) and button (#).
- none – there is no virtual keyboard. When a page implements its own control of keyboard input.
- search – virtual keyboard optimized for search input. For example, the return/submit key could be labeled as “Search” and other optimizations are possible. Inputs that require a search query should normally use input type=”search” instead
- email – a virtual keyboard optimized for entering e-mail addresses.
- url – keyboard optimized for entering URLs. For example, the key could be /more prominent. Advanced features may include access to history and more.
itemid
The itemid attribute defines a unique global element identifier for microdata. Applies only to those 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 identifier can be ISBN — the unique international number of the book edition.
itemid=<adressс>
<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, chiselled saga set in the world of the Seven Kingdoms.
About the world of harsh lands of eternal cold and joyful lands of eternal summer. world lords and
heroes, warriors and mages, warlocks and murderers - all who have been brought together by Fate in
fulfillment of an ancient prophecy. About the world of dangerous adventures, great deeds and
subtle political intrigues.</div>
</div>
itemprop
The itemprop attribute is used to add microdata dictionary properties to an item. The name of the property is determined by the value of itemprop, and the value of the property is determined by the content of the HTML element, for example, the text that is placed inside the element.
itemprop="<property>"
The property is defined by the data dictionary. For example, Schema.org, maintained by Google, lists dictionaries with their possible properties.
<div itemscope itemtype="http://schema.org/Movie">
<div>
<h1 itemprop="name">Cloud Atlas</h1>
<span itemprop="alternativeHeadline">Cloud Atlas</span>
<img src="http://site.com/images/film/464484.jpg" alt="Cloud Atlas" itemprop="image"/>
</div>
</div>
itemref
Properties that are not children of an element with an itemscope attribute can be bound to 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 an annotation to a page that doesn’t contain a handy tree structure.
itemref="identifier"
<body> <div itemscope itemtype="http://schema.org/Product" itemref="name thumb description"></div> <h1 itemprop="name" id="name">Iphone 6 plus 16 GB</h1> <img src="http://imageexample.com/iphone6plus.jpg" itemprop="image" id="thumb"> <div itemprop="description" id="description">Description</div> </body>
itemscope
The itemscope attribute specifies the scope of the dictionary in the data structure. Typically works in conjunction with the itemtype attribute and limits where the itemtype will be active.
Specifying the itemscope attribute on an element creates a new element that results in a group of name-value pairs that describe properties and their values for the object represented by that element.
[/html]
Contacts:
Leo Tolstoy, 16
119021
Moscow,
Phone:+7 495 739–70–00,
Fax:+7 495 739–70–70,
Email: pr@yandex-team.ru
[/html]
!This attribute is a boolean attribute. Can be specified either without a value or with an empty value.
lang
The lang attribute specifies the language of the content of the HTML element.
In HTML5, the lang attribute can be used on any HTML element (all elements with this attribute will be validated.
<element lang="language code">
<p lang="fr">Ceci est un paragraphe.</p>
slot
The generic slot attribute assigns a slot from the shadow DOM to an element. The
<span slot="my-text">New Text</span>
<my-paragraph>
<span slot="my-text">Spme other text</span>
</my-paragraph>
<my-paragraph>
<ul slot="my-text">
<li>Can chenge</li>
<li>and list</li>
</ul>
</my-paragraph>
</body>
</html>
[js]
customElements.define('my-paragraph',
class extends HTMLElement {
constructor() {
super();
let template = document.getElementById('my-paragraph');
let templateContent = template.content;
const shadowRoot = this.attachShadow({
mode: 'open'
})
.appendChild(templateContent.cloneNode(true));
}
})
[/js]
<a href="/wp-content/uploads/2023/08/slot.jpg"><img src="/wp-content/uploads/2023/08/slot-1024x204.jpg" alt="Slot" width="640" height="128" class="aligncenter size-large wp-image-2210" /></a>
<h2 id="spellcheck">spellcheck</h2>
Tells the browser whether or not to check spelling and grammar in 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).
<div class="warning">!The browser may not support spell checking, or it may be disabled.</div>
[html]
<p spellcheck="false">
Не лѣпо ли ны бяшетъ, братіе, начяти
старыми словесы трудныхъ повѣстій
о пълку Игоревѣ, Игоря Святъславлича?</p>
- true – enables spell check mode.
- false – disables validation.
tabindex
This attribute specifies the order in which the element participates in tab navigation from the keyboard. It can take different values:
- a negative value – will indicate that the element can receive focus but is not accessible via sequential keyboard navigation
0 will indicate that the element can gain focus and be accessed via keyboard navigation, but the order is relative and determined by the user agent. - positive value – will indicate that the element can receive focus and is accessible via keyboard navigation.
- positive value – will indicate that the element can receive focus and is accessible via keyboard navigation.
The value used indicates the relative order of the element in the navigation. In other words, keyboard navigation will be in the ascending direction of the elements according to their respective tabindex values.
If multiple elements have the same value, their relative order in the document will be used.
<p>Press Tab to move between elements</p> <p><button>Sixth</button></p> <p><button>Seventh</button></p> <p><button tabindex="5">The fifth</button></p> <p><button tabindex="1">First</button></p> <p><button tabindex="3">Third</button></p> <p><button tabindex="2">Second</button></p> <p><button tabindex="4">Fourth</button></p>
translate
The translate attribute specifies whether the content of the element should be translated or not.
<p translate="no">Don't translate this!</p> <p>This can be translated to any language.</p>