accesskey (Accesskey)
The attribute is used in HTML to assign a keyboard shortcut to an element. It allows users to activate or focus on an element using a specific key or key combination.
<button accesskey="b">Click me</button>
autocapitalize (Autocapitalize)
The attribute is used in HTML to control whether the text in an element should be automatically capitalized. It is especially useful for mobile devices where automatic capitalization may occur, and this attribute allows developers to override or adjust that behavior.
<input type="text" autocapitalize="words" />
autofocus (Autofocus)
The attribute is used in HTML to automatically focus on an element when a web page loads. This can be particularly useful for improving user experience by directing the initial focus to a specific input field or interactive element.
<input type="text" autofocus />
class (Class)
The attribute is a fundamental HTML attribute used to assign one or more class names to an HTML element. Classes are typically used to apply styles or to group elements with similar behavior in CSS and JavaScript.
<div class="container">
<p class="highlight">This is a highlighted paragraph.</p>
</div>
contenteditable (Contenteditable)
The attribute is used in HTML to make the content of an element editable by the user. When set to "true," it allows users to modify the text or content directly within the specified element, making it useful for creating interactive and editable regions on a webpage.
<div contenteditable="true">
This content can be edited by the user.
</div>
data-* (Data)
The data-* attributes are a group of attributes in HTML that allow developers to store custom data private to the page or application. These attributes can be used to store information that is not intended for visual presentation but may be useful for scripting or styling purposes.
<div data-product-id="123" data-price="29.99" data-category="electronics">
<!-- Content of the div -->
</div>
dir (Direction)
The attribute is used in HTML to specify the text direction for the content of an element. It is particularly important in supporting languages that are written from right to left (RTL), such as Arabic or Hebrew, or left to right (LTR), such as English.
<p dir="rtl">This text is written from right to left.</p>
draggable (Draggable)
The draggable attribute is used in HTML to make an element draggable by the user. When set to "true," it enables the user to interact with the element using drag-and-drop functionality, which can be useful for creating interactive interfaces.
<div draggable="true" ondragstart="dragStart(event)">Drag me!</div>
<script>
function dragStart(event) {
event.dataTransfer.setData("text", event.target.textContent);
}
</script>
enterkeyhint (Enterkeyhint)
The attribute is an enumerated attribute defining what action label (or icon) to present for the enter key on virtual keyboards.
<input enterkeyhint="go" />
<p contenteditable enterkeyhint="go">https://example.org</p>
id (Id)
The attribute is a fundamental HTML attribute used to uniquely identify an element within a document. The value of the id attribute must be unique across the entire HTML document and is often used as a reference point for CSS styling and JavaScript interactions.
<div id="header">
<h1>Welcome to my website</h1>
</div>
inert (Inert)
The attribute is not a global attribute on its own but is part of the Inert Attribute Module. It is used to mark parts of the DOM (Document Object Model) as inert, meaning that the marked elements and their descendants should be treated as if they are not interactive and cannot be the target of user actions such as clicking or focus.
<div inert>
<p>This content is inert and cannot be interacted with.</p>
<button onclick="alert('Button clicked')">Click me</button>
</div>
inputmode (Input Mode)
The attribute is used in HTML to provide a hint to browsers about the type of virtual keyboard to display on devices that support touch or virtual keyboards. It helps improve the user experience by suggesting the appropriate keyboard layout based on the expected input.
<input type="text" inputmode="numeric" />
is (Is)
The attribute allows you to specify that a standard HTML element should behave like a defined custom built-in element. This attribute can only be used if the specified custom element name has been successfully defined in the current document, and extends the element type it is being applied to.
<p is="word-count"></p>
// Create a class for the element
class WordCount extends HTMLParagraphElement {
constructor() {
// Always call super first in constructor
super();
// Constructor contents omitted for brevity
// …
}
}
// Define the new element
customElements.define("word-count", WordCount, { extends: "p" });
itemid (Item Id)
The attribute is part of the HTML Microdata specification and is used to associate a unique identifier with an item. Microdata is a way to embed machine-readable data into HTML documents to provide additional context to web content, particularly for search engines.
<div itemscope itemtype="https://schema.org/Person" itemid="#person1">
<span itemprop="name">John Doe</span>
<span itemprop="jobTitle">Software Engineer</span>
</div>
itemprop (Item Property)
The attribute is part of the HTML Microdata specification. It is used to define the properties (attributes or values) of an item within an HTML document, providing a way to embed structured data into web content. This structured data can be used by search engines and other applications to better understand the content.
<div itemscope itemtype="https://schema.org/Person">
<span itemprop="name">John Doe</span>
<span itemprop="jobTitle">Software Engineer</span>
</div>
itemref (Item Reference)
The attribute is part of the HTML Microdata specification. It is used to reference properties of an item that are defined outside the element's subtree. This attribute is helpful when you want to associate properties with an item that are defined in separate parts of the HTML document.
<div itemscope itemtype="https://schema.org/Person" itemid="#person1" itemref="additionalInfo">
<span itemprop="name">John Doe</span>
</div>
<div id="additionalInfo">
<span itemprop="jobTitle">Software Engineer</span>
</div>
itemscope (Item Scope)
The attribute is part of the HTML Microdata specification. It is used to define the scope of an item within an HTML document. When applied to an element, it indicates that the element represents a specific item, and the properties of that item are defined within the element's subtree using the itemprop attribute.
<div itemscope itemtype="https://schema.org/Person">
<span itemprop="name">John Doe</span>
<span itemprop="jobTitle">Software Engineer</span>
</div>
itemtype (Item Type)
The attribute is part of the HTML Microdata specification. It is used to define the type of an item within an HTML document, providing a way to embed structured data into web content. The item type is typically associated with a specific vocabulary or schema (e.g., schema.org) that defines the properties and values applicable to that type.
<div itemscope itemtype="https://schema.org/Person">
<span itemprop="name">John Doe</span>
<span itemprop="jobTitle">Software Engineer</span>
</div>
lang (Language)
The attribute is a global attribute in HTML used to specify the primary language for the content of an element. It helps browsers and other user agents present the content in the correct language, and it is particularly important for multilingual websites and accessibility.
<p lang="en">This is a paragraph in English.</p>
<p lang="es">Este es un párrafo en español.</p>
nonce (Nonce)
The attribute is not a global HTML attribute on its own, but it is commonly used as part of security mechanisms, specifically in the context of Content Security Policy (CSP). In CSP, a nonce is a "number used once" that is included in a script tag to enable the execution of specific inline scripts while maintaining security.
<script nonce="randomlyGeneratedValue">
// Inline script with nonce
console.log('This script is allowed to execute due to the nonce.');
</script>
part (Part)
The attribute is part of the CSS Shadow Parts specification, which allows you to selectively style and theme specific pieces of a web component from the outside. It's commonly used to style different "parts" of a web component independently, providing a way to apply styles to specific elements within a component without affecting others.
<style>
/* Define styles for a specific part */
my-element::part(header) {
background-color: #3498db;
color: white;
}
</style>
<my-element part="header">
<!-- Content of the header part -->
</my-element>
popover (Popover)
Popover elements are hidden via display: none until opened via an invoking/control element (i.e. a <button> or <input type="button"> with a popovertarget attribute) or a HTMLElement.showPopover() call.
When open, popover elements will appear above all other elements in the top layer, and won't be influenced by parent elements' position or overflow styling.
A popover attribute can have values "auto" (default) or "manual"
<button popovertarget="my-popover">Open Popover</button>
<div popover id="my-popover">Greetings, one and all!</div>
slot (Slot)
The attribute is part of the Web Components standard and is used to define insertion points within a web component's template where specific content can be distributed. It allows developers to create reusable components with customizable content insertion points.
<!-- Custom element definition -->
<custom-element>
<!-- Content placed inside the slot will be assigned to the slot named "my-slot" -->
<div slot="my-slot">This content goes into the slot named "my-slot".</div>
</custom-element>
<!-- Custom element template (inside the <custom-element> definition) -->
<template id="custom-element-template">
<div>
<!-- Content from the slot with the name "my-slot" will be placed here -->
<slot name="my-slot"></slot>
</div>
</template>
spellcheck (Spellcheck)
The attribute is used to enable or disable spell checking for the content within an editable element, such as a text area or an input field.
Values:
spellcheck="true": Spell checking is enabled.
spellcheck="false": Spell checking is disabled.
<textarea spellcheck="true">This is editable content with spell checking enabled.</textarea>
style (Style)
The attribute is a global attribute in HTML that is used to apply inline styles to an HTML element. It allows you to define CSS rules directly within the HTML tag, providing a way to customize the appearance of individual elements.
<p style="color: red; font-size: 16px;">This is a red paragraph with a font size of 16 pixels.</p>
tabindex (Tabindex)
The attribute is a global attribute in HTML used to specify the tab order of an element when navigating through a webpage using the keyboard's "Tab" key. It is commonly used to enhance the accessibility and usability of web pages for users who navigate using keyboard input.
<input type="text" tabindex="1" />
<button tabindex="2">Click me</button>
title (Title)
The attribute is a global attribute in HTML used to provide additional information about an element. It is commonly used to add a tooltip or descriptive text that appears when a user hovers over the element with their mouse. The content of the title attribute should be concise and relevant to the element it describes.
<a href="https://www.example.com" title="Visit Example Website">Visit Example</a>
translate (Translate)
The attribute is a global attribute in HTML that is used to specify whether the content of an element should be translated when the page is localized or internationalized. It can be applied to any HTML element.
Values
translate="yes": The content should be translated (default behavior if the attribute is not present).
translate="no": The content should not be translated.
<p translate="no">This paragraph should not be translated.</p>
<p>This paragraph can be translated.</p>